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

Question

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

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

然后在处理程序中，您需要与发件人一起工作（即this）

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

this在没有 jshint 违规/警告的情况下，您如何在这种情况下使用？

score 2 · Accepted Answer

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

score 1 · Accepted Answer

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

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

score 0 · Accepted Answer

使用一个事件处理程序

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

添加多个事件监听器会减慢浏览器的速度。

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>

例子

在你的情况下......

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

示例 2

处理函数 (h) 内部this是“板”。

3 回答 3