Einschränkungen von Sprudelereignissen: Unter welchen Umständen kann Sprudeln nicht erreicht werden?
In der Front-End-Entwicklung verwenden wir häufig Event-Bubbling, um Ereignisse von DOM-Elementen zu verarbeiten. Allerdings ist Sprudeln manchmal kein Allheilmittel, und es gibt Fälle, in denen Sprudeln unsere Bedürfnisse nicht erfüllen kann. In diesem Artikel werden einige Situationen erläutert, in denen Sprudeln nicht möglich ist, und spezifische Codebeispiele bereitgestellt.
1. Blasenbildung verhindern
Normalerweise verwenden wir die Methode Event.stopPropagation(), um die Blasenbildung des Ereignisses zu verhindern. Allerdings führt die Verhinderung der Blasenbildung manchmal nicht zum gewünschten Effekt. Event.stopPropagation()方法来阻止事件的冒泡。然而，有些时候阻止冒泡并不能达到我们想要的效果。
例如，假设我们有一个父元素和一个子元素，当点击子元素时，我们希望子元素的事件处理函数执行完后再执行父元素的事件处理函数。我们可能会尝试在子元素的事件处理函数中使用event.stopPropagation()
Angenommen, wir haben ein übergeordnetes Element und ein untergeordnetes Element. Wenn auf das untergeordnete Element geklickt wird, soll die Ereignishandlerfunktion des untergeordneten Elements ausgeführt werden, bevor die Ereignishandlerfunktion des übergeordneten Elements ausgeführt wird. Wir können versuchen,
event.stopPropagation() im Event-Handler des untergeordneten Elements zu verwenden, um Blasenbildung zu verhindern:
<div id="parent">
<div id="child"></div>
</div>
<script>
document.getElementById('child').addEventListener('click', function(event) {
event.stopPropagation();
console.log('子元素点击事件');
});
document.getElementById('parent').addEventListener('click', function() {
console.log('父元素点击事件');
});
</script>Nach dem Login kopieren
Der obige Code kann jedoch unsere Anforderungen nicht erfüllen. Durch Klicken auf das untergeordnete Element wird nur „Ausführen“ ausgeführt Die Click-Event-Handler-Funktion des untergeordneten Elements wird ausgeführt, die Click-Event-Handler-Funktion des übergeordneten Elements wird jedoch nicht ausgeführt. Dies liegt daran, dass durch das Verhindern der Blasenbildung nur verhindert wird, dass das Ereignis an das übergeordnete Element übergeben wird, es jedoch nicht dazu führt, dass der Ereignishandler des übergeordneten Elements ausgeführt wird, nachdem der Ereignishandler des untergeordneten Elements ausgeführt wurde.
2. Ereignisdelegation
Die Ereignisdelegation verwendet das Prinzip der Ereignissprudelung, um das Ereignis an das übergeordnete Element zu binden und die entsprechende Verarbeitungsfunktion durch Beurteilung der Ereignisquelle auszulösen. Allerdings gibt es manchmal Einschränkungen bei der Verwendung der Ereignisdelegierung.
Angenommen, wir haben ein ul-Element, das mehrere li-Elemente enthält. Wir hoffen, dass der Textinhalt des Elements ausgegeben wird, wenn auf ein beliebiges li-Element geklickt wird. Wir können versuchen, die Ereignisdelegation zu verwenden, um Folgendes zu erreichen:
<ul id="list">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<script>
document.getElementById('list').addEventListener('click', function(event) {
if (event.target.tagName.toLowerCase() === 'li') {
console.log(event.target.textContent);
}
});
</script>Nach dem Login kopieren
Der obige Code kann unsere Anforderungen erfüllen. Nach dem Klicken auf ein beliebiges li-Element wird der Textinhalt des Elements ausgegeben. Wenn wir jedoch ein a-Tag zum li-Element hinzufügen und das Bubbling verhindert wird, wenn auf das a-Tag geklickt wird, funktioniert die Ereignisdelegierung nicht ordnungsgemäß:
<ul id="list">
<li>1 <a href="#" onclick="event.stopPropagation();">阻止冒泡</a></li>
<li>2</li>
<li>3</li>
</ul>
<script>
document.getElementById('list').addEventListener('click', function(event) {
if (event.target.tagName.toLowerCase() === 'li') {
console.log(event.target.textContent);
}
});
</script>Nach dem Login kopieren
Wenn im obigen Code auf den Link „Bubbling verhindern“ geklickt wird, Die Ereignisdelegierung schlägt fehl und es wird nichts ausgegeben. Dies liegt daran, dass durch die Verhinderung der Blasenbildung verhindert wird, dass Ereignisse zum ul-Element gelangen, sodass der Ereignisdelegierte die entsprechende Ereignisquelle nicht erkennen kann.
3. Asynchrone Ereignisverarbeitung
In einigen Fällen müssen wir Ereignisse möglicherweise asynchron verarbeiten, z. B. um Netzwerkanfragen zu stellen oder andere zeitaufwändige Vorgänge durchzuführen. Der Bubbling-Mechanismus kann jedoch die Anforderungen der asynchronen Ereignisverarbeitung nicht direkt erfüllen.
Angenommen, wir haben ein Schaltflächenelement. Wenn auf die Schaltfläche geklickt wird, müssen wir eine asynchrone Anfrage senden, um die Daten abzurufen, und dann die Seite basierend auf den Daten aktualisieren. Wir versuchen möglicherweise, asynchrone Vorgänge im Click-Event-Handler der Schaltfläche auszuführen:
<button id="btn">点击</button>
<script>
document.getElementById('btn').addEventListener('click', function() {
setTimeout(function() {
console.log('异步操作完成');
}, 1000);
});
</script>Nach dem Login kopieren
Der obige Code gibt eine Sekunde nach dem Klicken auf die Schaltfläche „Asynchroner Vorgang abgeschlossen“ aus. Wenn wir jedoch einen Click-Event-Handler für das übergeordnete Element der Schaltfläche haben und den Event-Handler nach Abschluss des asynchronen Vorgangs ausführen möchten, kann der Bubbling-Mechanismus diese Anforderung nicht erfüllen.
Zusammenfassend lässt sich sagen, dass Bubbling zwar ein sehr verbreiteter und leistungsstarker Mechanismus in der Front-End-Entwicklung ist, in einigen Fällen jedoch auch einige Einschränkungen aufweist. In diesen Fällen müssen wir andere Lösungen finden, um unseren Bedürfnissen gerecht zu werden. 🎜
Das obige ist der detaillierte Inhalt vonEinschränkungen von Bubbling-Events: Wann kann Bubbling nicht implementiert werden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
