javascript - 添加和删​​除带有参数的事件监听器

Question

我正在编写一个 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 必须以某种方式解决这个问题，但代码有点困惑!

Answer 1

这是无效的:

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