Heim > Artikel > Web-Frontend > Der Unterschied und die Anwendung von Event-Bubbling und Event-Capturing
Der Unterschied und die Anwendung von Event-Bubbling und Event-Capturing
- WBOYOriginal
- 2024-01-13 08:07:151193Durchsuche
Der Unterschied und die Anwendung von Event-Bubbling und Event-Capturing
Event-Bubbling und Event-Capturing sind zwei Mechanismen für die Ereignisübermittlung im HTML-DOM. Bei der Entwicklung von Webanwendungen kann uns das Verständnis ihrer Unterschiede und Anwendungen dabei helfen, das Verhalten von Ereignissen besser zu verstehen und den geeigneten Bereitstellungsmechanismus basierend auf den tatsächlichen Anforderungen auszuwählen.
- Event Bubbling
Event Bubbling bedeutet, dass, wenn ein Ereignis für ein Element ausgelöst wird, es sich Schicht für Schicht auf seine übergeordneten Elemente ausbreitet, bis es den Wurzelknoten des DOM-Baums erreicht. Mit anderen Worten: Das Ereignis wird vom ausgelösten Element zum übergeordneten Element übertragen.
Wenn beispielsweise auf die Schaltfläche im folgenden HTML-Code geklickt wird, wird das Klickereignis nacheinander zu seinen übergeordneten Elementen div und body übertragen:
<body>
<div>
<button>Click Me</button>
</div>
</body>Verwenden Sie in JavaScript die Methode addEventListener, um einen Ereignis-Listener zu registrieren und zu erfassen das Ereignis. Verwenden Sie den dritten Parameter, um anzugeben, ob der Event-Bubbling- oder Event-Capture-Übermittlungsmechanismus verwendet werden soll. Wenn der dritte Parameter nicht angegeben oder auf „false“ gesetzt ist, wird der Ereignis-Bubbling-Übermittlungsmechanismus verwendet.
Das Folgende ist ein Codebeispiel, das den Event-Bubbling-Übermittlungsmechanismus verwendet:
document.querySelector('button').addEventListener('click', function() {
console.log('Button clicked');
});
document.querySelector('div').addEventListener('click', function() {
console.log('Div clicked');
});
document.querySelector('body').addEventListener('click', function() {
console.log('Body clicked');
});Wenn wir auf die Schaltfläche klicken, werden nacheinander „Schaltfläche angeklickt“, „Div angeklickt“ und „Körper angeklickt“ ausgedruckt.
- Ereigniserfassung
Ereigniserfassung bedeutet, dass sich ein Ereignis, das auf einem Element ausgelöst wird, vom Wurzelknoten des DOM-Baums nach unten ausbreitet, bis es zu dem Element gelangt, bei dem das Ereignis ausgelöst wurde. Mit anderen Worten: Das Ereignis wird vom Wurzelknoten des DOM-Baums bis zu dem Element erfasst, das das Ereignis ausgelöst hat.
Wenn Sie den Mechanismus zur Bereitstellung der Ereigniserfassung verwenden möchten, können Sie den dritten Parameter der Methode addEventListener auf true setzen. Zum Beispiel:
document.querySelector('button').addEventListener('click', function() {
console.log('Button clicked');
}, true);
document.querySelector('div').addEventListener('click', function() {
console.log('Div clicked');
}, true);
document.querySelector('body').addEventListener('click', function() {
console.log('Body clicked');
}, true);Wenn wir auf die Schaltfläche klicken, werden nacheinander „Körper angeklickt“, „Div angeklickt“ und „Schaltfläche angeklickt“ ausgedruckt. Wie Sie sehen können, wird das Ereignis ausgehend vom Wurzelknoten des DOM-Baums erfasst und dann an die Elemente weitergegeben, bei denen das Ereignis wiederum ausgelöst wird.
3. Praktische Anwendung
Das Verständnis des Unterschieds zwischen Event-Bubbling und Event-Capturing kann uns bei der Entscheidung helfen, wie wir mit Event-Delivery-Problemen in der tatsächlichen Entwicklung umgehen und so flexiblere interaktive Funktionen erreichen können.
Wenn wir beispielsweise mehrere verschachtelte Elemente auf einer komplexen Seite haben und das Klickereignis dieses Elements nur dann auslösen möchten, wenn auf eines der Elemente geklickt wird, können wir uns für die Ereigniserfassung entscheiden, um damit umzugehen.
Wenn wir andererseits das Klickereignis des übergeordneten Elements auslösen möchten, wenn wir auf ein Element klicken, können wir den Ereignis-Bubbling-Übermittlungsmechanismus verwenden.
Gleichzeitig können wir auch die Methode stopPropagation() des Ereignisobjekts verwenden, um die weitere Zustellung des Ereignisses zu stoppen. Wenn wir beispielsweise die Methode stopPropagation() aufrufen, wenn auf eine Schaltfläche geklickt wird, können wir verhindern, dass das Ereignis weiterhin nach oben oder unten weitergegeben wird.
Zusammenfassung:
Ereignis-Bubbling und Ereigniserfassung sind zwei Mechanismen für die Ereignisübermittlung im HTML-DOM. Das Verständnis ihrer Unterschiede und Anwendungen kann uns helfen, Probleme bei der Ereignisbereitstellung besser zu bewältigen und flexiblere interaktive Funktionen zu erreichen. Wählen Sie den geeigneten Bereitstellungsmechanismus entsprechend den tatsächlichen Anforderungen aus und kombinieren Sie die Methoden von Ereignisobjekten, um die Bereitstellung von Ereignissen zu steuern.
Das obige ist der detaillierte Inhalt vonDer Unterschied und die Anwendung von Event-Bubbling und Event-Capturing. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!