深入了解JavaScript中的事件冒泡与捕获

第深入了解JavaScript中的事件冒泡与捕获参数useCapture解析：

重点！！一个事件目标的触发，整个过程分为两个阶段（捕获与冒泡）。useCapture这个值决定事件目标的触发在哪个阶段执行。

冒泡与捕获的顺序分析：

从图可以看出先事件捕获再事件冒泡。事件捕获就是从上至下（外部事件先触发），事件冒泡就是从下至上（内部事件先触发）。

捕获的过程是从不具体的到具体的，冒泡是从具体的到不具体的。

虽然是捕获优先，但是冒泡事件是传递的默认方式。意思就是事件默认都是在冒泡阶段触发。

重点！！事件目标的查找分为冒泡与捕获两个阶段，事件目标触发的顺序取决于在哪个阶段。如果嵌套的元素中既有捕获又有冒泡的那么一定是捕获优先，捕获阶段的事件执行完毕再执行冒泡阶段的事件。

代码演示：

body

divid=div1

这是div1

divid=div2

这是div2

divid=div3这是div3/div

/div

/div

script

letdiv1=document.getElementById(div1

letdiv2=document.getElementById(div2

letdiv3=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

/body

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

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

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

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

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

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

li列表1/li

li列表2/li

/ul

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

letlis=document.querySelectorAll(li

for(leti=0;ilis.length;i++){

lis[i].addEventListener(click,function(){

console.log(this.innerHTML);

}

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

body

li列表1/li

li列表2/li

/ul

script

letul=document.querySelector(ul

//我们可以通过事件对象（e）中的target属性可以访问到事件源（也就事件的触发元素）

ul.addEventListener(click,function(e){

console.log(e.target.innerHTML);

},false);

/script

/body

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

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

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

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

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

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

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

四、阻止冒泡与捕获

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

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

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

阻止冒泡或捕获的方法

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

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

event.stopPropagation()阻止冒泡：

body

divid=div1

这是div1

divid=div2

这是div2

divid=div3这是div3/div

/div

/div

script

letdiv1=document.getElementById(div1

letdiv2=document.getElementById(div2

letdiv3=document.getElementById(div3

div1.onclick=function(e){

alert(div1

div2.onclick=function(e){

e.stopPropagation();

alert(div2

div3.onclick=function(e){

alert(div3

/script

/body

上面代码默认都是冒泡事件，我们点击div3会依次弹出div3与div2，为什么没有弹出div1这是因为e.stopPropagation();阻止了目标元素的事件继续冒泡到上级。如果每个点击事件都加上了e.topPropagation就不会出现多弹窗的情况。

event.stopPropagation()阻止捕获：

body

divid=div1

这是div1

divid=div2

这是div2

divid=div3这是div3/div

/div

/div

script

letdiv1=document.getElementById(div1

letdiv2=document.getElementById(div2

letdiv3=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

/body

当我们点击div2会依次弹出div1与div2，这也是因为在div2事件中我们设置了e.stopPropagation()，阻塞了目标元素的事件继续向下捕获。

event.target==event.currentTarget：

div.addEventListener(click,function(e){

if(event.target==event.currentTarget){

//需要执行的代码

});

此方法不过多解释用的不多，如果你理解了上面的内容，这个方法也能理解。

五、补充:为什么要使用addEventListener()

从上面代码不难看出addEventListener()有如下的优点（以下是MDN的原话）：

addEventListener()是W3CDOM规范中提供的注册事件监听器的方法。它的优点包括：

它允许给一个事件注册多个监听器。特别是在使用AJAX库，JavaScript模块，或其他需要第三方库/插件的代码。

它提供了一种更精细的手段控制listener的触发阶段。（即可以选择捕获或者冒泡）。

它对任何DOM元素都是有效的，而不仅仅只对HTML元素有效。

六、取消默认事件

event.preventDefault()

默认事件指的是ahref=，inputtype=submit标签这类有默认行为的标签，通过点击可以跳转或提交。我们给这类标签绑定一个点击事件，设置事件对象的preventDefault()方法就可以阻止默认事件的发生。

body

ahref=https://www.bAI点击跳转/a

script

leta=document.querySelector(a