Keine Unterstützung für Bubbling-Ereignisse: Einschränkungen und Umfang

Bubbling Event bezieht sich auf eine Ereigniszustellungsmethode, die Schritt für Schritt von untergeordneten Elementen zu übergeordneten Elementen im DOM-Baum ausgelöst wird. In den meisten Fällen sind Bubbling-Ereignisse sehr flexibel und skalierbar, es gibt jedoch einige Sonderfälle, in denen Ereignisse das Bubbling nicht unterstützen.

1. Welche Ereignisse unterstützen das Sprudeln nicht?
Obwohl die meisten Veranstaltungen das Sprudeln unterstützen, gibt es einige Veranstaltungen, die das Sprudeln nicht unterstützen. Im Folgenden sind einige häufige Ereignisse aufgeführt, die Sprudeln nicht unterstützen:

1. Fokus- und Unschärfeereignisse
2. Lade- und Entladeereignisse
3. Eingabe-, Auswahl- und Änderungsereignisse
4. Übertragungs- und Zurücksetzungsereignisse
5. Bildlaufereignisse
6. Mouseenter- und Mouseleave-Ereignisse
7. Kontextmenü-Ereignis

2. Ereignisbeispiele
Um die Einschränkungen von Bubbling-Ereignissen besser zu verstehen, werden unten für jedes Ereignis, das Bubbling nicht unterstützt, zum besseren Verständnis spezifische Codebeispiele aufgeführt:

1. Focus- und Blur-Ereignisse
   Focus und Unschärfeereignisse sind Ereignisse, mit denen Elemente behandelt werden, die den Fokus gewinnen oder verlieren. Diese Ereignisse unterstützen das Bubbling nicht. Das heißt, wenn Sie ein Fokus- oder Unschärfeereignis für ein untergeordnetes Element auslösen, wird das entsprechende Ereignis für das übergeordnete Element nicht ausgelöst.

HTML-Code:

<div>
  <input type="text" id="myInput">
</div>

JavaScript-Code:

const myInput = document.getElementById('myInput');
myInput.addEventListener('focus', function() {
  console.log('Input获得焦点');
});
const myDiv = document.querySelector('div');
myDiv.addEventListener('focus', function() {
  console.log('Div获得焦点');
});

Ergebnis:
Wenn das Textfeld den Fokus erhält, wird in der Konsole nur „Eingabe erhält Fokus“ ausgegeben, aber „Div erhält Fokus“ wird nicht ausgegeben. Weil das Fokusereignis nicht zum übergeordneten Element div übergeht.

2. Lade- und Entladeereignisse
   Die Lade- und Entladeereignisse sind Ereignisse, die ausgelöst werden, nachdem die Seite oder Ressource geladen wurde. Diese Ereignisse unterstützen kein Bubbling. Das heißt, wenn ein Lade- oder Entladeereignis für ein untergeordnetes Element ausgelöst wird, wird das entsprechende Ereignis für das übergeordnete Element nicht ausgelöst.

HTML-Code:

<div>
  <img  src="/static/imghw/default1.png"  data-src="image.png"  class="lazy" id="myImage" alt="Keine Unterstützung für Bubbling-Ereignisse: Einschränkungen und Umfang" >
</div>

JavaScript-Code:

const myImage = document.getElementById('myImage');
myImage.addEventListener('load', function() {
  console.log('图片加载完成');
});
const myDiv = document.querySelector('div');
myDiv.addEventListener('load', function() {
  console.log('Div加载完成');
});

Ergebnis:
Wenn das Laden des Bildes abgeschlossen ist, wird in der Konsole nur „Laden des Bildes abgeschlossen“ ausgegeben und „Laden der Divs abgeschlossen“ wird nicht ausgegeben. Weil das Ladeereignis nicht zum übergeordneten Element div übergeht.

3. Eingabe-, Auswahl- und Änderungsereignisse
   Eingabe-, Auswahl- und Änderungsereignisse sind Ereignisse, mit denen Änderungen im Wert von Formularelementen verarbeitet werden. Diese Ereignisse wirken sich nur auf das Element aus, dessen Wert sich tatsächlich geändert hat, und werden nicht auf das übergeordnete Element übertragen.

HTML-Code:

<input type="text" id="myInput">

JavaScript-Code:

const myInput = document.getElementById('myInput');
myInput.addEventListener('input', function() {
  console.log('输入框值改变');
});
const myForm = document.querySelector('form');
myForm.addEventListener('input', function() {
  console.log('表单值改变');
});

Ergebnis:
Wenn sich der Wert des Eingabefelds ändert, wird auf der Konsole nur „Wert des Eingabefelds geändert“ ausgegeben, nicht jedoch „Formwert geändert“. Ausgabe. Weil das Eingabeereignis nicht in die übergeordnete Elementform übergeht.

4. Submit- und Reset-Ereignisse
   Submit- und Reset-Ereignisse sind Ereignisse, die ausgelöst werden, wenn ein Formular gesendet und zurückgesetzt wird. Diese Ereignisse können nur auf das Formularelement selbst angewendet werden und werden nicht auf übergeordnete Elemente übertragen.

HTML-Code:

<form id="myForm">
  <input type="submit" value="提交">
</form>

JavaScript-Code:

const myForm = document.getElementById('myForm');
myForm.addEventListener('submit', function(event) {
  event.preventDefault();
  console.log('表单已提交');
});
const myDiv = document.querySelector('div');
myDiv.addEventListener('submit', function() {
  console.log('Div提交');
});

Ergebnis:
Wenn auf die Schaltfläche „Senden“ geklickt wird, wird in der Konsole nur „Form Submitted“ ausgegeben, „Div Submitted“ jedoch nicht. Weil das Submit-Ereignis nicht zum übergeordneten Element div übergeht. Beachten Sie, dass wir im Beispiel das standardmäßige Übermittlungsverhalten des Formulars durch die Methode event.preventDefault() verhindern.

5. Scroll-Ereignis
   Scroll-Ereignis ist ein Ereignis, das beim Scrollen ausgelöst wird. Dieses Ereignis unterstützt kein Bubbling, was bedeutet, dass beim Scrollen eines Elements das Scroll-Ereignis für das übergeordnete Element nicht ausgelöst wird.

HTML-Code:

<div style="height: 100px; width: 100px; overflow: auto;">
  <p>这是一段很长的文本</p>
</div>

JavaScript-Code:

const myDiv = document.querySelector('div');
myDiv.addEventListener('scroll', function() {
  console.log('滚动');
});

Ergebnis:
Wenn das Div gescrollt wird, wird „scroll“ nur in der Konsole ausgegeben und nicht zum oberen Element gesprudelt.

6. Mouseenter- und Mouseleave-Ereignisse
   Mouseenter- und Mouseleave-Ereignisse sind Ereignisse, die ausgelöst werden, wenn die Maus ein Element betritt und verlässt. Diese Ereignisse unterstützen kein Bubbling, was bedeutet, dass das entsprechende Ereignis im übergeordneten Element nicht ausgelöst wird, wenn die Maus ein Element betritt oder verlässt.

HTML-Code:

<div id="myDiv" style="background-color: yellow; width: 100px; height: 100px;">
  <p>鼠标进入这个div</p>
</div>

JavaScript-Code:

const myDiv = document.getElementById('myDiv');
myDiv.addEventListener('mouseenter', function() {
  console.log('鼠标进入div');
});
const myBody = document.querySelector('body');
myBody.addEventListener('mouseenter', function() {
  console.log('鼠标进入body');
});

Ergebnis:
Wenn die Maus das Div betritt, wird in der Konsole nur „Maus betritt Div“ ausgegeben, aber „Maus betritt Körper“ wird nicht ausgegeben.

7. Kontextmenü-Ereignis
   Kontextmenü-Ereignis ist ein Ereignis, das ausgelöst wird, wenn mit der rechten Maustaste geklickt wird. Dieses Ereignis unterstützt kein Bubbling. Wenn Sie also mit der rechten Maustaste auf ein Element klicken, wird das Kontextmenüereignis für das übergeordnete Element nicht ausgelöst.

HTML-Code:

<div id="myDiv" style="background-color: yellow; width: 100px; height: 100px;"></div>

JavaScript-Code:

const myDiv = document.getElementById('myDiv');
myDiv.addEventListener('contextmenu', function(event) {
  event.preventDefault();
  console.log('右键点击');
});
const myBody = document.querySelector('body');
myBody.addEventListener('contextmenu', function() {
  console.log('右键点击body');
});

Ergebnis:
Wenn Sie mit der rechten Maustaste auf das Div klicken, wird in der Konsole nur „Rechtsklick“ ausgegeben, aber „Rechtsklick auf den Körper“. nicht ausgegeben werden. Beachten Sie, dass wir im Beispiel verhindern, dass das Standardkontextmenü über die Methode event.preventDefault() angezeigt wird.

3. Zusammenfassung
Bubble-Ereignisse sind eine Methode zur Ereignisübermittlung, die schrittweise Ereignisse von untergeordneten Elementen zu übergeordneten Elementen im DOM-Baum auslöst, aber es gibt auch einige spezielle Ereignisse, die das Bubbling nicht unterstützen. Dieser Artikel analysiert Ereignisse, die das Bubbling nicht unterstützen, anhand spezifischer Codebeispiele und hofft, den Lesern dabei zu helfen, die Einschränkungen von Bubbling-Ereignissen zu verstehen.

Das obige ist der detaillierte Inhalt vonKeine Unterstützung für Bubbling-Ereignisse: Einschränkungen und Umfang. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!