相同的addEventListener是否工作？

Question

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

是否func被点击elemen被调用两次？

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

Answer 1

func将不是被点击两次被调用，否;但请继续阅读以获得详细信息和“窍门”。

从在spec 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); 
 
}

重要的是要注意，虽然，它是相同的功能是非常重要的 ，而不仅仅是执行相同事情的功能。例如，我在这里挂钩了四个独立的功能的元素，所有这些都将被调用：

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

这是因为在每次循环迭代，创建一个不同功能（即使代码是相同的）。