Czy działa ten sam program addEventListener?

Question

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

Czy zadzwonić pod numer func dwa razy kliknij na elemen?

Jeśli tak ... Czy istnieje rozwiązanie do sprawdzenia, czy ten sam detektor zdarzeń istnieje na elemen?

Answer 1

func będzie nie nazywać się dwa razy kliknięciem, nie; ale czytaj dalej dla szczegółów i "gotcha".

Od addEventListener w spec:

Jeśli wielokrotne identyczne EventListeners są zarejestrowane w tej samej EventTarget z tymi samymi parametrami zduplikowane przypadki są odrzucane. One nie powodują dwukrotnego wywołania, a ponieważ są odrzucane, nie trzeba ich usuwać metodą removeEventListener.

(Moje podkreślenie)

Oto przykład:

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

Ważne jest, aby pamiętać jednak, że musi to być sama funkcja nie tylko funkcja, która robi to samo. Na przykład, tutaj mam podpinania się cztery oddzielne funkcje do elementu, z których każdy będzie się o nazwie:

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

to dlatego, że na każdej iteracji, tworzony jest inny funkcja (mimo że kod jest taki sam).