Heim Web-Frontend js-Tutorial Detaillierte Erläuterung des DOM-Ereignisflusses_Grundkenntnisse

Detaillierte Erläuterung des DOM-Ereignisflusses_Grundkenntnisse

May 16, 2016 pm 04:18 PM
dom

1. Sprudelnde Ereignisse

Browser-Ereignismodelle werden in zwei Typen unterteilt: Erfassungsereignisse und Bubbling-Ereignisse. Da der IE das Erfassen von Ereignissen nicht unterstützt, werden im Folgenden hauptsächlich Blasenereignisse als Erklärung verwendet.
(Bubbling genannt) Bubbling bedeutet, dass Ereignisse nacheinander vom spezifischsten Ereignis bis zum am wenigsten spezifischen Ereignis ausgelöst werden.

Code kopieren Der Code lautet wie folgt:


           

                ')"> click me


                                                                                     



Die oben genannten drei Funktionen fügen alle die Onclick-Funktion hinzu. Alle drei Funktionen werden zuerst ausgeführt, nachdem das einzelne p-Element ausgeführt wurde, dann das div und schließlich der body

Hier ist übrigens eine Erinnerung an das Erfassen von Ereignissen, deren Reihenfolge genau das Gegenteil von sprudelnden Ereignissen ist.

2. Ereignisüberwachung

Ein Ereignis erfordert eine Funktion, die normalerweise als Ereignishandler bezeichnet wird. Aus einer anderen Perspektive überwachen diese Funktionen, ob ein Ereignis in Echtzeit auftritt. Sie werden normalerweise als Ereignisüberwachungsfunktionen bezeichnet. Die Event-Listening-Funktion variiert stark zwischen verschiedenen Browsern.

i. Universelle Abhörmethoden, wie die Verwendung der Onclick-Methode, fast jeder Tag unterstützt diese Methode. Und die Browserkompatibilität ist sehr hoch

Berücksichtigung des Verhaltens, Trennung von Ereignissen.

Im Allgemeinen werden die folgenden Methoden zur Überwachung verwendet

click





Die beiden oben vorgestellten Methoden sind sehr praktisch und werden von Everbright-Entwicklern bei der Erstellung und Verarbeitung einiger kleiner Funktionen geliebt. Aber für die gleiche Veranstaltung. Sie können nur eine Funktion hinzufügen, z. B. die Onclick-Funktion der p-Markierung. Daher verfügt der IE über eine eigene Lösung.

ii.Listening-Methode im IE

In frühen IE-Browsern verfügt jedes Element über zwei Methoden zur Zeitüberwachung.

Sie sind attachmentEvent() bzw. detachEnevt().
Wie aus den Funktionsnamen hervorgeht, handelt es sich bei attachmentEnevt() um eine Funktion zum Hinzufügen einer Ereignisverarbeitung zu einem Element, während detachEvent() zum Löschen der Überwachungsfunktion für das Element verwendet wird. Ihre Syntax lautet wie folgt:

[object].attachEvent("enevt_handler","fnHandler");

[object].detachEvent("enevt_handler","fnHandler");

Unter diesen repräsentiert enevt_handler häufig verwendete Onclick, Onload, Onmouseover usw.
fnHandler ist der Name der Abhörfunktion.
Im Ereignis im vorherigen Abschnitt können Sie die Methode attachmentEvent() verwenden, anstatt eine Listening-Funktion hinzuzufügen. Wenn Sie einmal klicken, können Sie detachEvent() verwenden, um die Listening-Funktion zu löschen, sodass sie nach dem nächsten Klick nicht ausgeführt wird .

Code kopieren Der Code lautet wie folgt:






                                                                                                                                                                                                               



3. Standard-DOM-Ereignisüberwachung

Im Vergleich zu den beiden Methoden von dh verwendet das Standard-DOM auch zwei Methoden zum Hinzufügen bzw. Löschen von Abhörfunktionen. Das sind addEventListener() und removeEventListener()

Im Gegensatz zu IE akzeptieren diese beiden Funktionen 3 Parameter, nämlich den Namen des Ereignisses, den zuzuweisenden Funktionsnamen und ob es in der Bubbling-Phase oder der Capture-Phase verwendet wird. Die Parameter in der Erfassungsphase sind wahr und die Parameter in der Blasenphase sind falsch. Die Syntax lautet wie folgt:

Code kopieren

Der Code lautet wie folgt: [object].addEventListener("event_name",fnHandler,bCapture); [object].removeEventListener("event_name",fnHandler,bCapture);

Die Verwendung dieser beiden Funktionen ähnelt grundsätzlich der in Ie, aber bitte beachten Sie, dass die Namen von event_name „click“, „mouseover“ usw. lauten, statt „onclick“, „onmouseover“ in Ie.

Außerdem ist der dritte Parameter bCapture normalerweise auf „false“ eingestellt, d. h. die Bubbling-Stufe.
Standardmethode zum Abhören von DOM-Ereignissen:

Code kopieren

Der Code lautet wie folgt:

Heiße KI -Werkzeuge

Undresser.AI Undress

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

AI Clothes Remover

Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool

Undress AI Tool

Ausziehbilder kostenlos

Clothoff.io

Clothoff.io

KI-Kleiderentferner

AI Hentai Generator

AI Hentai Generator

Erstellen Sie kostenlos Ai Hentai.

Heißer Artikel

R.E.P.O. Energiekristalle erklärten und was sie tun (gelber Kristall)
2 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Beste grafische Einstellungen
2 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. So reparieren Sie Audio, wenn Sie niemanden hören können
2 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌

Heiße Werkzeuge

Notepad++7.3.1

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6

Dreamweaver CS6

Visuelle Webentwicklungstools

SublimeText3 Mac-Version

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Welche Möglichkeiten gibt es, DOM-Knoten in Vue3 zu erhalten? Welche Möglichkeiten gibt es, DOM-Knoten in Vue3 zu erhalten? May 11, 2023 pm 04:55 PM

1. Native js ruft den DOM-Knoten ab: document.querySelector (Selektor) document.getElementById (ID-Selektor) document.getElementsByClassName (Klassenselektor).... 2. Holen Sie sich das Instanzobjekt der aktuellen Komponente in vue2: weil jeder vue Jeder Die Komponenteninstanz enthält ein $refs-Objekt, das Verweise auf die entsprechenden DOM-Elemente oder Komponenten speichert. Daher verweisen die $refs der Komponente standardmäßig auf ein leeres Objekt. Sie können der Komponente zunächst ref="name" hinzufügen und dann this.$refs übergeben.

Anleitung zur DOM-Manipulation in PHP Anleitung zur DOM-Manipulation in PHP May 21, 2023 pm 04:01 PM

In der Webentwicklung ist DOM (DocumentObjectModel) ein sehr wichtiges Konzept. Es ermöglicht Entwicklern, das HTML- oder XML-Dokument einer Webseite einfach zu ändern und zu bedienen, z. B. Elemente hinzuzufügen, zu löschen, zu ändern usw. Die integrierte DOM-Operationsbibliothek in PHP bietet Entwicklern auch umfangreiche Funktionen. In diesem Artikel wird die DOM-Operationsanleitung in PHP vorgestellt, in der Hoffnung, allen zu helfen. Das Grundkonzept von DOM DOM ist eine plattformübergreifende, sprachunabhängige API, die dies kann

Was bedeutet vue dom? Was bedeutet vue dom? Dec 20, 2022 pm 08:41 PM

DOM ist ein Dokumentobjektmodell und eine Schnittstelle für die HTML-Programmierung. Elemente auf der Seite werden über DOM manipuliert. Das DOM ist eine speicherinterne Objektdarstellung eines HTML-Dokuments und bietet eine Möglichkeit, mithilfe von JavaScript mit Webseiten zu interagieren. Das DOM ist eine Hierarchie (oder ein Baum) von Knoten mit dem Dokumentknoten als Wurzel.

Was ist der Grund, warum die Ref-Bindung an DOM oder Komponente fehlschlägt, und wie lässt sich das Problem lösen? Was ist der Grund, warum die Ref-Bindung an DOM oder Komponente fehlschlägt, und wie lässt sich das Problem lösen? May 12, 2023 pm 01:28 PM

Beschreibung des Vue3ref-Bindungs-DOM- oder Komponentenfehlerursachenanalyse-Szenarios In Vue3 wird häufig Ref zum Binden von Komponenten oder DOM-Elementen verwendet. Oft wird Ref eindeutig zum Binden verwandter Komponenten verwendet, aber die Ref-Bindung schlägt häufig fehl. Beispiele für Ref-Bindungsfehlersituationen Die überwiegende Mehrheit der Fälle, in denen die Ref-Bindung fehlschlägt, ist darauf zurückzuführen, dass beim Binden des Refs an die Komponente die Komponente noch nicht gerendert wurde und die Bindung daher fehlschlägt. Oder die Komponente wird zu Beginn nicht gerendert und die Referenz ist nicht gebunden. Wenn die Komponente mit dem Rendern beginnt, wird auch die Bindung zwischen der Referenz und der Komponente abgeschlossen. Zu diesem Zeitpunkt treten Probleme auf beim Einsatz komponentenbezogener Methoden. Die an ref gebundene Komponente verwendet v-if, oder ihre übergeordnete Komponente verwendet v-if, um die Seite zu veranlassen

Was sind die Dom- und Bom-Objekte? Was sind die Dom- und Bom-Objekte? Nov 13, 2023 am 10:52 AM

Es gibt 5 DOM-Objekte, darunter „Dokument“, „Element“, „Knoten“, „Ereignis“ und „Fenster“. 2. „Fenster“, „Navigator“, „Standort“ und „Verlauf“ und „Bildschirm“ und weitere 5 Arten von Stücklistenobjekten.

Was ist der Unterschied zwischen bom und dom? Was ist der Unterschied zwischen bom und dom? Nov 13, 2023 pm 03:23 PM

BOM und DOM unterscheiden sich hinsichtlich Rolle und Funktion, Beziehung zu JavaScript, gegenseitiger Abhängigkeit, Kompatibilität verschiedener Browser und Sicherheitsaspekten. Detaillierte Einführung: 1. Rolle und Funktion Die Hauptfunktion von BOM besteht darin, das Browserfenster zu bedienen und zu steuern. Die Hauptfunktion von DOM besteht darin, das Webdokument in einen Objektbaum umzuwandeln Entwickler können die Elemente und Inhalte der Webseite über diesen Objektbaum abrufen und ändern. 2. Beziehung zu JavaScript usw.

Was sind die integrierten Objekte von DOM? Was sind die integrierten Objekte von DOM? Dec 19, 2023 pm 03:45 PM

dom内置对象有: 1、document;2、window;3、navigator;4、location;5、history;6、screen;7、document.documentElement;8、document.body;9、document.head;10、document .title;11、document.cookie。

Beispiele zur Erläuterung, wie js horizontale und vertikale Scroll-Animationen von Dom-Elementen implementiert Beispiele zur Erläuterung, wie js horizontale und vertikale Scroll-Animationen von Dom-Elementen implementiert Aug 07, 2022 am 09:36 AM

​In diesem Artikel erfahren Sie, wie Sie horizontale und vertikale Scroll-Animationen von DOM-Elementen in js implementieren. Ich hoffe, dass er Freunden in Not hilfreich sein wird!

See all articles