我正在编写一个 vanilla JavaScript 工具,启用后会向传递给它的每个元素添加事件监听器。
我想做这样的事情:
var do_something = function (obj) {
// do something
};
for (var i = 0; i < arr.length; i++) {
arr[i].el.addEventListener('click', do_something(arr[i]));
}
不幸的是,这不起作用,因为据我所知,添加事件监听器时,参数只能传递给匿名函数:
for (var i = 0; i < arr.length; i++) {
arr[i].el.addEventListener('click', function (arr[i]) {
// do something
});
}
问题是我需要能够在禁用该工具时删除事件监听器,但我认为无法删除具有匿名函数的事件监听器。
for (var i = 0; i < arr.length; i++) {
arr[i].el.removeEventListener('click', do_something);
}
我知道我可以很容易地使用 jQuery 来解决我的问题,但我正试图最小化依赖性。jQuery 必须以某种方式解决这个问题,但代码有点困惑!
最佳答案
这是无效的:
arr[i].el.addEventListener('click', do_something(arr[i]));
监听器必须是函数引用。当您调用函数作为 addEventListener
的参数时,函数的返回值将被视为事件处理程序。您不能在分配监听器时指定参数。处理程序函数将始终以 event
作为第一个参数传递。要传递其他参数,您可以将处理程序包装到匿名事件监听器函数中,如下所示:
elem.addEventListener('click', function(event) {
do_something( ... )
}
为了能够通过 removeEventListener
移除,您只需命名处理函数:
function myListener(event) {
do_something( ... );
}
elem.addEventListener('click', myListener);
// ...
elem.removeEventListener('click', myListener);
要访问处理程序函数中的其他变量,您可以使用闭包。例如:
function someFunc() {
var a = 1,
b = 2;
function myListener(event) {
do_something(a, b);
}
elem.addEventListener('click', myListener);
}
关于javascript - 添加和删除带有参数的事件监听器,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15088010/