JavaScript-Ereignisbehandlungsmethoden (drei Typen)_Javascript-Kenntnisse

Da ich die Website jeden Tag ändern und Spezialeffekte für die Website erstellen muss, habe ich viele js-Belichtungsereignisse gesehen. Manchmal ist es verwirrend, wenn ich sie verwende. Jetzt habe ich es systematisch geklärt und teile es hiermit als Referenz auf der Script House-Plattform!

1. Was sind JavaScript-Ereignisse?

Ereignisse sind das schlagende Herz von JavaScript-Anwendungen und der Kitt, der alles zusammenhält. Ereignisse treten auf, wenn wir bestimmte Arten von Interaktionen mit Webseiten im Browser durchführen.

Das Ereignis kann sein, dass der Benutzer auf einen Inhalt klickt, die Maus über ein bestimmtes Element bewegt oder bestimmte Tasten auf der Tastatur drückt. Das Ereignis kann auch ein Ereignis im Webbrowser sein, beispielsweise das Laden einer Webseite. oder der Benutzer scrollt oder ändert die Größe des Fensters. Um es ganz klar auszudrücken: Ein Ereignis ist ein bestimmter Moment der Interaktion, der in einem Dokument oder Browser stattfindet!

Durch die Verwendung von JavaScript können Sie auf das Auftreten bestimmter Ereignisse warten und angeben, dass bestimmte Ereignisse als Reaktion auf diese Ereignisse auftreten.

2. Ereignisablauf

Der Ereignisfluss beschreibt die Reihenfolge, in der Ereignisse auf einer Seite empfangen werden. In den frühen Tagen der Browserentwicklung konkurrierten die beiden großen Browserhersteller IE und Netscape miteinander, und es trat eine Falle auf, nämlich ihre Interpretation Es entstanden zwei völlig gegensätzliche Definitionen. Das ist es, was wir kennen: das Event-Bubbling des IE, die Event-Capture von Netscape. Machen wir zunächst ein Foto, um uns kurz den Aufbau anzusehen:

1. Ereignis sprudelt

Ereignis-Bubbling bedeutet, dass das Ereignis zunächst vom spezifischsten Element (dem Knoten mit der tiefsten Verschachtelungsebene im Dokument) empfangen wird und sich dann nach oben zum am wenigsten spezifischen Knoten (Dokument) ausbreitet. Nehmen Sie zur Veranschaulichung das obige Bild: Wenn Sie auf den Textteil klicken, wird er zuerst vom Element am Text empfangen und dann Schritt für Schritt an das Fenster weitergegeben, dh der Prozess von 6-7-8-9-10 wird ausgeführt.

2. Ereigniserfassung

Ereigniserfassung bedeutet, dass das Ereignis zuerst vom weniger spezifischen Knoten empfangen wird und der spezifischste Knoten das Ereignis zuletzt empfängt. In ähnlicher Weise wird im obigen Modell beim Klicken auf den Textteil dieser zunächst vom Fenster empfangen und dann Schritt für Schritt an das Textelement weitergegeben, dh der Prozess 1-2-3-4-5 wird ausgeführt.

Wie wird es im Code ausgedrückt? Wird später bekannt gegeben!

Drei Möglichkeiten von Javascript-Ereignishandlern

Wenn ein Ereignis auftritt, müssen wir es behandeln. Es gibt drei Hauptmethoden von Javascript-Ereignishandlern:

1. HTML-Ereignishandler

Das heißt, wir fügen den Event-Handler direkt in den HTML-Code ein, wie zum Beispiel den folgenden Code:

<input id="btn" value="按钮" type="button" onclick="showmsg();">
　　<script>
　　 function showmsg(){
　　 alert("HTML添加事件处理");
　　 }
　　</script> 

Aus dem obigen Code können wir ersehen, dass die Ereignisverarbeitung direkt im Element verschachtelt ist. Dies hat ein Problem: Die Kopplung zwischen HTML-Code und js ist zu stark. Wenn Sie showmsg eines Tages in js ändern möchten, dann nicht Sie müssen es nur in js ändern, aber Sie müssen es auch in HTML ändern. Wir können ein oder zwei Änderungen akzeptieren, aber wenn Ihr Code das Niveau von 10.000 Zeilen erreicht, wird die Änderung viel Zeit und Geld erfordern Wir verwenden diese Methode nicht. Empfohlen.

2. DOM-Level-0-Ereignishandler

Um die Ereignisverarbeitung für das angegebene Objekt hinzuzufügen, sehen Sie sich den folgenden Code an:

<input id="btn" value="按钮" type="button">
　　<script>
　　　　var btn= document.getElementById("btn");
　　 btn.onclick=function(){
　　　　　　alert("DOM级添加事件处理");
　　　　} 
　　　　btn.onclick=null;//如果想要删除btn的点击事件，将其置为null即可
　　</script> 

Aus dem obigen Code können wir ersehen, dass im Vergleich zu HTML-Ereignishandlern, DOM-Level-0-Ereignissen, die Kopplung zwischen HTML-Code und JS-Code stark reduziert wurde. Intelligente Programmierer sind jedoch immer noch nicht zufrieden und hoffen, einen einfacheren Weg zu finden, damit umzugehen.

3. DOM-Level-2-Ereignishandler

DOM2 fügt auch Ereignishandler zu bestimmten Objekten hinzu, umfasst jedoch hauptsächlich zwei Methoden zur Verarbeitung der Vorgänge zum Angeben und Löschen von Ereignishandlern: addEventListener() und removeEventListener(). Sie alle erhalten drei Parameter: den zu verarbeitenden Ereignisnamen, die Funktion als Ereignishandler und einen booleschen Wert (ob das Ereignis in der Erfassungsphase behandelt werden soll). Schauen Sie sich den folgenden Code an:

<input id="btn" value="按钮" type="button">
　　<script>
　　 var btn=document.getElementById("btn");
　　 btn.addEventListener("click",showmsg,false);//这里我们把最后一个值置为false，即不在捕获阶段处理，一般来说冒泡处
理在各浏览器中兼容性较好
　　 function showmsg(){
　　 alert("DOM级添加事件处理程序");
　　 }
　　 btn.removeEventListener("click",showmsg,false);//如果想要把这个事件删除，只需要传入同样的参数即可
　　</script>

Hier können wir sehen, dass beim Hinzufügen und Löschen der Ereignisverarbeitung die letzte Methode direkter und einfacher ist. Ma Haixiang erinnert jedoch alle daran, dass bei der Verarbeitung des Löschereignisses die übergebenen Parameter mit den vorherigen Parametern übereinstimmen müssen, sonst ist der Löschvorgang ungültig!

Der Prozess und der Unterschied zwischen Event-Bubbling und Event-Capturing

Apropos, lassen Sie mich Ihnen einen Code geben, der den Prozess des Event-Bubblings und der Event-Erfassung erklärt und Ihnen auch den Unterschied zwischen den beiden zeigt:

<!doctype html>
　　<html lang="en">
　　<head>
　　 <meta charset="UTF-">
　　 <title>Document</title>
　　 <style>
　　 #p{width:px;height:px;border:px solid black;}
　　 #c{width:px;height:px;border:px solid red;}
　　 </style>
　　</head>
　　<body>
　　 <div id="p">
　　 i am www.mahaixiang.cn
　　 <div id="c">i like www.mahaixiang.cn</div>
　　 </div>
　　 <script>
　　 var p = document.getElementById('p');
　　 　　var c = document.getElementById('c');
　　 c.addEventListener('click', function () {
　　 alert('子节点捕获')
　　 }, true);
　　 c.addEventListener('click', function () {
　　 alert('子节点冒泡')
　　 }, false);
　　 p.addEventListener('click', function () {
　　 alert('父节点捕获')
　　 }, true);
　　 p.addEventListener('click', function () {
　　 alert('父节点冒泡')
　　 }, false);
　　 </script>
　　</body>
</html> 

Führen Sie den obigen Code aus und klicken Sie auf das untergeordnete Element. Wir werden feststellen, dass die Ausführungsreihenfolge lautet: Erfassung des übergeordneten Knotens – Erfassung des untergeordneten Knotens – Bubbling des untergeordneten Knotens. Anhand dieses Beispiels wird jeder verstehen, dass Ereignisse der DOM-Ebene 2 drei Phasen umfassen:

1. Ereigniserfassungsphase

2. Im Zielstadium;

5. Ergänzung