Heim Web-Frontend Front-End-Fragen und Antworten Was ist ein Ereignis, das in JQuery sprudelt?

Was ist ein Ereignis, das in JQuery sprudelt?

Nov 18, 2022 pm 06:52 PM
javascript jquery

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:

1

2

3

4

5

6

$("form").bind(

  "submit",

  function() {

    return false;

   }

);

Nach dem Login kopieren

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

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

1

2

3

4

5

6

$("form").bind(

  "submit",

  function(event){

      event.preventDefault();  

  }

);

Nach dem Login kopieren

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

jQuery-Code:

1

2

3

4

5

6

$("form").bind(

  "submit",

  function(event){

      event.stopPropagation();  

  }

);

Nach dem Login kopieren
[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!

Erklärung dieser Website
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

Heißer Artikel

R.E.P.O. Energiekristalle erklärten und was sie tun (gelber Kristall)
2 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌
Repo: Wie man Teamkollegen wiederbelebt
4 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Abenteuer: Wie man riesige Samen bekommt
3 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌

Heißer Artikel

R.E.P.O. Energiekristalle erklärten und was sie tun (gelber Kristall)
2 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌
Repo: Wie man Teamkollegen wiederbelebt
4 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Abenteuer: Wie man riesige Samen bekommt
3 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌

Heiße Artikel -Tags

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)

Ausführliche Erläuterung der jQuery-Referenzmethoden: Kurzanleitung Ausführliche Erläuterung der jQuery-Referenzmethoden: Kurzanleitung Feb 27, 2024 pm 06:45 PM

Ausführliche Erläuterung der jQuery-Referenzmethoden: Kurzanleitung

Wie verwende ich die PUT-Anfragemethode in jQuery? Wie verwende ich die PUT-Anfragemethode in jQuery? Feb 28, 2024 pm 03:12 PM

Wie verwende ich die PUT-Anfragemethode in jQuery?

Wie entferne ich das Höhenattribut eines Elements mit jQuery? Wie entferne ich das Höhenattribut eines Elements mit jQuery? Feb 28, 2024 am 08:39 AM

Wie entferne ich das Höhenattribut eines Elements mit jQuery?

jQuery-Tipps: Ändern Sie schnell den Text aller a-Tags auf der Seite jQuery-Tipps: Ändern Sie schnell den Text aller a-Tags auf der Seite Feb 28, 2024 pm 09:06 PM

jQuery-Tipps: Ändern Sie schnell den Text aller a-Tags auf der Seite

Verwenden Sie jQuery, um den Textinhalt aller a-Tags zu ändern Verwenden Sie jQuery, um den Textinhalt aller a-Tags zu ändern Feb 28, 2024 pm 05:42 PM

Verwenden Sie jQuery, um den Textinhalt aller a-Tags zu ändern

Verstehen Sie die Rolle und Anwendungsszenarien von eq in jQuery Verstehen Sie die Rolle und Anwendungsszenarien von eq in jQuery Feb 28, 2024 pm 01:15 PM

Verstehen Sie die Rolle und Anwendungsszenarien von eq in jQuery

Wie kann man feststellen, ob ein jQuery-Element ein bestimmtes Attribut hat? Wie kann man feststellen, ob ein jQuery-Element ein bestimmtes Attribut hat? Feb 29, 2024 am 09:03 AM

Wie kann man feststellen, ob ein jQuery-Element ein bestimmtes Attribut hat?

Zusammenfassung häufig verwendeter Dateioperationsfunktionen in PHP Zusammenfassung häufig verwendeter Dateioperationsfunktionen in PHP Apr 03, 2024 pm 02:52 PM

Zusammenfassung häufig verwendeter Dateioperationsfunktionen in PHP

See all articles