jquerys Tipps zum Event-Bubbling und zur Event-Delegation sowie drei Implementierungsmethoden zum Verhindern und Zulassen von Event-Bubbling

jquerys Tipps zum Event-Bubbling und zur Event-Delegation sowie drei Implementierungsmethoden zum Verhindern und Zulassen von Event-Bubbling_jquery

WBOY

Freigeben： 2016-05-16 15:29:20

Original

1591 Leute haben es durchsucht

Zunächst einmal weiß jeder, dass es beim Auslösen von jQuery-Ereignissen zwei Mechanismen gibt: der eine ist die Ereignisdelegation und der andere das Ereignis-Bubbling (die IE-Situation wird vorerst nicht berücksichtigt). Nehmen Sie als Beispiel das Klickereignis und hängen Sie zunächst einen Code an:

html:

<body>
<div id="box">
<p id="btn">我是按钮</p>
</div>
</body>
style:
.hid{
　display:none;
}

Nach dem Login kopieren

Skript:

$('#box').click(function(){
 $(‘#btn').toggleClass(‘hid');
})
$('#btn').click(function(){
 alert('btn');
})

Nach dem Login kopieren

Die ursprüngliche Absicht dieses Codes besteht darin, dass ich die Zeichenfolge „btn“ warnen möchte, wenn ich auf #btn klicke, und dass ich #btn ausblenden möchte, wenn ich auf #box klicke Btn: Zuerst wird das BTN-Ereignis und dann das Box-Ereignis ausgeführt, das heißt, es wird zuerst alarmiert und dann ausgeblendet. Es unterscheidet sich von dem, was wir dachten. Wie kann dieses Problem gelöst werden? Hier müssen wir über den Ereignis-Bubbling-Mechanismus nachdenken, denn wenn ich auf BTN klicke, wird das Ereignis zum übergeordneten Element bis zum Dokumentobjekt übertragen.

JQuery-Versionen nach 1.7 bieten (wenn ich mich richtig erinnere) das .on()-Ereignis, um Ereignisse gebundener Elemente zu verarbeiten. Hier können wir das .on()-Ereignis und die stopPropagation()-Methode verwenden, um Ereignisse zu verhindern 🎜>

$('#box').on('click','#btn',function(e){
 e.stopPropagation()；
 alert(‘btn');
})
$('#box').click(function(){
 $(‘#btn').toggleClass(‘hid');
})

Nach dem Login kopieren

Hier habe ich zuerst das #btn-Ereignis gebunden, sodass beim Klicken auf die Btn-Schaltfläche alarm('btn') ausgegeben wird. Da meine e.stopPropagation() jedoch verhindert, dass das Ereignis sprudelt, ist dies nicht der Fall Das toggleClas-Ereignis wird ausgelöst; und wenn ich auf #box klicke, wird das normale toggleClass-Ereignis ausgelöst;

Ich habe hier darüber nachgedacht, wie ich es lösen kann, wenn .on() nicht verwendet wird. Ähnlich wie bei nativem js wird addEventListener verwendet, um das angeklickte Ziel zu überwachen. Der Code ist nicht kompliziert:

$('#box‘).click(function(e) {
 if (e.target == this) {
  $(‘#btn').toggleClass(‘hid');
 }
})
$(‘#btn').click(function() {
 alert(‘btn');
})

Nach dem Login kopieren

Auf diese Weise können Sie verhindern, dass Ereignisse übersprudeln.

Natürlich sind Event-Bubbling nicht nur Nebeneffekte, sondern auch die Event-Delegation, die auf Event-Bubbling basiert. Es gibt viele Elemente zwischen btn und #box. Wenn ich auf das innerste #btn klicken und das entsprechende Ereignis auslösen möchte, kann ich auf die peripheren Elemente klicken und dann feststellen, ob der Klick das Ziel ist btn. Wenn ja, dann ist das Ereignis, das btn auslöst, tatsächlich das obige Beispiel von .on(), das wie folgt umgeschrieben werden kann:

$('body').on('click','#btn',function(e){
 alert(‘btn');
})

Nach dem Login kopieren

Delegieren Sie das BTN-Ereignis zur Verarbeitung an den Click-Body.

Lassen Sie es uns abschließend sorgfältig analysieren. Tatsächlich sind Ereignisdelegation und Ereignissprudeln aus logischer Sicht nichts anderes als zwei entgegengesetzte Ausführungsrichtungen. Bei der Ereignisdelegation handelt es sich eigentlich um den Prozess der Ereigniserfassung, der als ein Prozess der Erfassung von außen nach innen angesehen werden kann, während das Sprudeln von Ereignissen ein Prozess des Sprudelns von innen nach außen ist.

Blockieren und Zulassen von Bubbling-Ereignissen von JQuery (drei Implementierungsmethoden)

Bubbling- oder Standardereignisse sind zu bestimmten Zeiten nicht erforderlich. Hier benötigen wir einige Methoden, um Bubbling- und Standardereignisse in unterschiedlichem Ausmaß zu verhindern sprudelnde Ereignisse

Manchmal möchten wir nicht, dass Bubbling- oder Standardereignisse auftreten, daher benötigen wir einige JQuery-Methoden, um Bubbling- und Standardereignisse zu verhindern.

Mit den folgenden drei Methoden können unterschiedliche Blockierungsgrade erreicht werden.

A: return false --->Verhindert im Event-Handler das Standardverhalten und das Sprudeln von Ereignissen.

false zurückgeben Bei der Ereignisverarbeitung können Sie Standardereignisse und Bubbling-Ereignisse verhindern.

B: event.preventDefault()---> Verhindern Sie im Event-Handler das Standardereignis (ermöglicht Sprudeln).

event.preventDefault() kann Standardereignisse verhindern, aber das Auftreten von Bubbling-Ereignissen während der Ereignisverarbeitung zulassen.

C: event.stopPropagation()---> Im Event-Handler Sprudeln verhindern (ermöglicht Standardverhalten).

event.stopPropagation() kann Blasenbildung verhindern, aber das Eintreten des Standardereignisses während der Ereignisverarbeitung zulassen.

PHP8, ich komme auch

Lernen Sie das Website-Layout in 30 Minuten

Shangguan Oracle Video-Tutorial für Anfänger bis Fortgeschrittene

Ihre erste Zeile UNI-APP-Code

Flattern Sie von Grund auf bis zum App-Start

Brother Lian Neues Linux-Video-Tutorial

AXURE 9 Video-Tutorial (geeignet für die interaktive Produktdesign-Benutzeroberfläche von Product Manager)

Zero Basic Proficiency PS-Video-Tutorial

16-tägiges UI-Video-Tutorial für den Einstieg

PS-Techniken und Slicing-Techniken-Video-Tutorial

Video-Tutorial zum Bau und zur Projekteinführung der Alibaba Cloud-Umgebung

Überblick über Computernetzwerke – Grundkenntnisse, die Programmierer beherrschen müssen

Grundlegendes Tutorial für Programmierer – Erklärung des HTTP-Protokolls

Websocket-Video-Tutorial

jquerys Tipps zum Event-Bubbling und zur Event-Delegation sowie drei Implementierungsmethoden zum Verhindern und Zulassen von Event-Bubbling_jquery