在函数中存储事件侦听器并调用该函数答案

【问题标题】：Storing event listeners in functions and calling that function在函数中存储事件侦听器并调用该函数
【发布时间】：2015-04-28 16:34:04
【问题描述】：

我在函数中有一个事件侦听器，每次调用该函数时，事件侦听器都会不断附加，并且事件侦听器中的代码会多次触发，具体取决于调用该函数的次数。我该如何解决这个问题？

function myFunction() {
    $("#element").on("click", function() {
        alert("test");
    }
}

$("body").on("click", function() {
    myFunction();
});

每次调用 myFunction() 时都会添加一个额外的单击事件侦听器，因此如果我单击主体 5 次，则单击“#element”。尽管只单击一次，但警报消息将运行 5 次。

【问题讨论】：

从那个函数中取出事件附件代码？
将代码添加到您的问题中。
“我该如何解决这个问题？” 不要在函数内部附加事件处理程序。
你想通过这段代码实现什么？你期望什么输出？这不是绑定事件的正确方法。
你为什么要这样做？

标签： javascript jquery

【解决方案1】：

如果您必须这样做，请使用off 然后使用on 以确保它不会多次连接。为确保您不会删除任何其他人的处理程序，请向事件添加自定义命名空间（例如下面的 .mycustom）：

function myFunction() {
    $("#element").off('click.mycustom').on("click.mycustom", function() {
        alert("test");
    }
}

自定义命名空间对事件没有影响，但请确保您以后可以使用 off 访问特定版本的 click。

【讨论】：

【解决方案2】：

通常，addEventListener 不会将事件侦听器附加到事件侦听器列表中，如果该列表中已经存在具有相同类型、回调和捕获的事件侦听器。

但是，问题在于您在每次调用 myFunction 时都重新创建了一个新的（不同的）回调。为避免这种情况，您应该将回调存储在 myFunction 之外的变量中。

但是即使你这样做了，jQuery 仍然会多次调用回调。所以只需使用 vanilla-js：

function callback() {
  alert("test");
}
function myFunction() {
  document.querySelector("#element").addEventListener("click", callback);
}

function callback() {
  alert("test");
}
function myFunction() {
  document.querySelector("#element").addEventListener("click", callback);
}
$("body").on("click", myFunction);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Some content — click me first.
<div id="element">Element — then click me</div>

【讨论】：