les conseils de jquery sur le bouillonnement d'événements et la délégation d'événements et trois méthodes de mise en œuvre pour empêcher et autoriser l'événement bubbling

les conseils de jquery sur le bouillonnement d'événements et la délégation d'événements et trois méthodes de mise en œuvre pour empêcher et autoriser l'événement bubbling_jquery

WBOY

Libérer： 2016-05-16 15:29:20

original

1624 Les gens l'ont consulté

Tout d'abord, tout le monde sait qu'il existe deux mécanismes lorsque des événements jQuery sont déclenchés, l'un est la délégation d'événements et l'autre est le bouillonnement d'événements (la situation IE n'est pas prise en compte pour le moment). Prenons l'exemple de l'événement click, joignez d'abord un morceau de code :

html :

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

Copier après la connexion

scénario :

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

Copier après la connexion

L'intention initiale de ce code est que lorsque je clique sur #btn, je veux alerter la chaîne "btn", et lorsque je clique sur #box, je veux masquer #btn Cependant, dans l'exécution réelle lorsque je clique. btn, il exécutera d'abord l'événement btn, puis exécutera l'événement box, c'est-à-dire qu'il alertera d'abord, puis le masquera. C'est différent de ce que nous pensions, alors comment résoudre ce problème ? Ici, nous devons penser au mécanisme de bouillonnement d'événement, car lorsque je clique sur btn, l'événement remontera jusqu'à l'élément parent jusqu'à l'objet document.

Les versions de JQuery après 1.7 (si je me souviens bien) fournissent l'événement .on() pour gérer les événements des éléments liés. Ici, nous pouvons utiliser l'événement .on() et la méthode stopPropagation() pour empêcher les événements de bouillonner : <. 🎜>

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

Copier après la connexion

Ici, j'ai d'abord utilisé pour lier l'événement #btn, de sorte que lorsque le bouton btn est cliqué, alert('btn'), mais comme mon e.stopPropagation() empêche l'événement de bouillonner, donc il ne le fait pas L'événement toggleClas sera déclenché ; et lorsque je clique sur #box, l'événement toggleClass normal sera déclenché ;

J'y ai réfléchi ici, comment le résoudre si .on() n'est pas utilisé, similaire au js natif, en utilisant addEventListener pour surveiller la cible cliquée, le code n'est pas compliqué :

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

Copier après la connexion

De cette façon, vous pouvez empêcher les événements de bouillonner.

Bien sûr, le bouillonnement d'événements n'est pas que des effets secondaires. C'est un autre type dont nous allons parler, à savoir la délégation d'événements est basée sur le bouillonnement d'événements. Par exemple, dans l'exemple ci-dessus, vous pouvez supposer#. Il y a de nombreux éléments entre btn et #box Lorsque je veux cliquer sur le #btn le plus interne et que je veux déclencher son événement correspondant, je peux alors cliquer sur ses éléments périphériques puis déterminer si le clic est la cible. btn. Si c'est le cas, alors l'événement qui déclenche btn est en fait l'exemple ci-dessus de .on(), qui peut être réécrit comme suit :

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

Copier après la connexion

Déléguez l'événement btn au corps du clic pour traitement.

Enfin, analysons-le attentivement. En fait, la délégation d'événements et le bouillonnement d'événements ne sont rien de plus que deux directions d'exécution opposées d'un point de vue logique. La délégation d'événements est en fait le processus de capture d'événements, qui peut être considéré comme un processus de capture de l'extérieur vers l'intérieur, tandis que le bouillonnement d'événements est un processus de bouillonnement de l'intérieur vers l'extérieur.

Bloquer et autoriser les événements bouillonnants de jquery (trois méthodes d'implémentation)

Les événements de bouillonnement ou par défaut ne sont pas nécessaires à certains moments. Ici, nous avons besoin de quelques méthodes pour empêcher les événements de bouillonnement et par défaut. Cet article présente trois méthodes pour les empêcher à des degrés divers. Les amis intéressés peuvent en apprendre davantage, cela peut vous aider à comprendre. événements bouillonnants

Parfois, nous ne voulons pas que des événements de bouillonnement ou par défaut se produisent, nous avons donc besoin de méthodes jquery pour empêcher les événements de bouillonnement et par défaut.

Différents niveaux de blocage peuvent être obtenus grâce aux trois méthodes suivantes.

A : return false --->Dans le gestionnaire d'événements, empêche le comportement par défaut et la propagation des événements.

return false Dans le traitement des événements, vous pouvez empêcher les événements par défaut et les événements bouillonnants.

B : event.preventDefault()---> Dans le gestionnaire d'événements, empêche l'événement par défaut (autorise le bouillonnement).

event.preventDefault() peut empêcher les événements par défaut mais permettre aux événements bouillonnants de se produire pendant le traitement des événements.

C: event.stopPropagation()---> Dans le gestionnaire d'événements, empêche le bouillonnement (autorise le comportement par défaut).

event.stopPropagation() peut empêcher le bouillonnement mais permettre à l'événement par défaut de se produire pendant le traitement de l'événement.