Using this in event handler in strict javascript?

Question

Suppose you have a routine like the following to wire up click event handlers

getElements(".board>div").forEach(function(elem){
  elem.addEventListener("click", handleClick);
});

And then in the handler, you need to work with the sender (i.e. this)

function handleClick(){      
  if(this.innerText.toLowerCase() !== "x"){ 
    ...

How do you use this in this scenario without a jshint violation/warning?

It's not jshint per se that says "this" is bad. It's just that jshint advises you to `"use strict"` and in strict mode `this` outside of method calls is always bound to `undefined`. — slebetman, Oct 31 '13 at 17:01

score 2 · Accepted Answer · edited May 23 '17 at 12:24

2

Your use of this is valid. To suppress the this errors in your event handler add /*jshint validthis: true */ to the top of the function.

edited May 23 '17 at 12:24

Community

answered Mar 23 '14 at 04:28

Web_Designer

score 1 · Answer 2 · answered Oct 31 '13 at 16:09

1

Why don't you just bind the function with the object?

getElements(".board>div").forEach(function(elem){
  elem.addEventListener("click", handleClick.bind(elem));
});

answered Oct 31 '13 at 16:09

Serge

cocco · Answer 3 · 2013-10-31T16:19:33.753

use one eventhandler

especially if you have many elements inside your board.

adding multiple eventlisteners slows down the browser.

js

function h(e){
 alert(e.target.textContent)
}
document.getElementsByClassName('board')[0].onclick=h

or

document.querySelector('.board').addEventListener('click',h,false)

html

<div class="board"><div>1</div><div>2</div><div>3</div><div>4</div></div>

example

in your case...

function h(e){
 e.target.innerText==1||(alert('this is not 1')/*,...*/) 
}

example 2

inside the handler function (h) this is the 'board'.

3 Answers3