J'ai déjà vu de nombreux articles. Ils disent tous uniformément que la capture d'événement est exécutée en premier et le bullage est exécuté ensuite. En fait, ce n'est pas rigoureux. Nous avons juste le temps aujourd'hui d'y jeter un œil et de donner un exemple.
<div id="div1">
我是div1
<div id="div2">我是div2
<div id="div3">
我是div3
<div id="div4">我是div4</div>
</div>
</div>
</div>Nous avons d'abord écrit 4 divs, qui sont des relations imbriquées. J'ai défini différentes tailles et couleurs d'arrière-plan pour eux. L'effet d'affichage de la page est le suivant
Ensuite, nous devons lier respectivement le bullage et la capture à ces quatre éléments. À ce stade, nous devons utiliser addEventListener(). Cette méthode doit passer trois paramètres.
Le premier paramètre : le nom de l'événement à exécuter. Notez qu'il ne peut pas contenir on. Par exemple, click doit être écrit à la place de onclick.
Deuxième paramètre : fonction de gestion d'événement exécutée après le déclenchement de l'événement
Le troisième paramètre : effectuer une capture ou un bullage. false signifie bouillonner, qui est également la valeur par défaut, et true signifie capturer
//冒泡
oDiv1.addEventListener('click', function () {
console.log("我是div1");
});
oDiv2.addEventListener('click', function () {
console.log("我是div2");
});
oDiv3.addEventListener('click', function () {
console.log("我是div3");
});
oDiv4.addEventListener('click', function (e) {
console.log("我是div4");
});
//捕获
oDiv1.addEventListener('click', function () {
console.log("我是div1-1");
}, true);
oDiv2.addEventListener('click', function () {
console.log("我是div2-2");
}, true);
oDiv3.addEventListener('click', function () {
console.log("我是div3-3");
}, true);
oDiv4.addEventListener('click', function (e) {
console.log("我是div4-4");
}, true);Après avoir lié les paramètres, nous l'exécutons. Les résultats de l'exécution sont les suivants :
Ce sur quoi j'ai cliqué est div4. Vous pouvez voir dans les résultats ci-dessous que pour 1-3, la capture est exécutée en premier, puis le bouillonnement est exécuté. Mais pour notre div4, il génère d'abord le bouillonnement, puis la capture. Donc à ce moment-là, passons modifiez-le et écrivez uniquement l'événement de capture de div4 avant l'événement bouillonnant de div4
//就是把div4的捕获写在前面
oDiv4.addEventListener('click', function (e) {
console.log("我是div4-4");
}, true);
oDiv4.addEventListener('click', function (e) {
console.log("我是div4");
});Les résultats d'exécution sont les suivants
La démonstration est donc très claire ici : pour les éléments imbriqués, la capture est exécutée en premier, puis le bullage est exécuté.
Mais pour l'élément déclenché (il s'agit ici de div4), l'ordre d'exécution de la capture et du bullage dépend de l'ordre dans lequel le code est écrit, de qui exécute qui en premier.
De cette façon, tout le monde peut connaître plus clairement l'ordre d'exécution de la capture et du bouillonnement ~ combat