Introduction au bouillonnement et à la capture JavaScript (avec code)

Le contenu de cet article est une introduction à la connaissance du bouillonnement et de la capture JavaScript (avec code). Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.

Qu'est-ce que le bouillonnement et la capture JS ?

Le bouillonnement et la capture font référence aux deux directions, ou processus, dans lesquels js délivre des événements lorsqu'un événement sur un élément est déclenché.

Avant-propos :

Par exemple, il existe une telle méthode page et js

Moins : j'utilise moins à écrire Oui, s'il n'y a pas moins d'environnement, vous pouvez ignorer ce paragraphe.

.level {
  padding: 50px 80px;
}

.level-template(@level: 1, @color: #fff){
  background-color: darken( @color , 5% * @level);
}

#lv1{ .level-template(1)}
#lv2{ .level-template(2)}
#lv3{ .level-template(3)}
#lv4{ .level-template(4)}

HTML

<div>
    <div>
        <div>
            <div>

            </div>
        </div>
    </div>
</div>

JS

function $(id) {
    return document.getElementById(id);
}

window.onload = () => {
    $('lv1').addEventListener("click",()=>{console.log('lv1')},true);
    $('lv2').addEventListener("click",()=>{console.log('lv2')},true);
    $('lv3').addEventListener("click",()=>{console.log('lv3')},true);
};
// 上面的 () => {} 为 ES6 的匿名方法的定义方式
// 等同于
function () {
    console.log('lv1')
}

Ce que fait le js ci-dessus :
Lorsque la page se charge, donnez trois divs Ajoutez un clic d'écoute Lorsque vous cliquez dessus, la valeur de votre identifiant sera affichée dans la console.

La structure de la page est la suivante : lv1 contient le lv2, et lv2 contient le lv3, lorsque vous cliquez sur le lv3, vous cliquez en fait sur le lv2 et le lv1, car le lv3 est à l'intérieur du lv2. vous cliquerez naturellement dessus lv2 et lv1, c'est-à-dire que lorsque vous cliquerez sur lv3, trois événements de clic seront déclenchés.
Quant à l'ordre dans lequel ces trois événements se déclenchent, c'est ce qu'on appelle le bouillonnement et la capture.

Trois étapes par lesquelles passe le déclenchement d'événement :

1. Étape de capture : Tout d'abord, commencez par le nœud racine du document document jusqu'à l'objet déclencheur d'événement , et capturez de l'extérieur vers l'intérieur de l'objet événement ;
2. Localiser la cible : recherchez l'emplacement de l'événement cible (où l'incident s'est produit) et déclenchez l'événement
3. Étape de bulle : Ensuite, commencez à partir de L'emplacement de l'événement cible est retracé jusqu'au nœud racine du document et les objets d'événement sont bouillonnés de l'intérieur vers l'extérieur.

1. Phase de capture

Comme dans l'exemple ci-dessus, lorsque l'on clique sur lv3, js partira de la couche supérieure du document et recherchera l'origine de l'événement de clic à partir de l’extérieur vers l’intérieur. C’est le niveau 3. Ensuite, ce processus de l'extérieur vers l'intérieur est lv1 --> lv2 --> Les événements de clic de ces trois p sont déclenchés en séquence selon ce processus.

La direction de ce déclencheur est la direction de capture.

2. Étape de bouillonnement

Après avoir trouvé le niveau 3 cliqué, l'événement est transmis vers le haut. sont déclenchés en séquence. , l'événement click du lv1, ce processus de déclenchement à l'envers est appelé bouillonnement

Revenons sur le format des méthodes de liaison d'événement les plus couramment utilisées :

element.addEventListener(event, function, useCapture)

Ici, useCapture est une valeur booléenne utilisée pour définir si l'événement est déclenché pendant la phase de bullage ou pendant la phase de capture. La valeur par défaut est false, ce qui signifie qu'il est déclenché pendant la phase de bullage.

À ce stade, vous saurez que la méthode de clic définie dans l'exemple ci-dessus est exécutée dans la phase de capture, alors le résultat renvoyé est

lv1
lv2
lv3

Si l'exemple du haut, le contenu en cours de chargement est comme ça

 window.onload = () => {
        $('lv1').addEventListener("click",()=>{console.log('lv1')},false);
        $('lv2').addEventListener("click",()=>{console.log('lv2')},false);
        $('lv3').addEventListener("click",()=>{console.log('lv3')},false);
    };

En d'autres termes, l'événement

est déclenché dans click, et le résultat renvoyé est 冒泡阶段

lv3
lv2
lv1

Résumé

La relation entre bouillonnement et capture n'apparaîtra que dans les structures contenant et contenues. Cette relation n'existera pas dans les relations fraternelle.

Le bouillonnement et la capture ont simplement une direction différente.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!