Использование этого в обработчике событий в строгом javascript?

Предположим, у вас есть процедура, подобная следующей, для подключения обработчиков событий щелчка.

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

А дальше в обработчике нужно работать с отправителем (т.е. с этим)

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

Как вы используете this в этом сценарии без нарушения/предупреждения jshint?


javascript this strict jshint
person Stand__Sure    schedule 31.10.2013    source источник
comment
почему бы не добавить только один обработчик в .board?   -  person cocco    schedule 31.10.2013
comment
Почему JSHint считает this плохим?   -  person Halcyon    schedule 31.10.2013
comment
Это не jshint как таковой, который говорит, что это плохо. Просто jshint советует вам "use strict", а в строгом режиме this вне вызовов методов всегда привязан к undefined.   -  person slebetman    schedule 31.10.2013

Ответы (3)


arrow_upward
2
arrow_downward

Ваше использование this допустимо. Чтобы подавить ошибки this в вашем обработчике событий, добавьте /*jshint validthis: true */ в начало функции.

Нашел это здесь: https://stackoverflow.com/a/16553290/552067

person Web_Designer    schedule 23.03.2014

arrow_upward
1
arrow_downward

Почему бы вам просто не связать функцию с объектом?

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

arrow_upward
0
arrow_downward

использовать один обработчик событий

особенно если у вас много элементов внутри вашей доски.

добавление нескольких прослушивателей событий замедляет работу браузера.

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>

пример

http://jsfiddle.net/3csJ2/

в твоем случае...

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

пример 2

http://jsfiddle.net/3csJ2/1/

внутри функции-обработчика (h) this — это «доска».

person cocco    schedule 31.10.2013