JS事件冒泡与事件捕获

JS的事件冒泡与事件捕获

在了解内容之前，我们首先得知道什么是事件冒泡/捕获，为什么会有冒泡/捕获？

当你触发一个事件时，我们发现，浏览器并非直接执行该事件，电脑不是人脑，它无法判断你到底触发了哪个元素的事件。因此，计算机在执行代码时，会在整个浏览器上查找你到底触发了哪些事件，并将它们一一记下，然后依次执行。

那么问题来了，浏览器在查找事件时是按照什么样的顺序，又是怎么记忆的？

这里就牵扯到了事件的捕获与冒泡。

这里拿点击事件来举例，假设有三个div，分别是：div1，div2，div3（如图所示）。
div3在最外边，里边依次是div2，div1。
也就是说，div3套着div2，div2套着div1。
当你点击div1的时候，首先会触发事件捕获，然后是事件冒泡。最后根据冒泡依次执行事件。

对于事件捕获与冒泡的理解：

当你盯着电脑屏幕时，想象自己是一条闲鱼，而电脑屏幕就是冬天千里冰封的湖泊，唯有屏幕这一个缺口，你在水里悠闲的练习游泳，这个时候你突然看到有几个捕鱼人拿着鱼叉来到了这个缺口处。

你本能的提起了精神，全神贯注的注意着鱼叉。捕鱼人猛然将鱼叉抛了过来，你漂亮的一个急停，晃开了鱼叉，并吐出了一个泡泡挑衅，泡泡越来越大，直至飘出水面，然后你潇洒地离开了。

捕鱼人就相当于浏览器，它用鱼叉插你的过程就是捕获，而你躲闪成功并吐了个泡泡挑衅就是冒泡。

当你触发了一个事件的时候，浏览器里的捕鱼人就会开始插你，他会依次地记住要捕到你都需要经过哪些障碍（比如水，海藻，漂浮在水上的杂物等），然后你吐了一个泡泡，也会依次经过这些障碍。而你吐的泡泡经过的“障碍”就是事件的执行顺序。

举个例子：
假设有上边三个div
div1.onclick = function(){
console.log(“div1”)
}
div2.onclick = function(){
console.log(“div2”)
}
div3.onclick = function(){
console.log(“div3”)
}

当你点击div1时，控制台中打印的结果依次是div1，div2，div3
当你点击div2时，控制台中打印的结果依次是div2，div3
当你点击div3时，控制台中打印的结果就是div3

正常的事件执行顺序都是这样，那么，有什么办法可以让事件在捕获的时候就触发呢？

这个时候，我们就引出了一个新的东西，addEventListener（添加事件监听），它会在你触发事件时，监听（观察）着整个事件状态（捕获/冒泡）。它有三个参数，第一个是事件名（注意这里的事件名一定要去掉on），第二个是事件处理函数，第三个可以理解为是否捕获时触发事件（true为是，false为否，默认都为false）。

下面来看一个例子：
还是上边的三个div
div1.addEventListener(“click”,function(){
console.log(“div1”)
},true)
div2.addEventListener(“click”,function(){
console.log(“div2”)
},true)
div3.addEventListener(“click”,function(){
console.log(“div3”)
},true)

这里给第三个参数为true，不给参数或参数为false时打印结果与上述例子一样。
当前情况下，
当你点击div1时，控制台中打印的结果依次是div3，div2，div1（事件在捕获阶段触发）。
当你点击div2时，控制台中打印的结果依次是div3，div2（事件在捕获阶段触发）。
当你点击div3时，控制台中打印的结果就是div3。

既然事件的触发会传递，那么当我点击div1时，如何在控制台中只打印出div1？

这里就要用到事件源，那么什么是事件源呢？

简单的说就是每一个元素在绑定一个事件时都会自带一个事件对象，它有很多属性。事件对象写在事件函数形参的位置，感兴趣的小伙伴可以在事件函数体内直接打印。

事件对象可以随便命名，一般大家都用event或e命名。

有了事件对象后，我们可以直接在事件函数体内输入 事件对象.stopPropagation()

在这里我的事件对象就用event命名，所以我该在事件函数体内输入 event.stopPropagation()

这里需要注意的是，阻止事件传递就是阻止了事件的冒泡，该方法只能用在事件冒泡机制中。

看这个例子：

div1.onclick = function(event){
event.stopPropagation()
console.log(“div1”)
}
div2.onclick = function(){
console.log(“div2”)
}
div3.onclick = function(){
console.log(“div3”)
}

因此，以上代码中，当你点击div1的时候，它在控制台中打印的值就是div1。