javascript 相同的 addEventListener 会起作用吗？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10364298/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Will the same addEventListener work?
提问by anony_root
elemen.addEventListener('click',func,false);
elemen.addEventListener('click',func,false);
Will whether the funcbe called twice on click on elemen?
是否func会在点击时调用两次elemen？
If yes... Is there a solution to check is the same event listener exists on elemen?
如果是...是否有解决方案可以检查是否存在相同的事件侦听器elemen？
回答by T.J. Crowder
funcwill notbe called twice on click, no; but keep reading for details and a "gotcha."
func单击时不会被调用两次，不；但请继续阅读以了解详细信息和“陷阱”。
From addEventListenerin the spec:
从addEventListener规范中：
If multiple identical
EventListenersare registered on the sameEventTargetwith the same parameters the duplicate instances are discarded. They do notcause theEventListenerto be called twice and since they are discarded they do not need to be removed with theremoveEventListenermethod.
如果使用相同的参数在
EventListeners同一个上注册了多个相同EventTarget的实例，则丢弃重复的实例。它们不会导致EventListener被调用两次，并且由于它们被丢弃，因此不需要随removeEventListener方法一起删除。
(My emphasis)
（我的重点）
Here's an example:
下面是一个例子：
var target = document.getElementById("target");
target.addEventListener("click", foo, false);
target.addEventListener("click", foo, false);
function foo() {
var p = document.createElement("p");
p.innerHTML = "This only appears once per click, but we registered the handler twice.";
document.body.appendChild(p);
}<input type="button" id="target" value="Click Me">It's important to note, though, that it has to be the same function, not just a function that does the same thing. For example, here I'm hooking up four separate functions to the element, all of which will get called:
但是，重要的是要注意，它必须是相同的函数，而不仅仅是执行相同操作的函数。例如，在这里我将四个单独的函数连接到元素，所有这些函数都将被调用：
var target = document.getElementById("target");
var count;
for (count = 0; count < 4; ++count) {
target.addEventListener("click", function() {
var p = document.createElement("p");
p.innerHTML = "This gets repeated.";
document.body.appendChild(p);
}, false);
}<input type="button" id="target" value="Click Me">That's because on every loop iteration, a differentfunction is created (even though the code is the same).
这是因为在每次循环迭代中，都会创建一个不同的函数（即使代码相同）。
回答by An?e
I would just like to add to the great answer provided by @T.J. Crowler.
我只想补充@TJ Crowler 提供的出色答案。
I had a specific task, that required me to add a same callback twice for the same event to an HTML element. It is true, that the second one discards the first, but:
我有一个特定的任务，需要我为同一个事件向 HTML 元素添加两次相同的回调。确实，第二个丢弃了第一个，但是：
If multiple identical EventListeners are registered on the same EventTarget with the same parameters, the duplicate instances are discarded. They do not cause the EventListener to be called twice, and they do not need to be removed manually with the removeEventListener() method.
Note, however that when using an anonymous function as the handler, such listeners will NOT be identical, because anonymous functions are not identical even if defined using the SAME unchanging source-code simply called repeatedly, even if in a loop.
如果在同一个 EventTarget 上使用相同的参数注册了多个相同的 EventListeners，则丢弃重复的实例。它们不会导致 EventListener 被调用两次，并且不需要使用 removeEventListener() 方法手动删除它们。
但是请注意，当使用匿名函数作为处理程序时，此类侦听器将不相同，因为即使使用简单重复调用的 SAME 不变源代码定义匿名函数也不相同，即使在循环中也是如此。
Source: https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#Multiple_identical_event_listeners(as of 5th of February 2020.)
来源：https: //developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#Multiple_identical_event_listeners（截至 2020 年 2 月 5 日。）
So if the second EventListener has its handler as an anonymous function it would not discard the first. So it would simply be called twice.
因此，如果第二个 EventListener 将其处理程序作为匿名函数，它不会丢弃第一个。所以它只会被调用两次。
An alternative for your loop solution.
循环解决方案的替代方案。
