Eine kurze Analyse des Inhalts zwischen js-Ereignisbindung, Ereignisüberwachung und Ereignisdelegation

Der Inhalt dieses Artikels ist eine kurze Analyse der js-Ereignisbindung und -Überwachung und -Delegierung. Ich hoffe, dass er Ihnen weiterhilft.

1. Ereignisbindung
Damit JavaScript auf Benutzeroperationen reagiert, müssen Sie zunächst Ereignisverarbeitungsfunktionen an DOM-Elemente binden. Die sogenannte Ereignisverarbeitungsfunktion ist eine Funktion, die Benutzeroperationen verarbeitet, die unterschiedlichen Namen entsprechen.
Es gibt drei häufig verwendete Methoden zum Binden von Ereignissen:
(1) Binden Sie Ereignisse direkt im DOM
Wir können das Binden per Klick auf das DOM-Element oder per Mouseover durchführen , onmouseout, onmousedown, onmouseup, ondblclick, onkeydown, onkeypress, onkeyup usw.

<input type="button" value="click me" onclick="hello()"><script>
function hello(){
    alert("hello world!");
}
</script>

(2) Bindungsereignisse im JavaScript-Code
Bindungsereignisse im JavaScript-Code (d. h. innerhalb von Skript-Tags) können JavaScript-Code von HTML-Tags und der Dokumentstruktur trennen. Klar und einfach zu verwalten und entwickeln.

<input type="button" value="click me" id="btn"><script>
document.getElementById("btn").onclick = function(){
    alert("hello world!");
}
</script>

(3) Verwenden Sie die Ereignisüberwachung, um Ereignisse zu binden.
Eine andere Möglichkeit, Ereignisse zu binden, besteht darin, addEventListener() oder attachmentEvent() zu verwenden, um die Ereignisüberwachungsfunktion zu binden.
Ereignisüberwachung
In Bezug auf die Ereignisüberwachung definiert die W3C-Spezifikation drei Ereignisphasen: die Erfassungsphase, die Zielphase und die Bubbling-Phase.
W3C-Spezifikation

element.addEventListener(event, function, useCapture)

Ereignis: (erforderlicher) Ereignisname, unterstützt alle DOM-Ereignisse.
Funktion: (erforderlich) Gibt die Funktion an, die ausgeführt werden soll, wenn das Ereignis ausgelöst wird.
useCapture: (optional) Gibt an, ob das Ereignis in der Capture- oder Bubbling-Phase ausgeführt wird. wahr, erfassen. falsch, Blase. Der Standardwert ist falsch.

<input type="button" value="click me" id="btn1"><script>
document.getElementById("btn1").addEventListener("click",hello);
function hello(){
    alert("hello world!");
}
</script>

IE-Standard

element.attachEvent(event, function)

Ereignis: (erforderlicher) Ereignistyp. Es muss „on“ hinzugefügt werden, zum Beispiel: onclick.
Funktion: (erforderlich) Gibt die Funktion an, die ausgeführt werden soll, wenn das Ereignis ausgelöst wird.

<input type="button" value="click me" id="btn2"><script>
document.getElementById("btn2").attachEvent("onclick",hello);
function hello(){
    alert("hello world!");
}
</script>

Vorteile der Ereignisüberwachung
1. Es können mehrere Ereignisse gebunden werden.
Bei der regulären Ereignisbindung wird nur das letzte gebundene Ereignis ausgeführt. Der Event-Listener kann mehrere Funktionen ausführen.

<input type="button" value="click me" id="btn4"><script>
var btn4 = document.getElementById("btn4");
btn4.addEventListener("click",hello1);
btn4.addEventListener("click",hello2);
function hello1(){
    alert("hello 1");
}
function hello2(){
    alert("hello 2");
}
</script>

2. Sie können die entsprechende

<input type="button" value="click me" id="btn5"><script>
var btn5 = document.getElementById("btn5");
btn5.addEventListener("click",hello1);//执行了
btn5.addEventListener("click",hello2);//不执行
btn5.removeEventListener("click",hello2);
function hello1(){
    alert("hello 1");
}
function hello2(){
    alert("hello 2");
}
</script>

Gekapselte Ereignisüberwachung

<input type="button" value="click me" id="btn5">//绑定监听事件
function addEventHandler(target,type,fn){
    if(target.addEventListener){
        target.addEventListener(type,fn);
    }else{
        target.attachEvent("on"+type,fn);
    }
}//移除监听事件
function removeEventHandler(target,type,fn){
    if(target.removeEventListener){
        target.removeEventListener(type,fn);
    }else{
        target.detachEvent("on"+type,fn);
    }
}

Ereigniserfassung aufheben: Ereigniserfassungszeiger ist Vom Dokument zum Knoten, der das Ereignis auslöst, also von oben nach unten, um das Ereignis auszulösen.
Event-Bubbling: löst Ereignisse von unten nach oben aus. Der dritte Parameter der gebundenen Ereignismethode besteht darin, zu steuern, ob die Ereignisauslösesequenz eine Ereigniserfassung ist. wahr, Ereigniserfassung; falsch, Ereignissprudeln. Der Standardwert ist „false“, was bedeutet, dass das Ereignis sprudelt.

<p id="parent">
　　<p id="child" class="child"></p>
</p>

document.getElementById("parent").addEventListener("click",function(e){
                alert("parent事件被触发，"+this.id);
            })
            document.getElementById("child").addEventListener("click",function(e){
                alert("child事件被触发，"+this.id)
            })

child事件被触发，child
parent事件被触发，parent

Fazit: Erst Kind, dann Eltern. Ereignisse werden der Reihe nach von innen nach außen ausgelöst, was als Event-Bubbling bezeichnet wird.
Ändern Sie nun den Wert des dritten Parameters auf true:

document.getElementById("parent").addEventListener("click",function(e){
                alert("parent事件被触发，"+e.target.id);
            },true)
            document.getElementById("child").addEventListener("click",function(e){
                alert("child事件被触发，"+e.target.id)
            },true)parent事件被触发，parentchild事件被触发，child

Schlussfolgerung: zuerst Elternteil, dann Kind. Die Reihenfolge der Ereignisauslösung wird von außen nach innen geändert, was der Ereigniserfassung entspricht.

Verhindern Sie, dass Ereignisse sprudeln, und verhindern Sie Standardereignisse:
event.stopPropagation()-Methode: Dies ist eine Methode, um zu verhindern, dass Ereignisse sprudeln und Ereignisse nicht auftreten Wenn Sie diese Methode verwenden und auf eine Verbindung klicken, wird die Verbindung weiterhin geöffnet.
event.preventDefault()-Methode: Dies ist eine Methode zum Verhindern des Standardereignisses. Wenn diese Methode aufgerufen wird, wird die Verbindung nicht geöffnet, aber es kommt zu einer Blasenbildung, und die Blasenbildung wird weitergeleitet zur oberen Ebene.
false zurückgeben: Diese Methode verhindert das Sprudeln von Ereignissen und verhindert Standardereignisse wird nicht an das übergeordnete Element einer Ebene übergeben; es kann verstanden werden, dass die Rückgabe von „false“ dem gleichzeitigen Aufruf von event.stopPropagation() und event.preventDefault() entspricht > 2. Ereignisdelegation

Ereignisdelegierung soll verwendet werden Das Prinzip des Sprudelns besteht darin, Ereignisse zu übergeordneten Elementen oder Vorfahrenelementen hinzuzufügen, um Ausführungseffekte auszulösen.

<input type="button" value="click me" id="btn6">
var btn6 = document.getElementById("btn6");
document.onclick = function(event){    
event = event || window.event;    
var target = event.target || event.srcElement;    
if(target == btn6){
        alert(btn5.value);
    }
}

Vorteile der Ereignisdelegierung

1. Verbessern Sie die JavaScript-Leistung. Die Ereignisdelegierung kann die Geschwindigkeit der Ereignisverarbeitung erheblich verbessern und die Speichernutzung reduzieren

<ul id="list">
  <li id="item1" >item1</li>
  <li id="item2" >item2</li>
  <li id="item3" >item3</li></ul><script>
  var item1 = document.getElementById("item1");
  var item2 = document.getElementById("item2");
  var item3 = document.getElementById("item3");

document.addEventListener("click",function(event){
    var target = event.target;    
    if(target == item1){
        alert("hello item1");
    }else if(target == item2){
        alert("hello item2");
    }else if(target == item3){
        alert("hello item3");
    }
})</script>

2. Fügen Sie DOM-Elemente dynamisch hinzu, ohne Ereignisbindungen aufgrund von Elementänderungen zu ändern.

<ul id="list">
  <li id="item1" >item1</li>
  <li id="item2" >item2</li>
  <li id="item3" >item3</li></ul><script>var list = document.getElementById("list");

document.addEventListener("click",function(event){
    var target = event.target;    
    if(target.nodeName == "LI"){
        alert(target.innerHTML);
    }
})
var node=document.createElement("li");
var textnode=document.createTextNode("item4");
node.appendChild(textnode);
list.appendChild(node);
</script>

Verwandte Empfehlungen:

Eine kurze Diskussion über das on()-Bindungsereignis und das off()-Entbindungsereignis von jquery

Eine kurze Diskussion über gängige Methoden der JavaScript-Ereignisbindung und Analyse ihrer Vor- und Nachteile

Das obige ist der detaillierte Inhalt vonEine kurze Analyse des Inhalts zwischen js-Ereignisbindung, Ereignisüberwachung und Ereignisdelegation. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!