This article will take you through event bubbling and capturing, and let you understand the js event target search method (bubbling and capturing), event proxy, the difference between e.target and e.currentTarget, preventing bubbling and capturing, Cancel the default event, hope it helps everyone!
Event target refers to the element to which the event is bound, elemet .addEventListener('click',function(){}) The elemet here is the event target.
Bubbling and capturing:
Bubble events:
Capture events:
##addEventListener(type,listener,useCapture) Simple analysis:
Parameter useCapture analysis:
Key point! ! The entire process of triggering an event target is divided into two stages (capturing and bubbling). useCapture This value determines at which stage the triggering of the event target is executed.
Sequence analysis of bubbling and capturing:
, bubbling events are the default method of delivery. This means that events are triggered in the bubbling stage by default.
Point! ! The search for event targets is divided into two stages: "bubble" and "capture". The order in which event targets are triggered depends on which stage. If there are both captures and bubbles in the nested elements, the capture must take priority. After the events in the capture phase are executed, the events in the bubbling phase will be executed.
Code demonstration:
<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>
div1.addEventListener to true. As shown below, div1 is executed first, indicating the capture stage. Prioritizes the bubbling phase.
Bubbles and Capture.
Use event bubbling to complete the event proxy mechanism:
li in the above list. Click to obtain the content in li. Generally, we use for to traverse the elements to bind the click event.
let lis = document.querySelectorAll('li');
for (let i = 0; i If we have 10,000 <p>li<code> nodes, we need to bind 10,000 events using the above method, which greatly affects the code performance. So we can use the bubbling mechanism to solve the above problem, which is to bind the event to the parent element </code>ul<code>. Look at the following code: </code></p><pre class="brush:php;toolbar:false">
Event object (e): Whether it is addEventListener binding event or direct ".event name", the first parameter in the event listening processing function is event Object. The event object contains detailed information about the event. For example, this object contains: Event source, event id, event type, event-bound element, clicked position when the event is triggered, etc. Among them, e.target can access the event source, which is the source of triggering this event.
既然能给父元素绑定事件监听，又能拿到触发的源头。所以我们通过“e.target”+“冒泡机制”就可以减少事件的绑定，能提升不少的性能。
依次点击列表1与列表2：
总结：通过上面代码我们知道了“事件对象”+“冒泡机制”可以实现事件委托。事件委托就是当事件触发时，通过事件冒泡(或事件捕获)把要做的事委托给父元素来处理。
为什么要阻止冒泡或捕获？
点击当前元素时以冒泡的方式传递事件如果上级元素绑定了同样的事件，就会因为冒泡传递导致触发。同样捕获的过程中，也会触发与当前元素绑定的相同事件的上级。只是触发顺序不同。
事件代理一般使用的冒泡，当然阻止冒泡一般不会影响事件代理，因为顺序问题只会影响捕获事件，这也是为什么都使用冒泡实现事件代理机制。
阻止冒泡或捕获的方法
这里我不考虑兼容性问题，我相信不久将来兼容性可以得到解决。
阻止冒泡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 规范中提供的注册事件监听器的方法。它的优点包括：
listener 的触发阶段。（即可以选择捕获或者冒泡）。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学习教程】
The above is the detailed content of Learn more about event bubbling and capturing in JavaScript. For more information, please follow other related articles on the PHP Chinese website!
![JavaScript core tutorial [DOM BOM operations that JS must know]](https://img.php.cn/upload/course/000/000/041/61c56ae28d02a390.jpg)
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
