Heim  >  Artikel  >  Web-Frontend  >  Was ist ein Ereignis, das in JQuery sprudelt?

Was ist ein Ereignis, das in JQuery sprudelt?

青灯夜游
青灯夜游Original
2022-11-18 18:52:301847Durchsuche

Bubbling-Ereignisse bedeuten, dass der Browser nach dem Eintreten eines Ereignisses normalerweise den Ereignishandler für das Element auslöst, bei dem das Ereignis zuerst aufgetreten ist, dann für sein übergeordnetes Element, das übergeordnete Element des übergeordneten Elements ... und so weiter, bis das Stammelement des dokumentieren. Bubbling-Ereignisse sind die gebräuchlichste Art der Ereignisweitergabe. Wenn Sie nach der Verarbeitung eines Ereignisses die Weitergabe des Ereignisses stoppen und nicht möchten, dass es weiter sprudelt, müssen Sie die Ereignisverarbeitungsmethode binden.

Was ist ein Ereignis, das in JQuery sprudelt?

Die Betriebsumgebung dieses Tutorials: Windows7-System, JQuery3.6.1-Version, Dell G3-Computer.

Was ist Event-Bubbling?

Ein Bubbling-Ereignis bedeutet, dass, wenn ein bestimmter Ereignistyp für ein Objekt ausgelöst wird, das Ereignis an das übergeordnete Objekt weitergegeben wird und ähnliche, für das übergeordnete Objekt definierte Ereignisse auslöst. Die Ausbreitungsrichtung des Ereignisses verläuft von unten nach oben, ähnlich wie bei Wasserblasen, die vom Grund des Wassers aufsteigen.

Ein HTML-Dokument kann einen DOM-Baum visualisieren:

Was ist ein Ereignis, das in JQuery sprudelt?

Dann kann das Ereignis-Bubbling-Phänomen wie folgt anschaulich ausgedrückt werden:

Was ist ein Ereignis, das in JQuery sprudelt?

Einfach ausgedrückt:

Nachdem ein Ereignis eintritt, wird es normalerweise vom Browser ausgelöst Zuerst tritt der Ereignishandler für das Element auf, dann für sein übergeordnetes Element, das übergeordnete Element des übergeordneten Elements ... und so weiter, bis zum Stammelement des Dokuments.

Das nennt man Event Bubbling und ist die häufigste Art der Ausbreitung von Ereignissen. 当处理好一个事件后, 你可能想要停止事件的传播,不希望它继续冒泡。就要绑定该事件的处理方法。

Was ist ein Ereignis, das in JQuery sprudelt?

Legen Sie wie oben gezeigt ein Klickereignis für sie fest. Wenn auf die Schaltfläche geklickt wird, wird das Klickereignis der Schaltfläche ausgelöst Das Element div wird ausgelöst, und dann wird das Triggerereignis des Körpers ausgelöst, und so weiter bis zum Dokument oder Fenster.

? -up-Box zwei erscheint erneut.

Wenn Sie auf das gelbe Feld klicken, in dem sich zwei befinden, erscheint das Popup-Feld zwei und dann das Popup-Feld eins. Wenn Sie auf das grüne Kästchen klicken, in dem sich eines befindet, wird nur das Popup-Kästchen angezeigt.

Das heißt, in den ersten beiden Situationen kam es zu Blasenbildung.

Wenn jemand sagt, dass es an der Reihenfolge der zu schreibenden Klickereignisse liegt, ist das nicht der Fall. Sie werden alle ausgeführt, nachdem das Dokument geladen wurde.

Was ist ein Ereignis, das in JQuery sprudelt?

Methoden zur Verhinderung von Blasenbildung:

Wenn Sie nach dem Klicken auf zwei eine spätere Blasenbildung verhindern möchten, fügen Sie einfach Folgendes hinzu: Was ist ein Ereignis, das in JQuery sprudelt?

Dann wird das Popup-Fenster zwei nicht mehr in einem angezeigt.

jquery verhindert Beispiele für das Sprudeln von Ereignissen

1 Brechen Sie das Standardverhalten ab und verhindern Sie das Sprudeln von Ereignissen, indem Sie „false“ zurückgeben. jAbfragecode:

$("form").bind(
  "submit", 
  function() { 
    return false;
   }
);

2. Brechen Sie das Standardverhalten nur mit der Methode „preventDefault()“ ab.

jQuery-Code:Was ist ein Ereignis, das in JQuery sprudelt?

$("form").bind(
  "submit", 
  function(event){
      event.preventDefault();  
  }
);

3. Verhindern Sie nur, dass ein Ereignis sprudelt, indem Sie die Methode stopPropagation() verwenden.

jQuery-Code:

$("form").bind(
  "submit", 
  function(event){
      event.stopPropagation();  
  }
);
[Empfohlenes Lernen: jQuery-Video-Tutorial, Web-Frontend-Video

]

Das obige ist der detaillierte Inhalt vonWas ist ein Ereignis, das in JQuery sprudelt?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn