回调里面的Javascript removeEventListner？答案

【问题标题】：Javascript removeEventListner inside the callback?回调里面的Javascript removeEventListner？
【发布时间】：2019-09-27 14:18:42
【问题描述】：

如何添加只会触发一次的EventListener + 传递参数给它？

function () {
    var params = ...

    elem.addEventListener('load', function(event, params) {
        elem.removeEventListner('load', ...);
        do_something(params)
    }
}

【问题讨论】：

将变量设置为 true，然后在运行后将其设置为 false。做一个 if 语句并将所有代码放在 if 中。 if 检查变量是否为真。如果它是假的，它什么也不做。然后，在 if for true 结束时设置一个大约 100 毫秒的超时，然后运行 removeEventListener 并将变量设置为 false
这样变量会阻止它运行两次，然后函数完成后会移除监听器
需要在其中完成此操作的代码很复杂，这里不可能有肮脏的解决方案。
将回调保存为变量，以便您可以通过名称引用它来 removeEventListener() 它。

标签： javascript events event-handling dom-events

【解决方案1】：

使用 addEventListener 时，您可以提供一个配置对象作为第二个参数，您可以在其中指定它应该运行一次（如下面的代码）。关于将额外参数传递给事件回调，您可以通过提供上下文和额外参数来使用方法绑定

var button = document.querySelector('#btn');


button.addEventListener('click', function (params, ev) {
  
  console.log(params);
  
}.bind(button, { name: 'test'}), {
  once: true
})

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>

</head>
<body>
 <button id="btn">click</button>
</body>
</html>

【讨论】：

在我 17 年的开发中，我从来不知道这是一个存在的选项。 +1 教我一些新的有用的东西！

【解决方案2】：

如果你命名你的匿名函数，你可以在里面引用它：

function () {
    var params = ...

    elem.addEventListener('load', function callback(event, params) {
        elem.removeEventListner('load', callback);
        do_something(params)
    }
}

它不会泄漏到全局范围，因此您可以将所有“一次性”事件命名为 callback。

【讨论】：

【解决方案3】：

removeEventListener 方法要求您指定要删除的函数。这意味着您需要对该函数的引用，以便将其传递给addEventListener 和removeEventListener。像这样的：

function bindListener(elem, params) {
    var listener = function() {
        do_something(params);
        elem.removeEventListener('load', listener);
    }
    elem.addEventListener('load',listener);
}

【讨论】：