本篇文章帶大家了解下事件冒泡與捕獲，一次搞懂js事件目標查找方式（冒泡與捕獲）、事件代理、e.target與e.currentTarget的區別、阻止冒泡與捕獲、取消預設事件，希望對大家有幫助！
事件目標指的是綁定事件的元素，elemet .addEventListener('click',function(){}) 這裡的elemet 就是事件目標。
冒泡與捕獲：
#冒泡事件：
擷取事件：
##type：事件類型 listener：事件監聽處理函數 useCapture：設定事件查找方式
false，冒泡事件（預設值）true，擷取事件
參數useCapture解析：
冒泡與捕獲的順序分析：捕獲的過程是從不具體的到具體的，冒泡是從具體的到不具體的。 雖然是
擷取優先，但是冒泡事件是傳遞的預設方式。意思就是事件預設都是在冒泡階段觸發。
<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，我們將
這裡看完一定要敲一下，我並沒有列舉所有的情況，其餘的情況留給你們去嘗試再總結（能理解上面的就夠了，真正編碼不會很複雜）。
如上就是我對事件目標查找的兩個機制冒泡與捕獲
二、事件代理機制（事件委託）
<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"></pre><div class="contentsignin">登入後複製</div></div>
<ul>
<li>列表1</li>
<li>列表2</li>
</ul>當我們要給如上列表中的li都綁定一個點擊事件點擊獲取li中的內容，一般是利用for遍歷元素綁定點擊事件。
let lis = document.querySelectorAll('li');
for (let i = 0; i 假如我們有1w個 ###li### 節點，使用如上方式就需要綁定1w個事件，這樣操非常影響程式碼效能。所以我們可以利用冒泡機制來解決如上的問題，就是將事件綁定到父元素身上 ###ul### 身上。看如下程式碼：###<pre class="brush:php;toolbar:false">
既然能给父元素绑定事件监听，又能拿到触发的源头。所以我们通过“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学习教程】
以上是深入了解JavaScript中的事件冒泡與捕獲的詳細內容。更多資訊請關注PHP中文網其他相關文章！
