相同的 addEventListener 会起作用吗？

Question

elemen.addEventListener('click',func,false);
elemen.addEventListener('click',func,false);

Will whether the func be called twice on click on elemen ?

If yes... Is there a solution to check is the same event listener exists on elemen ?

Answer 1

In your example, func will not be called twice on click, no; but keep reading for details and a "gotcha."

From addEventListener in the spec:

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 since they are discarded they do not need to be removed with the removeEventListener method.

(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 different function is created (even though the code is the same).

Answer 2

I would just like to add to the great answer provided by @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:

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.

Source: https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#Multiple_identical_event_listeners (as of 5th of February 2020.)

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.

An alternative for your loop solution.