web-dev-qa-db-fra.com

Capture et bulles à l'aide de jQuery

Je suis nouveau sur jQuery et j'essaie de comprendre le concept de capture et de bouillonnement.

J'ai lu beaucoup d'articles, mais la plupart décrivent la propagation d'événements pour Javascript.

Supposons que nous ayons le code HTML suivant:

<div id="outter">

        outter

        <div id="inner">

                inner
        </div>

</div>

La capture est la phase où nous descendons les éléments DOM et le bouillonnement, c'est quand nous montons.

En Javascript, vous pouvez décider du chemin à suivre (en utilisant des paramètres vrais ou faux):

element.addEventListener('click',doSomething,true) --> capture phase
element.addEventListener('click',doSomething,false)  --> bubble phase

Existe-t-il quelque chose de similaire pour jQuery pour indiquer la voie à suivre autre que la manière JavaScript?

Est-ce que jQuery utilise également une phase par défaut? Par exemple, une bulle?

Parce que j'ai utilisé le code suivant pour tester cela:

css

<style>

  div {
            border: 1px solid green;
            width: 200px;

       }

</style>

jQuery

<script>

    $(document).ready(function(){

        $('div').click(function(){
            $(this).animate({'width':'+=10px'},{duration: 3000})
        });

    });

</script>

Il semble que lorsque je clique sur le div externe, seul ce div s'anime en un div plus grand. Lorsque je clique sur la div intérieure, les deux div s'animent en div plus grandes.

Je ne sais pas si je me trompe, mais ce test montre que la méthode de propagation du navigateur par défaut est bubble.

S'il vous plait corrigez moi si je me trompe.

javascriptjqueryhtmlevent-bubblingpropagation
24
christostsang

jQuery utilise uniquement le bullage d'événements. Si vous souhaitez ajouter un gestionnaire d'événements qui utilise le modèle de capture, vous devez le faire explicitement en utilisant addEventListener, avec le troisième argument true comme vous le montrez dans la question.

40
Barmar

Bulle d'événement qui commencera à s'exécuter de l'élément le plus interne à l'élément le plus externe.

Capture d'événement qui commencera à s'exécuter de l'élément externe à l'élément le plus interne.

Mais jQuery utilisera le bullage d'événements. Nous pouvons réaliser la capture d'événements avec:

$("body")[0].addEventListener('click', callback, true);

Le 3ème paramètre de l'addEventListener qui indiquera au navigateur s'il doit prendre la propagation d'événements ou la capture d'événements.

Par défaut, c'est faux.

Si elle est fausse, cela nécessitera un bullage d'événement. Si c'est vrai, il faudra capturer l'événement.

3
Vijay Ramesh