JavaScript中的事件冒泡与捕获怎么实现

    
        这是div1
        
            这是div2
            这是div3

当我们点击div3，如下从控制台结果可以看出，这里的事件都是在冒泡阶段执行。

还是点击div3，我们将div1.addEventListener第三个参数改为true，如下可以看出div1最先执行，说明捕获阶段优先于冒泡阶段。

这里看完一定要敲一下，我并没有列举所有的情况，其余的情况留给你们去尝试再总结（能理解上面的就够了，真正编码不会很复杂）。

如上就是我对事件目标查找的两种机制冒泡与捕获理解。

二、事件代理机制（事件委托）

利用事件冒泡完成事件代理机制：

    
列表1
    
列表2

当我们要给如上列表中的li都绑定一个点击事件点击获取li中的内容，一般是利用for遍历元素绑定点击事件。

let lis = document.querySelectorAll('li');
for (let i = 0; i < lis.length; i++) {
	lis[i].addEventListener('click', function () {
 		console.log(this.innerHTML);
	});
}

假如我们有1w个 li 节点，使用如上方式就需要绑定1w个事件，这样操非常影响代码性能。所以我们可以利用冒泡机制来解决如上的问题，就是将事件绑定到父元素身上 ul 身上。看如下代码：

    

        
列表1
        
列表2
    
    

事件对象(e)：无论是addEventListener绑定事件还是直接“.事件名”，事件监听的处理函数中的第一个参数为 事件对象 。事件对象包含了这个事件的详细信息，比如这个对象中包含了：事件源，事件id，事件类型，事件绑定的元素，事件触发时点击的位置等等。其中 e.target 就能访问到事件源，就是触发本次事件的源头。

既然能给父元素绑定事件监听，又能拿到触发的源头。所以我们通过“e.target”+“冒泡机制”就可以减少事件的绑定，能提升不少的性能。

依次点击列表1与列表2：

总结：通过上面代码我们知道了“事件对象”+“冒泡机制”可以实现事件委托。事件委托就是当事件触发时，通过事件冒泡(或事件捕获)把要做的事委托给父元素来处理。

三、e.target与e.currentTarget的区别：

• e.target 指向的是触发事件监听的对象（事件源）。

• e.currentTarget 指向添加监听事件的对象（绑定事件的dom元素）。

四、阻止冒泡与捕获

为什么要阻止冒泡或捕获？

点击当前元素时以冒泡的方式传递事件如果上级元素绑定了同样的事件，就会因为冒泡传递导致触发。同样捕获的过程中，也会触发与当前元素绑定的相同事件的上级。只是触发顺序不同。

事件代理一般使用的冒泡，当然阻止冒泡一般不会影响事件代理，因为顺序问题只会影响捕获事件，这也是为什么都使用冒泡实现事件代理机制。

阻止冒泡或捕获的方法

这里我不考虑兼容性问题，我相信不久将来兼容性可以得到解决。

阻止冒泡w3c推介的方法是event.stopPropagation()，顾名思义停止传播，他是事件对象（event）的方法，此方法是阻止目标元素的继续冒泡（或捕获）。

event.stopPropagation()阻止冒泡：

    
        这是div1
        
            这是div2
            这是div3