Warum löst dasselbe Ereignis zweimal Blasen aus?
Warum passiert das gleiche Sprudelereignis zweimal?
Event-Bubbling ist ein gängiger Mechanismus zur Ereignisübermittlung in Browsern. Wenn ein Element ein Ereignis auslöst, wird das Ereignis vom ausgelösten Element der Reihe nach an die oberen Elemente weitergegeben, bis es an das Stammelement des Dokuments weitergegeben wird. Dieser Vorgang ähnelt dem Sprudeln von Blasen im Wasser und wird daher als Ereignissprudeln bezeichnet.
Aber manchmal kommt es vor, dass das gleiche Blasenereignis zweimal auftritt. Es gibt zwei Hauptgründe: Veranstaltungsregistrierung und Veranstaltungsabwicklung.
Zunächst müssen wir klarstellen, dass sich die Event-Registrierung auf die Bindung eines Events an ein Element bezieht. In der allgemeinen Webentwicklung verwenden wir normalerweise die Methode addEventListener(), um Ereignis-Listener zu Elementen hinzuzufügen. Wenn wir diese Methode verwenden, um Ereignis-Listener zu Elementen hinzuzufügen, kommt es manchmal zu Duplikaten. Zum Beispiel:
var element = document.getElementById('myElement');
element.addEventListener('click', function() {
console.log('事件冒泡');
});Im obigen Code haben wir einen Klickereignis-Listener zu einem Element namens „myElement“ hinzugefügt. Wenn wir jedoch die Methode addEventListener() im Code mehrmals aufrufen und denselben Ereignis-Listenertyp demselben Element hinzufügen, wird bei jedem Aufruf ein neuer Listener hinzugefügt, wodurch dasselbe Ereignis mehrmals auftritt.
Zweitens bezieht sich die Ereignisbehandlung auf den Code, der ausgeführt wird, nachdem das Ereignis ausgelöst wurde. Wenn während der Ereignisübermittlung ein Ereignis von einem untergeordneten Element an ein übergeordnetes Element übergeben wird, wird der entsprechende Ereignishandler für das übergeordnete Element ausgelöst. Manchmal lösen wir jedoch versehentlich denselben Ereignistyp für ein untergeordnetes Element erneut im Ereignishandler des übergeordneten Elements aus, wodurch dasselbe Ereignis zweimal auftritt.
Das folgende Codebeispiel veranschaulicht die beiden oben genannten Situationen:
<!DOCTYPE html>
<html>
<head>
<title>事件冒泡</title>
</head>
<body>
<div id="parentElement">
<div id="childElement">点击我</div>
</div>
<script>
var parentElement = document.getElementById('parentElement');
var childElement = document.getElementById('childElement');
parentElement.addEventListener('click', function() {
console.log('父元素的事件处理程序');
childElement.click(); // 在父元素的事件处理程序中再次触发子元素的click事件
});
childElement.addEventListener('click', function() {
console.log('子元素的事件处理程序');
});
</script>
</body>
</html>Im obigen Code haben wir Klickereignis-Listener zum übergeordneten Element bzw. zum untergeordneten Element hinzugefügt „Ereignishandler des untergeordneten Elements“ und löst das Klickereignis des untergeordneten Elements aus, wodurch das Klickereignis des untergeordneten Elements erneut ausgelöst wird und „der Ereignishandler des untergeordneten Elements“ ausgegeben wird. Auf diese Weise kommt es zweimal zu demselben Ereignis.
Um zu vermeiden, dass Ereignisblasen zweimal auftreten, können wir im Ereignishandler des übergeordneten Elements eine Beurteilungsbedingung hinzufügen und das entsprechende Ereignis des untergeordneten Elements nur dann auslösen, wenn die Bedingung erfüllt ist, um so wiederholte Blasenbildung zu vermeiden.
Zusammenfassend lässt sich sagen, dass der Grund dafür, dass dieselbe Veranstaltung zweimal sprudelt, hauptsächlich in wiederholten Vorgängen bei der Veranstaltungsregistrierung und der Veranstaltungsabwicklung liegt. Wir können wiederholtes Sprudeln vermeiden, indem wir die Ereignisregistrierung optimieren und bedingte Beurteilungen hinzufügen.
Das obige ist der detaillierte Inhalt vonWarum löst dasselbe Ereignis zweimal Blasen aus?. 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
1359
52
So richten Sie Jump on Laui-Anmeldeseite ein
Apr 04, 2024 am 03:12 AM
Schritte zur Sprungeinstellung der Layui-Anmeldeseite: Sprungcode hinzufügen: Fügen Sie im Anmeldeformular ein Beurteilungsereignis hinzu, klicken Sie auf die Schaltfläche „Senden“ und springen Sie nach erfolgreicher Anmeldung über window.location.href zur angegebenen Seite. Ändern Sie die Formularkonfiguration: Fügen Sie dem Formularelement von „lay-filter="login" ein verstecktes Eingabefeld mit dem Namen „redirect“ und dem Wert der Zielseitenadresse hinzu.
Entwickeln Sie leistungsstarke Desktop-Anwendungen mit Golang
Mar 19, 2024 pm 05:45 PM
Verwenden Sie Golang, um leistungsstarke Desktop-Anwendungen zu entwickeln. Mit der kontinuierlichen Entwicklung des Internets sind Menschen untrennbar mit verschiedenen Arten von Desktop-Anwendungen verbunden. Für Entwickler ist es von entscheidender Bedeutung, effiziente Programmiersprachen zu verwenden, um leistungsstarke Desktop-Anwendungen zu entwickeln. In diesem Artikel wird die Verwendung von Golang (Go-Sprache) zur Entwicklung leistungsstarker Desktop-Anwendungen vorgestellt und einige spezifische Codebeispiele bereitgestellt. Golang ist eine von Google entwickelte Open-Source-Programmiersprache. Sie zeichnet sich durch Einfachheit, Effizienz, starke Parallelität usw. aus und eignet sich sehr gut für
So fügen Sie in Vue Berührungsereignisse zu Bildern hinzu
May 02, 2024 pm 10:21 PM
Wie füge ich in Vue ein Klickereignis zum Bild hinzu? Importieren Sie die Vue-Instanz. Erstellen Sie eine Vue-Instanz. Fügen Sie Bilder zu HTML-Vorlagen hinzu. Fügen Sie Klickereignisse mit der v-on:click-Direktive hinzu. Definieren Sie die handleClick-Methode in der Vue-Instanz.
Hongmeng HarmonyOS- und Go-Sprachentwicklung
Apr 08, 2024 pm 04:48 PM
Einführung in die Sprachentwicklung von HarmonyOS und Go. HarmonyOS ist ein von Huawei entwickeltes verteiltes Betriebssystem, und Go ist eine moderne Programmiersprache. Die Kombination der beiden bietet eine leistungsstarke Lösung für die Entwicklung verteilter Anwendungen. In diesem Artikel wird die Verwendung der Go-Sprache für die Entwicklung in HarmonyOS vorgestellt und das Verständnis anhand praktischer Fälle vertieft. Installation und Einrichtung Um die Go-Sprache zum Entwickeln von HarmonyOS-Anwendungen zu verwenden, müssen Sie zuerst GoSDK und HarmonyOSSDK installieren. Die spezifischen Schritte sind wie folgt: #Installieren Sie GoSDKgogetgithub.com/golang/go#Set PATH
PHP-Tipps: Implementieren Sie schnell die Funktion „Zurück zur vorherigen Seite'.
Mar 09, 2024 am 08:21 AM
PHP-Tipps: Implementieren Sie schnell die Funktion zum Zurückkehren zur vorherigen Seite. Bei der Webentwicklung müssen wir häufig die Funktion zum Zurückkehren zur vorherigen Seite implementieren. Solche Vorgänge können das Benutzererlebnis verbessern und Benutzern die Navigation zwischen Webseiten erleichtern. In PHP können wir diese Funktion durch einfachen Code erreichen. In diesem Artikel wird erläutert, wie Sie die Funktion zum Zurückkehren zur vorherigen Seite schnell implementieren können, und es werden spezifische PHP-Codebeispiele bereitgestellt. In PHP können wir $_SERVER['HTTP_REFERER'] verwenden, um die URL der vorherigen Seite abzurufen
Was ist der ereignisgesteuerte Mechanismus von C++-Funktionen in der gleichzeitigen Programmierung?
Apr 26, 2024 pm 02:15 PM
Der ereignisgesteuerte Mechanismus in der gleichzeitigen Programmierung reagiert auf externe Ereignisse, indem er beim Eintreten von Ereignissen Rückruffunktionen ausführt. In C++ kann der ereignisgesteuerte Mechanismus mit Funktionszeigern implementiert werden: Funktionszeiger können Callback-Funktionen registrieren, die beim Eintreten von Ereignissen ausgeführt werden sollen. Lambda-Ausdrücke können auch Ereignisrückrufe implementieren und so die Erstellung anonymer Funktionsobjekte ermöglichen. Im konkreten Fall werden Funktionszeiger verwendet, um Klickereignisse für GUI-Schaltflächen zu implementieren, die Rückruffunktion aufzurufen und Meldungen zu drucken, wenn das Ereignis auftritt.
Detaillierte Erläuterung des Abrufens von Webseitenelementen durch JavaScript
Apr 09, 2024 pm 12:45 PM
Antwort: JavaScript bietet eine Vielzahl von Methoden zum Abrufen von Webseitenelementen, einschließlich der Verwendung von IDs, Tag-Namen, Klassennamen und CSS-Selektoren. Detaillierte Beschreibung: getElementById(id): Elemente basierend auf einer eindeutigen ID abrufen. getElementsByTagName(tag): Ruft die Elementgruppe mit dem angegebenen Tag-Namen ab. getElementsByClassName(class): Ruft die Elementgruppe mit dem angegebenen Klassennamen ab. querySelector(selector): Verwenden Sie den CSS-Selektor, um das erste passende Element abzurufen. querySelectorAll(selector): Alle Übereinstimmungen mithilfe des CSS-Selektors abrufen
Erobern Sie die GUI-Welt mit Python Tkinter: Die vollständige Anleitung
Mar 24, 2024 am 09:26 AM
Tkinter ist ein leistungsstarkes GUI-Toolkit in der Python-Standardbibliothek zum Erstellen plattformübergreifender grafischer Benutzeroberflächen (GUIs). Es basiert auf dem Tcl/Tk-Toolkit und bietet eine einfache und intuitive Syntax, sodass Python-Entwickler komplexe Benutzeroberflächen einfach und schnell erstellen können. Vorteile der plattformübergreifenden Kompatibilität von Tkinter: Tkinter-Anwendungen laufen auf allen gängigen Betriebssystemen wie Windows, Mac und Linux. Einfach zu verwenden: Die Syntax ist klar und leicht zu erlernen, sodass sie sowohl für Anfänger als auch für erfahrene Entwickler leicht zu beherrschen ist. Erweiterbarkeit: Tkinter bietet eine Vielzahl von Widgets und Steuerelementen, die es Entwicklern ermöglichen, eine Vielzahl von Benutzeroberflächen zu erstellen. Integration: Es hängt mit P zusammen
