简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Heim > Web-Frontend > js-Tutorial > Hauptteil

Analyse von Beispielen für das Bubbling von DOM-Ereignissen in JQuery_jquery

WBOY
Freigeben： 2016-05-16 15:55:18
Original
1278 Leute haben es durchsucht

In diesem Artikel wird das Bubbling von DOM-Ereignissen in JQuery anhand von Beispielen analysiert. Teilen Sie es als Referenz mit allen. Die spezifische Analyse lautet wie folgt:

Was sprudelt

Es kann mehrere Ereignisse auf der Seite geben und mehrere Elemente können auf dasselbe Ereignis reagieren. Angenommen, es gibt zwei Elemente auf der Webseite, ein Element ist im anderen Element verschachtelt und beide sind an Klickereignisse gebunden. Gleichzeitig ist das Klickereignis auch an das Körperelement gebunden. 

<div id="content">
  外层div元素
  <span>内层span元素</span>
  外层div元素
</div>
Nach dem Login kopieren
<script type="text/javascript">
$(function(){
  // 为span元素绑定click事件
  $('span').bind("click",function(){
    var txt = $('#msg').html() + "<p>内层span元素被点击.<p/>";
    $('#msg').html(txt);
  });
  // 为div元素绑定click事件
  $('#content').bind("click",function(){
   var txt = $('#msg').html() + "<p>外层div元素被点击.<p/>";
    $('#msg').html(txt);
  });
  // 为body元素绑定click事件
  $("body").bind("click",function(){
    var txt = $('#msg').html() + "<p>body元素被点击.<p/>";
    $('#msg').html(txt);
  });
})
</script>
Nach dem Login kopieren

Wenn auf das interne Span-Element geklickt wird, dh das Klickereignis des Span-Elements ausgelöst wird, werden 3 Datensätze ausgegeben. Durch einfaches Klicken auf das innere Span-Element wird das Klickereignis ausgelöst, das an das äußere div-Element und das body-Element gebunden ist. Dies wird durch Event-Bubbling verursacht. Während Sie auf das span-Element klicken, klicken Sie auch auf das Element div, das das span-Element enthält, und auf das Element body, das das div-Element enthält. Jedes Element reagiert dann in einer bestimmten Reihenfolge auf das Klickereignis.

Das Klickereignis des

-Elements „blubbert“ in der folgenden Reihenfolge.

1.
2.


3.

Der Grund, warum es „Bubbling“ genannt wird, liegt darin, dass das Ereignis gemäß der DOM-Hierarchie weiterhin wie eine Blase nach oben steigt.

Probleme durch Event-Bubbling

Das Sprudeln von Ereignissen kann unerwartete Auswirkungen haben. Im obigen Beispiel wollten wir ursprünglich nur das Klickereignis des -Elements auslösen, aber gleichzeitig wurden auch die Klickereignisse des

-Elements ausgelöst. Daher ist es notwendig, den Umfang der Veranstaltungen einzuschränken. Wenn auf das Element geklickt wird, wird nur das Klickereignis des Elements
ausgelöst. Wenn auf das Element geklickt wird, wird nur das Klickereignis des
-Elements ausgelöst, nicht jedoch das des -Elements.

Ereignisobjekt

Da IE-DOM und Standard-DOM Ereignisobjekte auf unterschiedliche Weise implementieren, wird es schwieriger, Ereignisobjekte in verschiedenen Browsern abzurufen. Um dieses Problem zu lösen, hat JQuery die erforderlichen Erweiterungen und Kapselungen vorgenommen, sodass das Ereignisobjekt und einige Eigenschaften des Ereignisobjekts in jedem Browser problemlos abgerufen werden können.

Die Verwendung von Ereignisobjekten in Programmen ist sehr einfach. Sie müssen der Funktion lediglich einen Parameter hinzufügen: 

$("element").bind("click",function(event){ 
  //event : 事件对象 
  //... 
});
Nach dem Login kopieren

Auf diese Weise wird beim Klicken auf das Element „Element“ das Ereignisobjekt erstellt. Auf dieses Ereignisobjekt kann nur von Ereignisbehandlungsfunktionen zugegriffen werden. Nachdem die Ereignisbehandlungsfunktion ausgeführt wurde, wird das Ereignisobjekt zerstört.

Stoppen Sie das Sprudeln von Ereignissen

Das Stoppen des Event-Bubblings kann verhindern, dass Event-Handler anderer Objekte im Event ausgeführt werden. Die Methode stopPropagation() wird in JQuery bereitgestellt, um das Sprudeln von Ereignissen zu stoppen. 

$(function(){
   // 为span元素绑定click事件
  $('span').bind("click",function(event){
    var txt = $('#msg').html() + "内层span元素被点击";
    $('#msg').html(txt);
    event.stopPropagation(); // 阻止事件冒泡
  });
})
Nach dem Login kopieren

Wenn auf das -Element geklickt wird, wird nur das Klickereignis auf dem -Element ausgelöst, nicht jedoch die Klickereignisse des

-Elements. Die gleiche Methode kann verwendet werden, um das Blasenproblem für das
-Element zu lösen. 

$('#content').bind("click",function(event){ 
 var txt = $('#msg').html() + "<p>外层div元素被点击.<p/>"; 
 $('#msg').html(txt); 
 event.stopPropagation(); // 阻止事件冒泡 
});
Nach dem Login kopieren

Auf diese Weise wird beim Klicken auf das Element nur der entsprechende Inhalt und kein anderer Inhalt ausgegeben.

Standardverhalten blockieren

Elemente in Webseiten haben ihr eigenes Standardverhalten. Wenn Sie beispielsweise auf einen Hyperlink klicken, wird das Formular gesendet. Manchmal ist es erforderlich, das Standardverhalten von Elementen zu verhindern.

In JQuery wird die Methode „preventDefault()“ bereitgestellt, um das Standardverhalten von Elementen zu verhindern.

In Projekten ist es beispielsweise häufig erforderlich, das Formular zu überprüfen. Wenn auf die Schaltfläche „Senden“ geklickt wird, wird der Formularinhalt überprüft, z. B. ob es sich bei einem Element um ein Pflichtfeld handelt und ob ein Element 6 Zeichen lang ist usw. Wenn das Formular die Formularübermittlung nicht verhindert, wenn die Übermittlungsbedingungen erfüllt sind (Standardverhalten). 

<form action="test.html">
用户名：<input type="text" id="username" />
<br/>
<input type="submit" value="提交" id="sub"/>
</form>
Nach dem Login kopieren
$(function(){
 $("#sub").bind("click",function(event){
   var username = $("#username").val(); //获取元素的值
   if(username==""){ //判断值是否为空
      $("#msg").html("<p>文本框的值不能为空.</p>"); //提示信息
      event.preventDefault(); //阻止默认行为 ( 表单提交 )
     }
 })
})
Nach dem Login kopieren

Wenn der Benutzername leer ist und Sie auf die Schaltfläche „Senden“ klicken, erscheint eine Eingabeaufforderung und das Formular kann nicht gesendet werden. Das Absenden des Formulars ist erst nach Eingabe des Benutzernamens möglich. Es ist ersichtlich, dass die Methode „preventDefault()“ die Übermittlung des Formulars verhindern kann.

Wenn Sie das Sprudeln und das Standardverhalten für das Ereignisobjekt gleichzeitig stoppen möchten, können Sie in der Ereignisbehandlungsfunktion false zurückgeben. Dies ist eine Kurzform zum Aufrufen der stopPapagation()-Methode und der PreventDefault()-Methode für das Ereignisobjekt.

Im Formularbeispiel kann event.preventDefault(); umgeschrieben werden als: return false;

Sie können event.stopPropaqation(); im Event-Bubbling-Beispiel auch umschreiben als: return false;

Ereigniserfassung

Ereigniserfassung und Ereignissprudeln sind zwei gegensätzliche Prozesse. Die Ereigniserfassung wird von oben nach unten ausgelöst. Noch ein Beispiel für ein Bubbling-Ereignis: Das Klickereignis eines Elements wird in der folgenden Reihenfolge erfasst.

1.
2.


3.

Natürlich beginnt die Ereigniserfassung beim äußersten Element und geht dann zum innersten Element über. Daher wird das gebundene Klickereignis zuerst an das -Element, dann an das

-Element übergeben.

Leider unterstützen nicht alle gängigen Browser die Ereigniserfassung und dieser Fehler kann nicht mit JavaScript behoben werden. JQuery unterstützt keine Ereigniserfassung. Wenn Leser die Ereigniserfassung verwenden müssen, verwenden Sie bitte direkt natives JavaScript.

Ich hoffe, dass dieser Artikel für alle bei der jQuery-Programmierung hilfreich sein wird.

Verwandte Etiketten：
dom jquery 事件冒泡
Quelle：php.cn
Vorheriger Artikel：Detaillierte Erläuterung der Verwendung der Methode Math.atan2() in JavaScript_Grundkenntnisse Nächster Artikel：Detaillierte Erläuterung der Verwendung der toUTCString()-Methode in JavaScript_Grundkenntnisse
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
Neueste Artikel des Autors
Aktuelle Ausgaben
Schritte zum Installieren von jQuery in Nuxt.js Obwohl ich versuche, jQuery in mein Projekt einzufügen, erhalte ich die Fehlermeldung, das...
Aus 2023-11-06 16:41:50
0
1
225
jQuery erhält beim Abrufen des Datenattributs einen falschen Wert Ich habe ein Div mit dem Datenattribut <divclass='p1'data-location='1'></div>....
Aus 2023-11-01 23:01:19
0
1
209
Unterstützen Sie jQuerys Transfer-Encoding:chunked Ich bin Webentwickler. In meinem Skript verwende ich header(), um „Transfer-Encoding:chunk...
Aus 2023-10-25 23:44:37
0
1
230
Wie erhalte ich mit JavaScript oder jQuery die natürlichen Abmessungen eines Bildes? Bisher habe ich diesen Code: varimg=document.getElementById('draggable'); varwidth=img.cli...
Aus 2023-10-21 13:53:08
0
2
275
Textbereich automatisch erweitern Ich versuche, einen einfachen Textbereich mit automatischer Erweiterung zu erstellen. Dies...
Aus 2023-10-21 08:49:23
0
2
225
verwandte Themen
Mehr>
Beliebte Empfehlungen
Beliebte Tutorials
Mehr>
Verwandte Tutorials
Beliebte Empfehlungen
Aktuelle Kurse
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website：Online-PHP-Schulung für das Gemeinwohl，Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln！