Maison > Article > interface Web > En savoir plus sur le bouillonnement et la capture d'événements en JavaScript
En savoir plus sur le bouillonnement et la capture d'événements en JavaScript
- 青灯夜游avant
- 2022-08-04 21:01:082589parcourir
Cet article vous guidera à travers le bouillonnement et la capture d'événements, et vous permettra de comprendre la méthode de recherche de cible d'événement js (bullage et capture), le proxy d'événement, la différence entre e.target et e.currentTarget, empêcher le bouillonnement et la capture et annuler le événement par défaut, j'espère que cela aidera tout le monde !
1. Comment trouver la cible de l'événement EventTarget (bullage et capture)
La cible de l'événement fait référence à l'élément auquel l'événement est lié, elemet.addEventListener('click',function(){}) elemet ici C'est la cible de l'événement.
Bubbling et capture :
-
Événements de bulle :
- les événements sont exécutés de manière ascendante par défaut. En prenant les événements de clic comme exemple, lorsque nous cliquons sur un élément enfant, des événements de clic sur l'élément parent et au-dessus peuvent également être déclenchés. L'ordre d'exécution de l'événement va de bas en haut, ce qui correspond à l'événement bouillonnant.
-
Capture d'événement :
- Bien sûr, il existe une autre méthode d'exécution qui est la méthode de capture descendante. En prenant toujours l'événement click comme exemple, lorsqu'un élément enfant est lié à un événement click et que nous cliquons sur l'élément enfant, les événements click liés à l'élément parent et aux éléments supérieurs seront également exécutés. L'ordre d'exécution des événements va de haut en bas, ce qui correspond à l'événement de capture.
addEventListener(type,listener,useCapture) Analyse simple :
- type : type d'événement
- listener : fonction de traitement d'écoute d'événement
- useCapture : définir la méthode de recherche d'événement
- false, événement bling-bling (Valeur par défaut)
- true, événement de capture
paramètre useCapture analyse :
Point clé ! ! L'ensemble du processus de déclenchement d'une cible d'événement est divisé en deux étapes (capture et bouillonnement). useCapture Cette valeur détermine à quelle étape le déclenchement de la cible de l'événement est exécuté.
Analyse séquentielle du bouillonnement et de la capture :
- Comme le montre la figure, la capture d'événement est d'abord suivie du bouillonnement d'événement. La capture des événements s'effectue de haut en bas (les événements externes sont déclenchés en premier) et la propagation des événements se fait de bas en haut (les événements internes sont déclenchés en premier).
- Le processus de capture va du non spécifique au spécifique, et le processus de bouillonnement va du spécifique au non spécifique.
- Bien qu'il s'agisse de
capturer d'abord, les événements bouillonnants sont la méthode de livraison par défaut. Cela signifie que les événements sont déclenchés par défaut lors de la phase de bouillonnement.捕获优先，但是冒泡事件是传递的默认方式。意思就是事件默认都是在冒泡阶段触发。 重点！！事件目标的查找分为“冒泡”与“捕获”两个阶段，事件目标触发的顺序取决于在哪个阶段。如果嵌套的元素中既有捕获又有冒泡的那么一定是捕获优先，捕获阶段的事件执行完毕再执行冒泡阶段的事件。
代码演示：
<div>
这是div1
<div>
这是div2
<div>这是div3</div>
</div>
</div>
<script>
let div1 = document.getElementById('div1');
let div2 = document.getElementById('div2');
let div3 = document.getElementById('div3');
div1.addEventListener('click',function(){
console.log("这是div1的点击事件");
},false);
div2.addEventListener('click',function(){
console.log("这是div2的点击事件");
},false);
div3.addEventListener('click',function(){
console.log("这是div3的点击事件");
},false);
</script>
当我们点击div3，如下从控制台结果可以看出，这里的事件都是在冒泡阶段执行。
还是点击div3，我们将div1.addEventListener第三个参数改为true，如下可以看出div1最先执行，说明捕获阶段优先于冒泡阶段。
这里看完一定要敲一下，我并没有列举所有的情况，其余的情况留给你们去尝试再总结（能理解上面的就够了，真正编码不会很复杂）。
如上就是我对事件目标查找的两种机制冒泡与捕获理解。
二、事件代理机制（事件委托）
利用事件冒泡完成事件代理机制：
- 列表1
- 列表2
当我们要给如上列表中的li都绑定一个点击事件点击获取li中的内容，一般是利用for遍历元素绑定点击事件。
let lis = document.querySelectorAll('li');
for (let i = 0; i <p>假如我们有1w个 <code>li</code> 节点，使用如上方式就需要绑定1w个事件，这样操非常影响代码性能。所以我们可以利用冒泡机制来解决如上的问题，就是将事件绑定到父元素身上 <code>ul</code> 身上。看如下代码：</p><pre class="brush:php;toolbar:false">
- 列表1
- 列表2
事件对象(e)：无论是addEventListener绑定事件还是直接“.事件名”，事件监听的处理函数中的第一个参数为 事件对象Point ! ! La recherche de cibles d'événement est divisée en deux étapes : "bulle" et "capture". L'ordre dans lequel les cibles d'événement sont déclenchées dépend de l'étape. S'il y a à la fois des captures et des bulles dans les éléments imbriqués, la capture doit avoir la priorité. Une fois les événements de la phase de capture exécutés, les événements de la phase de bouillonnement seront exécutés.
<div>
这是div1
<div>
这是div2
<div>这是div3</div>
</div>
</div>
<script>
let div1 = document.getElementById('div1');
let div2 = document.getElementById('div2');
let div3 = document.getElementById('div3');
div1.onclick = function (e) {
alert('div1');
}
div2.onclick = function (e) {
e.stopPropagation();
alert('div2');
}
div3.onclick = function (e) {
alert('div3');
}
</script>
🎜Lorsque nous cliquons sur div3, comme le montrent les résultats de la console ci-dessous, les événements ici sont tous exécutés dans la phase de bouillonnement. 🎜🎜🎜🎜Toujours Cliquez sur div3, et nous changeons le troisième paramètre de div1.addEventListener en true. Comme on peut le voir ci-dessous, div1 est exécuté en premier, indiquant que la phase de capture a priorité sur la phase de bouillonnement. 🎜🎜
🎜🎜ici Assurez-vous de le taper après l'avoir lu. Je n'ai pas répertorié toutes les situations. Le reste des situations vous appartient pour essayer de résumer (il suffit de comprendre ce qui précède, et le codage proprement dit ne sera pas très compliqué). 🎜🎜Ce qui précède est ma compréhension des deux mécanismes de recherche de cibles d'événements, bulle et capture. 🎜🎜2. Mécanisme de proxy d'événement (délégation d'événement)🎜🎜🎜🎜Utilisez le bouillonnement d'événement pour compléter le mécanisme de proxy d'événement :🎜🎜🎜
<div>
这是div1
<div>
这是div2
<div>这是div3</div>
</div>
</div>
<script>
let div1 = document.getElementById('div1');
let div2 = document.getElementById('div2');
let div3 = document.getElementById('div3');
div1.addEventListener('click',function(e){
console.log('div1');
},true);
div2.addEventListener('click',function(e){
console.log('div2');
e.stopPropagation();
},true);
div3.addEventListener('click',function(e){
console.log('div3');
},true);
</script>
🎜Quand nous voulons lier un clic à li dans la liste ci-dessus L'événement click obtient le contenu dans li. Généralement, for est utilisé pour parcourir l'élément pour lier l'événement click. 🎜div.addEventListener('click',function(e){
if(event.target == event.currentTarget){
//需要执行的代码
}
});🎜Si nous avons 10 000 nœuds li, nous devons lier 10 000 événements en utilisant la méthode ci-dessus, ce qui affectera grandement les performances du code. Nous pouvons donc utiliser le mécanisme de bouillonnement pour résoudre le problème ci-dessus, qui consiste à lier l'événement à l'élément parent ul. Regardez le code suivant : 🎜
<a>点击跳转</a>
<script>
let a = document.querySelector('a');
addEventListener('click',function(e){
e.preventDefault();
})
</script>
🎜🎜Objet événement (e) : qu'il s'agisse d'un événement de liaison addEventListener ou d'un ".event name" direct, le premier paramètre de la fonction de traitement d'écoute d'événement est objet événement. L'objet événement contient des informations détaillées sur l'événement. Par exemple, cet objet contient : 🎜Source de l'événement, identifiant de l'événement, type d'événement, élément lié à l'événement, position du clic lorsque l'événement est déclenché, etc. 🎜L'e.target peut accéder à la source de l'événement, qui est la source qui a déclenché cet événement. 🎜🎜既然能给父元素绑定事件监听，又能拿到触发的源头。所以我们通过“e.target”+“冒泡机制”就可以减少事件的绑定，能提升不少的性能。
依次点击列表1与列表2：
总结：通过上面代码我们知道了“事件对象”+“冒泡机制”可以实现事件委托。事件委托就是当事件触发时，通过事件冒泡(或事件捕获)把要做的事委托给父元素来处理。
三、e.target与e.currentTarget的区别：
- e.target 指向的是触发事件监听的对象（事件源）。
- e.currentTarget 指向添加监听事件的对象（绑定事件的dom元素）。
四、阻止冒泡与捕获
为什么要阻止冒泡或捕获？
点击当前元素时以冒泡的方式传递事件如果上级元素绑定了同样的事件，就会因为冒泡传递导致触发。同样捕获的过程中，也会触发与当前元素绑定的相同事件的上级。只是触发顺序不同。
事件代理一般使用的冒泡，当然阻止冒泡一般不会影响事件代理，因为顺序问题只会影响捕获事件，这也是为什么都使用冒泡实现事件代理机制。
阻止冒泡或捕获的方法
这里我不考虑兼容性问题，我相信不久将来兼容性可以得到解决。
阻止冒泡w3c推介的方法是event.stopPropagation()，顾名思义停止传播，他是事件对象（event）的方法，此方法是阻止目标元素的继续冒泡（或捕获）。
event.stopPropagation()阻止冒泡：
<div>
这是div1
<div>
这是div2
<div>这是div3</div>
</div>
</div>
<script>
let div1 = document.getElementById('div1');
let div2 = document.getElementById('div2');
let div3 = document.getElementById('div3');
div1.onclick = function (e) {
alert('div1');
}
div2.onclick = function (e) {
e.stopPropagation();
alert('div2');
}
div3.onclick = function (e) {
alert('div3');
}
</script>
上面代码默认都是冒泡事件，我们点击div3会依次弹出’div3’与’div2’，为什么没有弹出’div1’这是因为e.stopPropagation();阻止了目标元素的事件继续冒泡到上级。如果每个点击事件都加上了e.topPropagation就不会出现多弹窗的情况。
event.stopPropagation()阻止捕获：
<div>
这是div1
<div>
这是div2
<div>这是div3</div>
</div>
</div>
<script>
let div1 = document.getElementById('div1');
let div2 = document.getElementById('div2');
let div3 = document.getElementById('div3');
div1.addEventListener('click',function(e){
console.log('div1');
},true);
div2.addEventListener('click',function(e){
console.log('div2');
e.stopPropagation();
},true);
div3.addEventListener('click',function(e){
console.log('div3');
},true);
</script>
当我们点击div2会依次弹出’div1’与’div2’，这也是因为在div2事件中我们设置了e.stopPropagation()，阻塞了目标元素的事件继续向下捕获。
event.target == event.currentTarget：
div.addEventListener('click',function(e){
if(event.target == event.currentTarget){
//需要执行的代码
}
});
此方法不过多解释用的不多，如果你理解了上面的内容，这个方法也能理解。
五、补充:为什么要使用addEventListener()
从上面代码不难看出addEventListener()有如下的优点（以下是MDN的原话）：
addEventListener() 是 W3C DOM 规范中提供的注册事件监听器的方法。它的优点包括：
- 它允许给一个事件注册多个监听器。 特别是在使用AJAX库，JavaScript模块，或其他需要第三方库/插件的代码。
- 它提供了一种更精细的手段控制
listener的触发阶段。（即可以选择捕获或者冒泡）。 - 它对任何 DOM 元素都是有效的，而不仅仅只对 HTML 元素有效。
六、取消默认事件
event.preventDefault()
默认事件指的是<a href=""></a>，<input type="submit"> 标签这类有默认行为的标签，通过点击可以跳转或提交。我们给这类标签绑定一个点击事件，设置事件对象的preventDefault()方法就可以阻止默认事件的发生。
<a>点击跳转</a>
<script>
let a = document.querySelector('a');
addEventListener('click',function(e){
e.preventDefault();
})
</script>
那么我们如何才能知道一个标签是否有默认事件，打印事件对象的cancelable属性，通过事件执行就可以知道e.cancelable的结果，如果为false表示有默认事件，true则没有。
return false;
事件执行函数中设置return false取消默认事件，但此方法不常用。
【相关推荐：javascript学习教程】
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!
Articles Liés
Voir plus- Parlons brièvement de la méthode objet Math de JavaScript
- Qu'est-ce qu'un constructeur ? Explication détaillée des constructeurs en JavaScript
- Organisation des types d'événements courants en JavaScript
- Analysons ensemble les méthodes de gestion des exceptions JavaScript
- Parlons de la façon d'utiliser la fonction Object() pour créer des objets en JavaScript
- Qu'est-ce que c'est? Une analyse approfondie de cela en JavaScript