gpt4 book ai didi

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

转载 作者:搜寻专家 更新时间:2023-11-01 05:09:29 24 4
gpt4 key购买 nike

我想将 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"/>

最佳答案

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

关于javascript - 将其作为参数传递给 addEventListener(),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44988614/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com