将此参数传递给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，因此使用this内部方法引用处理程序绑定到的元素cbChange。

以下是一些替代方案：

// 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);
}