Zusammenfassung der Funktionsereignisse
Beim Erlernen von Funktionen werden Sie auf viele Funktionsereignisse stoßen.
Was ist eine Veranstaltung?
Die Interaktion zwischen JavaScript und HTML wird durch Ereignisse erreicht. Ereignisse sind bestimmte Interaktionsmomente, die in einem Dokument oder Browserfenster auftreten. Sie können Listener (oder Handler) verwenden, um Ereignisse so zu planen, dass beim Eintreten des Ereignisses der entsprechende Code ausgeführt wird. Dieses Modell, in der traditionellen Softwareentwicklung als Observer-Muster bekannt, unterstützt eine lose Kopplung zwischen dem Verhalten der Seite (JavaScript) und dem Erscheinungsbild der Seite (HTML und CSS).
Ereignisfluss
Der Ereignisfluss beschreibt die Reihenfolge, in der Ereignisse von der Seite empfangen werden. Gehen Sie von folgendem Code aus:
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<title>Document</title></head><body>
<div id="div1"></div></body></html>klickt auf das Div. Dieser Klick erfolgt nicht nur auf das Div, sondern es wird auch auf den übergeordneten Containerkörper geklickt. Wer wurde also zuerst angeklickt oder wie verbreitete sich das Ereignis? Der Ereignisstrom beschreibt eine solche Abfolge von Empfangsereignissen.
IE-Ereignisstrom (Ereignis-Bubbling)
Der IE-Ereignisstrom wird auch als Ereignis-Bubbling bezeichnet, d. h. das Ereignis wird vom spezifischsten Element (dem Knoten mit der tiefsten Verschachtelungsebene in der) empfangen Dokument) beim Start und wird dann Schritt für Schritt an weniger spezifische Knoten (Dokumente) weitergegeben.
Nehmen wir den obigen Code als Beispiel: Wenn Sie auf das div-Element klicken, wird das Klickereignis in der folgenden Reihenfolge weitergegeben:
1.<div> 2.<body> 3.<html> 4.document
Das heißt, das Klickereignis zuerst tritt auf dem div-Element auf. Dieses Element ist das Element, auf das wir geklickt haben, und dann breitet sich das Klickereignis entlang des DOM-Baums nach oben aus und tritt auf jeder Knotenebene auf, bis es auf das Dokumentobjekt übertragen wird.
Alle modernen Browser unterstützen das Event-Bubbling, es gibt jedoch einige Unterschiede. Beim Event-Bubbling in IE5.5 und früheren Versionen wird das HTML-Element übersprungen und direkt vom Textkörper zum Dokument weitergeleitet. IE9, Firefox, Chrome und Safari blasen das Ereignis bis zum Fensterobjekt. (Alte IE-Browser unterstützen nur Event-Bubbling).
Ereigniserfassung
Die Idee der Ereigniserfassung besteht darin, dass weniger spezifische Knoten Ereignisse früher und bestimmte Knoten Ereignisse zuletzt empfangen sollten, was genau das Gegenteil von Ereignissprudeln und höher ist Nehmen Sie das obige Beispiel als Beispiel: Klicken Sie auf das Div. Die Ereignisauslösesequenz der Ereigniserfassung lautet wie folgt:
1.document 2.<html> 3.<body> 4.<div>
Während des Ereigniserfassungsprozesses empfängt das Dokumentobjekt zuerst das Klickereignis und Dann wird das Ereignis entlang des DOM-Baums bis zum eigentlichen Ziel des Ereignisses weitergegeben.
IE9, Firefox, Chrome, Safari und Opera unterstützen alle die Ereigniserfassung. Obwohl die Ereignisspezifikation auf DOM2-Ebene erfordert, dass Ereignisse vom Dokumentobjekt aus weitergegeben werden, beginnen diese Browser mit der Erfassung von Ereignissen vom Fensterobjekt.
DOM-Ereignisfluss
Der durch Ereignisse auf DOM2-Ebene spezifizierte Ereignisfluss umfasst drei Phasen: Ereigniserfassungsphase, Zielphase und Ereignis-Bubbling-Phase. Das erste, was passiert, ist die Ereigniserfassung, die die Möglichkeit bietet, das Ereignis abzufangen. Dann empfängt das eigentliche Ziel das Ereignis. Die letzte Phase ist die Sprudelphase, in der Sie auf Ereignisse reagieren können.
Im DOM-Ereignisfluss empfängt das eigentliche Ziel während der Erfassungsphase keine Ereignisse. Dies bedeutet, dass während der Erfassungsphase Ereignisse vom Dokument über HTML bis hin zum Text gestoppt werden. Die nächste Stufe befindet sich in der Zielstufe, sodass das Ereignis im Div auftritt und als Teil der Bubbling-Stufe bei der Ereignisbehandlung betrachtet wird. Dann tritt die Sprudelphase ein und das Ereignis wird an das Dokument zurückgegeben.
Aber tatsächlich lösen IE9, Firefox, Chrome, Safari und Opera9.5 und höher während der Erfassungsphase Ereignisse für das Ereignisobjekt aus. Das Ergebnis ist, dass es zwei Möglichkeiten gibt, Ereignisse am Zielobjekt zu manipulieren. (IE8 und frühere Versionen unterstützen kein DOM-Ereignis-Streaming).
Ereignishandler
Ein Ereignis ist eine Aktion, die vom Benutzer oder vom Browser selbst ausgeführt wird. Dinge wie „Klicken“, „Laden“ und „Mouseover“ sind allesamt Ereignisnamen. Die Funktion, die auf ein Ereignis reagiert, wird als Ereignishandler (Ereignis-Listener) bezeichnet. Der Name des Event-Handlers beginnt mit „on“, also lautet der Event-Handler für das Click-Ereignis „onclick“ und der Handler für das Load-Ereignis „onload“. Es gibt verschiedene Möglichkeiten, Handler für Ereignisse anzugeben.
HTML-Ereignishandler
Jedes von einem Element unterstützte Ereignis kann mithilfe eines HTML-Attributs mit demselben Namen wie der entsprechende Ereignishandler angegeben werden. Der Wert dieses Attributs sollte JavaScript-Code sein, der ausgeführt werden kann. Beispiel:
<button id="myButton" onclick="alert('Clicked')">Click Me</button>//定义了一个按钮，点击时会显示一个警告框；
Ein in HTML definierter Ereignishandler kann bestimmte auszuführende Aktionen enthalten oder ein an anderer Stelle auf der Seite definiertes Skript aufrufen :
<button id="myButton" onclick="showMsg()">Click Me</button> //点击按钮就会调用showMsg()函数；<script>
function showMsg() {
alert('Hello world!')
}</script>Die Angabe von Ereignishandlern über HTML hat zwei Nachteile: 1. Zeitunterschiedsproblem, da der Benutzer möglicherweise das entsprechende Ereignis auslöst, sobald das HTML-Element auf der Seite erscheint, der Ereignishandler jedoch zu diesem Zeitpunkt möglicherweise 2. HTML- und JavaScript-Codes sind eng miteinander verbunden. Wenn Sie den Ereignishandler ändern möchten, müssen Sie den HTML-Code und den JavaScript-Code ändern.
DOM Level 0 Event-Handler
Die traditionelle Art, einen Event-Handler über JavaScript anzugeben, besteht darin, einem Event-Handler-Attribut eine Funktion zuzuweisen. Jedes Element verfügt über ein eigenes Event-Handler-Attribut, das normalerweise nur aus Kleinbuchstaben besteht, z. B. onclick. Indem Sie den Wert dieses Attributs auf eine Funktion festlegen, können Sie einen Ereignishandler angeben, Beispiel:
var btn = document.getElementById('myButton');
btn.onclick = function() {
alert("Clicked")
}使用DOM0级方法指定的事件处理程序被认为是元素的方法。因此，这时候事件处理程序是在元素的作用域中运行；换句话说，程序中的this引用当前元素。
也可以通过DOM0级方法删除事件处理程序，示例：
btn.onclick = null; //删除事件处理程序； DOM2级事件处理程序
DOM2级事件定义了两个方法，用于处理指定和删除事件处理程序的操作：addEventListener()和removeEventListener()。所有DOM节点都包含这两个方法，并且它们都接受3个参数：要处理的事件名、作为事件处理程序的函数和一个布尔值。最后的布尔值如果是true，表示在捕获阶段调用事件处理程序；如果是false，表示在冒泡阶段调用事件处理程序。示例：
var btn = document.getElementById('myButton'); //为按钮添加了click事件和处理程序；
btn.addEventListener('click',function() {
alert(this.id)
}，false)与DOM0级方法一样，这里添加的事件处理程序也是在其依附的元素的作用域中运行的。使用DOM2级方法添加事件处理程序可以添加多个事件处理程序，示例：
var btn = document.getElementById('myButton'); //为按钮添加了多个click事件和处理程序；
btn.addEventListener('click',function() {
alert(this.id);
}，false); var btn = document.getElementById('myButton'); ；
btn.addEventListener('click',function() {
alert('hello world!');
}，false);这里为按钮添加了2个事件处理程序。这两个事件处理程序会按照添加它们的顺序触发。
通过addEventListener()添加的事件处理程序只能用removeEventListener()来移除；移除时传入的参数与添加处理程序时使用的参数相同，意味着addEventListener()添加的匿名函数无法移除：
//该代码无法运行；btn.removeEventListener('click',function() {
alert(this.id);
}，false);
//该代码工作正常；//removeEventListener()和addEventListener()使用了相同函数；var btn = document.getElementById('myButton');
var function handler() {
alert(this.id);
}
btn.addEventListener('click',handler,false);
btn.removeEventListener('click',handler,false);本篇对js事件进行了总结，更多相关内容请关注php中文网。
相关推荐：
Das obige ist der detaillierte Inhalt vonZusammenfassung der Funktionsereignisse. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Heiße KI -Werkzeuge
Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos
AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.
Undress AI Tool
Ausziehbilder kostenlos
Clothoff.io
KI-Kleiderentferner
AI Hentai Generator
Erstellen Sie kostenlos Ai Hentai.
Heißer Artikel
Heiße Werkzeuge
Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor
SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen
Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung
Dreamweaver CS6
Visuelle Webentwicklungstools
SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)
Heiße Themen
1385
52
Tipps zum dynamischen Erstellen neuer Funktionen in Golang-Funktionen
Apr 25, 2024 pm 02:39 PM
Die Go-Sprache bietet zwei Technologien zur dynamischen Funktionserstellung: Schließung und Reflexion. Abschlüsse ermöglichen den Zugriff auf Variablen innerhalb des Abschlussbereichs, und durch Reflektion können mithilfe der FuncOf-Funktion neue Funktionen erstellt werden. Diese Technologien sind nützlich bei der Anpassung von HTTP-Routern, der Implementierung hochgradig anpassbarer Systeme und dem Aufbau steckbarer Komponenten.
Überlegungen zur Parameterreihenfolge bei der Benennung von C++-Funktionen
Apr 24, 2024 pm 04:21 PM
Bei der Benennung von C++-Funktionen ist es wichtig, die Reihenfolge der Parameter zu berücksichtigen, um die Lesbarkeit zu verbessern, Fehler zu reduzieren und das Refactoring zu erleichtern. Zu den gängigen Konventionen für die Parameterreihenfolge gehören: Aktion-Objekt, Objekt-Aktion, semantische Bedeutung und Einhaltung der Standardbibliothek. Die optimale Reihenfolge hängt vom Zweck der Funktion, den Parametertypen, möglichen Verwirrungen und Sprachkonventionen ab.
Wie schreibe ich effiziente und wartbare Funktionen in Java?
Apr 24, 2024 am 11:33 AM
Der Schlüssel zum Schreiben effizienter und wartbarer Java-Funktionen ist: Halten Sie es einfach. Verwenden Sie eine aussagekräftige Benennung. Bewältigen Sie besondere Situationen. Nutzen Sie entsprechende Sichtbarkeit.
Vollständige Sammlung von Excel-Funktionsformeln
May 07, 2024 pm 12:04 PM
1. Die SUMME-Funktion wird verwendet, um die Zahlen in einer Spalte oder einer Gruppe von Zellen zu summieren, zum Beispiel: =SUMME(A1:J10). 2. Die Funktion AVERAGE wird verwendet, um den Durchschnitt der Zahlen in einer Spalte oder einer Gruppe von Zellen zu berechnen, zum Beispiel: =AVERAGE(A1:A10). 3. COUNT-Funktion, die verwendet wird, um die Anzahl der Zahlen oder Texte in einer Spalte oder einer Gruppe von Zellen zu zählen, zum Beispiel: =COUNT(A1:A10) 4. IF-Funktion, die verwendet wird, um logische Urteile auf der Grundlage spezifizierter Bedingungen zu treffen und die zurückzugeben entsprechendes Ergebnis.
Vergleich der Vor- und Nachteile von C++-Funktionsstandardparametern und variablen Parametern
Apr 21, 2024 am 10:21 AM
Zu den Vorteilen von Standardparametern in C++-Funktionen gehören die Vereinfachung von Aufrufen, die Verbesserung der Lesbarkeit und die Vermeidung von Fehlern. Die Nachteile sind eingeschränkte Flexibilität und Namensbeschränkungen. Zu den Vorteilen variadischer Parameter gehören unbegrenzte Flexibilität und dynamische Bindung. Zu den Nachteilen gehören eine größere Komplexität, implizite Typkonvertierungen und Schwierigkeiten beim Debuggen.
Welche Vorteile haben C++-Funktionen, die Referenztypen zurückgeben?
Apr 20, 2024 pm 09:12 PM
Zu den Vorteilen von Funktionen, die Referenztypen in C++ zurückgeben, gehören: Leistungsverbesserungen: Durch die Übergabe als Referenz wird das Kopieren von Objekten vermieden, wodurch Speicher und Zeit gespart werden. Direkte Änderung: Der Aufrufer kann das zurückgegebene Referenzobjekt direkt ändern, ohne es neu zuzuweisen. Einfachheit des Codes: Die Übergabe als Referenz vereinfacht den Code und erfordert keine zusätzlichen Zuweisungsvorgänge.
Was ist der Unterschied zwischen benutzerdefinierten PHP-Funktionen und vordefinierten Funktionen?
Apr 22, 2024 pm 02:21 PM
Der Unterschied zwischen benutzerdefinierten PHP-Funktionen und vordefinierten Funktionen ist: Umfang: Benutzerdefinierte Funktionen sind auf den Umfang ihrer Definition beschränkt, während auf vordefinierte Funktionen im gesamten Skript zugegriffen werden kann. So definieren Sie: Benutzerdefinierte Funktionen werden mit dem Schlüsselwort function definiert, während vordefinierte Funktionen vom PHP-Kernel definiert werden. Parameterübergabe: Benutzerdefinierte Funktionen empfangen Parameter, während vordefinierte Funktionen möglicherweise keine Parameter erfordern. Erweiterbarkeit: Benutzerdefinierte Funktionen können nach Bedarf erstellt werden, während vordefinierte Funktionen integriert sind und nicht geändert werden können.
Erweiterte C++-Funktionsausnahme: Angepasste Fehlerbehandlung
May 01, 2024 pm 06:39 PM
Die Ausnahmebehandlung in C++ kann durch benutzerdefinierte Ausnahmeklassen verbessert werden, die spezifische Fehlermeldungen und Kontextinformationen bereitstellen und benutzerdefinierte Aktionen basierend auf dem Fehlertyp ausführen. Definieren Sie eine von std::Exception geerbte Ausnahmeklasse, um spezifische Fehlerinformationen bereitzustellen. Verwenden Sie das Schlüsselwort throw, um eine benutzerdefinierte Ausnahme auszulösen. Verwenden Sie „dynamic_cast“ in einem Try-Catch-Block, um die abgefangene Ausnahme in einen benutzerdefinierten Ausnahmetyp zu konvertieren. Im tatsächlichen Fall löst die Funktion open_file eine FileNotFoundException-Ausnahme aus. Das Abfangen und Behandeln der Ausnahme kann eine spezifischere Fehlermeldung liefern.
