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

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