Wie Überschreiben Ereignishandler für "Klick" -Ereignis in JavaScript?

Question

Ich möchte Event-Handler für Click-Ereignis zu überschreiben. Dies ist der Event-Handler, den ich anfangs angehängt habe.

Wieder nach einer Bedingung möchte ich diesen Handler überschreiben und neu anhängen für "Klick" -Ereignis.

//removing 
document.querySelector("[data-id='start-btn']") 
    .removeEventListener("click", function (evt) { 
      //some code 
     }, false); 

    //attaching new 
    document.querySelector("[data-id='start-btn']") 
    .addEventListener("click", function (evt) { 
      //code 
     }); 

Aber noch ist es die Vorveranstaltung handler.I haben Ausführung verwendet removeEventListener (aber ich denke, es ist nicht in Betrieb).

Führe mich, wo ich falsch liege.

Answer 1

Die einzige Möglichkeit, einen Handler zu entfernen, der mit addEventListener hinzugefügt wurde, ist die Verwendung von mit genau den gleichen Argumenten. Das heißt, Sie auf die ursprüngliche Funktion eine Referenz benötigen:

var handler = function (evt) { 
    //some code 
}; 
document.querySelector("[data-id='start-btn']").addEventListener("click", handler); 

dann

document.querySelector("[data-id='start-btn']").removeEventListener("click", handler); 

Answer 2

removeEventListener macht Sinn, wirklich nur zu entfernen, wenn die Funktion Referenzen mit anstatt einer ganzen Funktion Körper vorbei zu beiden und addEventListener, was möglicherweise bedeuten würde, doppelte Kopie des Codes (und, wie Sie festgestellt haben, funktioniert sowieso nicht.)

also einen Verweis auf Ihre Funktion vorbereiten:

function my_func() { /* code */ } 

Und es als Handler Argument übergeben zu add/removeEventListener

document.querySelector('query').addEventListener('click', my_func); 
document.querySelector('query').removeEventListener('click', my_func); 

Es ist ein einfacher Weg, der einen älteren Codierungsstandard verwendet. Wenn Sie nur einen Ereignishandler für einen bestimmten Typ und ein bestimmtes Element wünschen, können Sie das DOM-Zero onclick verwenden.

document.querySelector('query').onClick = my_func; 
document.querySelector('query').onClick = my_func2; /* my_func() will no longer fire */