Inhaltsanalyse der DOM-Ereignisbindung in Javascript

Der Inhalt dieses Artikels befasst sich mit der Inhaltsanalyse der DOM-Ereignisbindung in JavaScript. Ich hoffe, dass er für Freunde hilfreich ist.

DOM-Level-2-Ereignis

element.addEventListener(type,handler,boolean)
Der erste Wert stellt den Ereignistyp dar, ohne on.
Die zweite ist die Ausführungsmethode. (Ereignishandlerfunktion)
Der dritte Wert ist ein boolescher Wert, der Standardwert ist falsch und wird nur während der Bubbling-Phase ausgeführt. true bedeutet Ausführung in der Erfassungsphase

element.removeEventListener(type,handler,boolean)
Der erste Wert stellt den Ereignistyp dar, ohne on.
Die zweite ist die Ausführungsmethode. (Ereignishandlerfunktion)
Der dritte Wert ist ein boolescher Wert, der Standardwert ist falsch und wird nur während der Bubbling-Phase ausgeführt. true, um das
-Entfernungsereignis während der Erfassungsphase auszuführen. Die Verwendung stimmt mit addEventListener überein.

element.attachEvent(type,handler) IE-Ereignisbindung.
element.detachEvent(type, handler) IE-Ereignisentfernung.
Der erste Wert stellt den Ereignistyp dar, plus an.
Die zweite ist die Ausführungsmethode. (Ereignisbehandlungsfunktion),
Da das Ereignismodell des IE nur ein Bubbling-Modell hat, müssen nur zwei Werte übergeben werden

Browserübergreifende Ereignisbindung hinzufügen

var  addEvent = function(ele,type,handler){
    if(ele.addEventListener){
        ele.addEventListener(type,handler,false)
    }else if(ele.attachEvent){
        ele.attachEvent("on"+type,handler)
    }else{
        ele["on"+type]=handler
    }
}
addEvent(btn,"click",function(){console.log("点击")})

Kreuz entfernen -Browser-Bindung

function removeEvent(ele,type,handler){
    if(ele.removeEventListener){
        ele.removeEventListener(type,handler,false)
    }
    else if(ele.detachEvent){
        ele.detachEvent('on'+type,handler)
    }
    else{
        ele['on'+type]=null
    }
}
removeEvent(btn,"click",function(){console.log("点击")})

DOM-Level-0-Ereignis
on-Attribut in HTML

<button id="btn" onclick="console.log(1)">确定</button>
<button id="btn" onclick="fn()">确定</button>

Die Zeichen in Anführungszeichen sind ausführbare Zeichenfolgen
Aufgrund der On-Methode in HTML ist die --Methode eng Paare js und HTML, was der späteren Wartung nicht förderlich ist und daher nicht empfohlen wird.

DOM Level 0-Ereignis

var btn=document.getElementById("btn")
btn.onclick=function(){
    console.log(1);
}
btn.onclick=function(){
    console.log(2);
}//2

Wenn Sie dasselbe Ereignis hinzufügen, überschreibt das spätere das vorherige Ereignis

Verwandte Empfehlungen:

js Detaillierte Erläuterung der DOM-Ereignisbindung

Detaillierte Erläuterung der Verwendung der DOM-Ereignisbindung in JQuery_jquery

Das obige ist der detaillierte Inhalt vonInhaltsanalyse der DOM-Ereignisbindung in Javascript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!