javascript - 将其作为参数传递给 addEventListener()

Question

我想将 change 事件添加到一组复选框，如何在我的事件函数中访问 this ，以便在我执行事件时可以访问值复选框。

这是我当前的代码:

var checkboxes = document.getElementsByClassName('cb');
Array.from(checkboxes).forEach(function(){
  this.addEventListener("change", cbChange(this), false);
});

function cbChange(ele){
  console.log(ele.value);
}

<input class="cb" type="checkbox" name="candidate" value="1"/>
<input class="cb" type="checkbox" name="candidate" value="2"/>
<input class="cb" type="checkbox" name="candidate" value="3"/>
<input class="cb" type="checkbox" name="candidate" value="4"/>

Answer 1

在 forEach 回调中，this 不引用 DOM 元素。它不引用任何有用的值。

其次，您立即调用 cbChange 并将其返回值传递给 addEventListener，这是 undefined。但是 addEventListener 期望传递一个函数，所以您要么必须传递 cbChange，要么传递一个调用 cbChange 的函数.

最后，虽然您可以定义事件处理程序以接受元素作为第一个参数，但如果它接受事件对象，则要简单得多，因为这是默认 API。

综上所述，最简单的解决方案是:

var checkboxes = document.getElementsByClassName('cb');
Array.from(checkboxes).forEach(function(element){
//                                      ^^^^^^^
  element.addEventListener("change", cbChange, false);
//^^^^^^^  
});

function cbChange(){
  console.log(this.value);
//            ^^^^
}

因为在事件处理程序中，this 指的是处理程序绑定(bind)到的元素，在 cbChange 中使用 this 就可以了。

---

这里有一些替代方案:

// Use the event object
var checkboxes = document.getElementsByClassName('cb');
Array.from(checkboxes).forEach(function(element){
  element.addEventListener("change", cbChange, false);
});

function cbChange(event){
  console.log(event.target.value);
}


// Using a wrapper that calls `cbChange`
var checkboxes = document.getElementsByClassName('cb');
Array.from(checkboxes).forEach(function(element){
  element.addEventListener("change", function() { cbChange(this); }, false);
});

function cbChange(ele){
  console.log(ele.value);
}