Công cụ addEventListener có giống nhau không?

Question

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

Liệu func có được gọi hai lần khi nhấp vào elemen không?

Nếu có ... Có giải pháp để kiểm tra là cùng một trình xử lý sự kiện tồn tại trên elemen không?

Answer 1

func sẽ không được gọi hai lần khi nhấp, không; nhưng hãy tiếp tục đọc để biết chi tiết và "một chút".

Từ addEventListener trong spec:

Nếu nhiều giống hệt EventListeners được đăng ký trong cùng EventTarget với các thông số tương tự các trường hợp trùng lặp sẽ bị loại bỏ. Chúng không làm cho số EventListener được gọi hai lần và vì chúng bị loại bỏ, chúng không cần phải được loại bỏ bằng phương pháp removeEventListener.

(nhấn mạnh của tôi)

Dưới đây là một ví dụ:

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); 
 
}

Điều quan trọng cần lưu ý, mặc dù, rằng nó phải là cùng chức năng , không chỉ là một chức năng làm điều tương tự. Ví dụ, ở đây tôi đang hooking lên bốn chức năng riêng biệt để các yếu tố, tất cả trong số đó sẽ được gọi là:

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

Đó là bởi vì trên mỗi vòng lặp, một khác nhau chức năng được tạo ra (mặc dù mã là như nhau).