使用参数添加和删除事件侦听器 [英] Adding and Removing Event Listeners with parameters

问题描述

我正在撰写一个 vanilla JavaScript 工具，当启用时，会向传递给每个元素的元素添加事件侦听器。

I am writing a vanilla JavaScript tool, that when enabled adds event listeners to each of the elements passed into it.

喜欢这样做：

var do_something = function (obj) {
        // do something
    };

for (var i = 0; i < arr.length; i++) {
    arr[i].el.addEventListener('click', do_something(arr[i]));
}

不幸的是，这不行，因为据我所知， >添加事件侦听器时，参数只能传入匿名函数：

Unfortunately this doesn't work, because as far as I know, when adding an event listener, parameters can only be passed into anonymous functions:

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必须绕过这个方式，但代码是一个丛林！

I know I could easily use jQuery to solve my problem, but I am trying to minimise dependencies. jQuery must get round this somehow, but the code is a bit of a jungle!

推荐答案

这是无效的：

arr[i].el.addEventListener('click', do_something(arr[i]));

侦听器必须是函数引用。侦听器分配时不能指定参数。始终以事件作为第一个参数传递处理函数。要传递其他参数，您可以将侦听器包装成一个匿名函数，如下所示：

The listener must be a function reference. You cannot specify parameters at the time of listener assignment. A handler function will always be called with the event being passed as the first argument. To pass other arguments, you can wrap your listener into an anonymous function like so:

elem.addEventListener('click', function(event) {
  do_something( ... )
}

可以通过 removeEventListener 删除您只需命名处理函数：

To be able to remove via removeEventListener you just name the handler function:

function myListener(event) {
  do_something( ... );
}

elem.addEventListener('click', myListener);

要在处理函数中访问其他变量，可以使用闭包。例如：

To have access other variables in the handler function, you can use closures. E.g.:

function someFunc() {
  var a = 1,
      b = 2;

  function myListener(event) {
    do_something(a, b);
  }

  elem.addEventListener('click', myListener);
}

这篇关于使用参数添加和删除事件侦听器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！