web-dev-qa-db-fra.com

jQuery événement bouillonnant

Je veux comprendre comment interpréter exactement le bouillonnement. Est-ce que cela signifie monter dans la hiérarchie du code HTML ou autre chose?

Deuxièmement, je passais par un exemple et je ne comprenais pas la dernière partie où il est dit

Le gestionnaire de clics basé sur P écoute l'événement click, puis l'empêche de se propager (propagation)

Qu'est-ce que ça veut dire?

javascriptjqueryjavascript-eventsliveevent-bubbling
17
testndtv
return false;

empêchera le "bouillonnement". Il est utilisé pour arrêter les actions par défaut telles que cocher une case à cocher, ouvrir une sélection, un clic, etc.

Pour empêcher d'autres gestionnaires de s'exécuter après une liaison en utilisant .live (), , Le gestionnaire doit renvoyer false. L'appel de .stopPropagation () ne permettra pas D'y parvenir.

De Mises en garde dans jQuery .live ()

Raisonnement (merci à @AlienWebguy):

La raison pour laquelle stopPropagation() ne fonctionne pas avec live() est que live() lie l'événement à un document de sorte qu'au moment de son déclenchement, il n'y a pas d'autre endroit où il se propage.

8
Joe

Le concept de "bouillonnement" est comme si vous avez un élément enfant avec un événement click et que vous ne voulez pas qu'il déclenche l'événement click du parent. Vous pouvez utiliser event.stopPropagation().

event.stopPropagation() indique en gros que vous appliquez cet événement de clic à THIS CHILD NODE et ne dites rien aux conteneurs parents, car je ne veux pas qu'ils réagissent.

Capture d'événement: 

               | |
---------------| |-----------------
| element1     | |                |
|   -----------| |-----------     |
|   |element2  \ /          |     |
|   -------------------------     |
|        Event CAPTURING          |
-----------------------------------

Event Bubbling: 

               / \
---------------| |-----------------
| element1     | |                |
|   -----------| |-----------     |
|   |element2  | |          |     |
|   -------------------------     |
|        Event BUBBLING           |
-----------------------------------

Si vous utilisez live() ou delegate(), vous aurez besoin de return false;, bien que cela puisse ne pas fonctionner. Lire la citation ci-dessous.

Per Documents jQuery :

Étant donné que la méthode .live () gère les événements une fois qu'ils se sont propagés vers le haut du document, il n'est pas possible d'arrêter la propagation des événements en direct de . De même, les événements gérés par .delegate () propageront Aux éléments auxquels ils sont délégués; les gestionnaires d'événements liés sur , tous les éléments situés au-dessous de celui-ci dans l'arborescence DOM auront déjà été exécutés au moment de l'appel du gestionnaire d'événements délégué. Par conséquent, ces gestionnaires Peuvent empêcher le gestionnaire délégué de déclencher en appelant event.stopPropagation () ou en renvoyant la valeur false.

Dans le passé, il s'agissait d'un problème de plate-forme, Internet Explorer utilisait un modèle en ébullition et Netscape était davantage axé sur la capture (tout en prenant en charge les deux).

Le modèle du W3C vous permet de choisir celui que vous voulez.

Je pense que les bulles sont plus populaires parce que, comme indiqué, certaines plates-formes ne prennent en charge que les bulles ... et cela a du sens en tant que mode "par défaut".

Le choix que vous choisissez est en grande partie un produit de ce que vous faites et de ce qui a du sens pour vous.

Plus d'infos http://www.quirksmode.org/js/events_order.html

Une autre excellente ressource: http://fuelyourcoding.com/jquery-events-stop-misusing-return-false/

38
AlienWebguy

Cela dit, la méthode live () attache un gestionnaire à l'élément document et examine la target de l'événement pour voir d'où il provient. Si la cible correspond au sélecteur, elle déclenche le gestionnaire d'événements. Tout cela repose sur le système d'événements bouillonnant.

Dans l'exemple, le gestionnaire de clics sur l'élément p, qui est un ancêtre de l'élément a, annule le bullage en renvoyant false. Ensuite, l'élément document ne recevra jamais l'événement. Il ne déclenchera donc pas le gestionnaire d'événements.

2
Johnny5

Dans l'exemple ci-dessous, il associe un événement click à l'ancre avec l'id "ancre". Cette ancre se trouve dans un div auquel est également associé un événement click. Si nous cliquons sur cette ancre, c’est aussi bon que de cliquer sur le div contenant. Maintenant, si nous voulons faire des trucs sur ce clic d'ancrage mais que nous ne voulons pas que le clic de la div soit déclenché, nous pouvons arrêter l'événement bubling comme ci-dessous.

<div id="div">

<a href="google.com" id="anchor"></a>

</div>


$("#div").click(function(e){//On anchor click this event will not be fired as we have stop the event propagation in anchor click handler.

   //Do stuff here

});

$("#anchor").click(function(e){

   //Do stuff here

   //This line stops the event bubling and 
   //jquery has abstracted it in the event object to make it cross browser compatible.
   e.stopPropagation();
});
1
ShankarSangoli

Ces deux liens fournissent des explications claires et élaborées sur la propagation d'événements (ainsi que sur les concepts d'événements couramment utilisés).

http://jqfundamentals.com/chapter/events
http://www.mattlunn.me.uk/blog/2012/05/what-does-event-bubbling-mean/

Du premier lien

l’événement sera déclenché pour l’élément a ainsi que pour tous les éléments contenant le a - jusqu’au document

Du deuxième lien

<div>
    <h1>
        <a href="#">
            <span>Hello</span>
        </a>
    </h1>
</div>

Supposons que nous cliquions sur la plage, ce qui provoque le déclenchement d'un événement de clic sur la plage; rien de révolutionnaire jusqu'à présent. Cependant, l'événement se propage ensuite (ou les bulles) vers le parent du span (the) et un événement de clic est déclenché sur celui-ci. Ce processus se répète pour le prochain parent (ou ancêtre) jusqu'à l'élément de document.

Mettons maintenant tout cela dans le contexte d'un DOM. Le DOM est un ... arbre et chaque élément est un nœud de l’arbre DOM. La bulle est alors simplement la traversée d'un noeud, some element au noeud racine, document (suivez votre parent jusqu'à ce que vous n'en puissiez plus)

0
Gerald

Également:

event.stopPropagation()

http://api.jquery.com/event.stopPropagation/

0
Jason Kaczmarsky

Oui, l'événement monte dans l'arborescence et si un élément a un gestionnaire pour cet événement, il sera appelé. En ajoutant return:false à un gestionnaire de l'un des éléments, l'événement ne sera pas diffusé.

0
Ionut Popa