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

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>

<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>

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. 45a2772a6b6107b401db3c9b82c049c2
2. dc6dce4a544fdca2df29d5ac0ea9906b
3. 868613ba9f6a76dbd8a2546a53ab11e7

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 45a2772a6b6107b401db3c9b82c049c2-Elements auslösen, aber gleichzeitig wurden auch die Klickereignisse des dc6dce4a544fdca2df29d5ac0ea9906b-Elements ausgelöst. Daher ist es notwendig, den Umfang der Veranstaltungen einzuschränken. Wenn auf das Element 45a2772a6b6107b401db3c9b82c049c2 geklickt wird, wird nur das Klickereignis des Elements dc6dce4a544fdca2df29d5ac0ea9906b ausgelöst. Wenn auf das Element geklickt wird, wird nur das Klickereignis des dc6dce4a544fdca2df29d5ac0ea9906b-Elements ausgelöst, nicht jedoch das des 6c04bd5ca3fcae76e30b72ad730ca86d-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 : 事件对象 
  //... 
});

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(); // 阻止事件冒泡
  });
})

Wenn auf das 45a2772a6b6107b401db3c9b82c049c2-Element geklickt wird, wird nur das Klickereignis auf dem 45a2772a6b6107b401db3c9b82c049c2-Element ausgelöst, nicht jedoch die Klickereignisse des dc6dce4a544fdca2df29d5ac0ea9906b-Elements. Die gleiche Methode kann verwendet werden, um das Blasenproblem für das dc6dce4a544fdca2df29d5ac0ea9906b-Element zu lösen.

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

Auf diese Weise wird beim Klicken auf das Element 45a2772a6b6107b401db3c9b82c049c2 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>

$(function(){
 $("#sub").bind("click",function(event){
   var username = $("#username").val(); //获取元素的值
   if(username==""){ //判断值是否为空
      $("#msg").html("<p>文本框的值不能为空.</p>"); //提示信息
      event.preventDefault(); //阻止默认行为 ( 表单提交 )
     }
 })
})

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. 868613ba9f6a76dbd8a2546a53ab11e7
2. dc6dce4a544fdca2df29d5ac0ea9906b
3. 45a2772a6b6107b401db3c9b82c049c2

Natürlich beginnt die Ereigniserfassung beim äußersten Element und geht dann zum innersten Element über. Daher wird das gebundene Klickereignis zuerst an das 6c04bd5ca3fcae76e30b72ad730ca86d-Element, dann an das dc6dce4a544fdca2df29d5ac0ea9906b-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.