同一个addEventListener会工作吗？

Question

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

是否func可以点击两次被叫elemen？

如果是的话......是否有检查的解决方案是否存在相同的事件监听器elemen？

Answer 1

func会不会被上点击调用两次,没有; 但请继续阅读细节和"陷阱".

来自addEventListener规范:

如果使用相同的参数在EventListeners同一个上注册多个相同的,EventTarget则丢弃重复的实例.它们不会导致EventListener被调用两次,因为它们被丢弃,所以不需要使用该removeEventListener方法移除它们.

(我的重点)

这是一个例子:

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">

但重要的是要注意,它必须是相同的功能,而不仅仅是一个功能相同的功能.例如,在这里我将四个独立的函数连接到元素,所有这些函数都将被调用:

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">

这是因为在每次循环迭代时,都会创建一个不同的函数(即使代码是相同的).