在严格的javascript中使用此事件处理程序？

Question

假设您有一个如下例程来连接点击事件处理程序

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

然后在处理程序中，您需要使用发件人（即此）

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

如果没有jshint违规/警告，如何在此方案中使用this？

Answer 1

您对this的使用是有效的。要取消事件处理程序中的this错误，请将/*jshint validthis: true */添加到函数顶部。

在此处找到：https://stackoverflow.com/a/16553290/552067

Answer 2

使用一个eventhandler

特别是如果您的电路板内有许多元素。

添加多个eventlistener会降低浏览器的速度。

JS

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

或

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是'board'。

Answer 3

为什么不将函数与对象绑定？

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