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

Answer 2

从(this)移除cbChange(this)。这将立即执行该功能。

要获得所需的值target。target是执行事件的元素。在安慰ele时，您将看到所有可用选项

var checkboxes = document.getElementsByClassName('cb');
Array.from(checkboxes).forEach(function() {
  this.addEventListener("change", cbChange, false);
});

function cbChange(ele) {
  console.log(ele.target.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 3

您不需要将this传递给事件处理程序。您可以在事件处理程序中访问event.target。你可以这样做：

var checkboxes = document.getElementsByClassName('cb');
Array.from(checkboxes).forEach(function(){
  this.addEventListener("change", cbChange, false);
})

function cbChange(event){
  var ele = event.target;
  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 4

我认为您可以使用for..of循环来获取每个复选框的值。

var checkboxes = document.getElementsByClassName('cb');
for (let checkboxe of checkboxes ) {
  checkboxe.addEventListener('change', () => {
      console.log(checkboxe.value)
  })
}

Answer 5

我认为你应该使用地图

const checkboxes = document.getElementsByClassName('cb');
const cbArr = Array.from(checkboxes)
cbArr.map((d) => {
  d.addEventListener("change", cbChange(d), 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"/>

将此传递给addEventListener（）作为参数

5 个答案: