【javascript基础——系列3】js中的事件的三个阶段详解-事件冒泡、事件捕获

系列文章

【javascript基础——系列1】前端页面ajax连接后台服务器传输数据

【javascript基础——系列2】前端页面axios连接后台服务器传输数据

【javascript基础——系列3】js中的事件的事件冒泡、事件捕获

【javascript基础——系列4】关于js的数据类型以及判别方法

【javascript基础——系列5】js的defer和async；parsesint；图片压缩

【javascript基础——系列6】常见的5种JS设计模式；发布订阅者模式

【javascript基础——系列7】变量提升函数提升；内存泄漏

【javascript基础——系列8】函数传参传递值还是引用；函数式编程

【javascript基础——系列9】函数防抖与节流

【javascript基础——系列10】js中隐藏元素的几种方法以及代码

【javascript基础——系列11】跨域存在的原因以及解决办法

---

---

一、js事件处理过程的哪三个阶段？

一个事件的处理过程主要有三个阶段：捕获，目标，冒泡；

（1）捕获： 当我们在 DOM 树的某个节点发生了一些操作（例如单击、鼠标移动上去），就会有一个事件发射过去。这个事件从 Window 发出，不断经过下级节点直到触发的目标节点。在到达目标节点之前的过程，就是捕获阶段（Capture Phase）。（ 所有经过的节点，都会触发这个事件。捕获阶段的任务就是建立这个事件传递路线，以便后面冒泡阶段顺着这条路
线返回 Window。 ）

（2）目标阶段：当事件不断的传递直到目标节点的时候 ，最终在目标节点上触发这个事件，就是目标阶段。

（3） 冒泡阶段： 事件冒泡即事件开始时，由最具体的元素接收（也就是事件发生所在的节
点），然后逐级传播到较为不具体的节点（我们平时用的事件绑定就是利用的事件冒泡的原理）

事件捕获阶段	事件目标阶段	事件冒泡阶段
由外向里	最开始选中的那个，但是不一定是最先出现的，根据是那个阶段而定	由里向外

二、事件冒泡

2.1 事件冒泡的作用：

事件冒泡允许多个操作被集中处理（把事件处理器添加到一个父级元素上，避免把事件处理器添加到多个子级元素上），它还可以让你在对象层的不同级别捕获事件。

想象一下现在我们有一个10列、100行的HTML表格，你希望在用户点击表格中的某一单元格的时候做点什么。比如说我有一次就需要让表格中的每一个单元格在被点击的时候变成可编辑状态。如果把事件处理器加到这1000个单元格会产生一个很大的性能问题，并且有可能导致内存泄露甚至是浏览器的崩溃。相反地，使用事件代理的话，你只需要把一个事件处理器添加到table元素上就可以了，这个函数可以把点击事件给截下来，并且判断出是哪个单元格被点击了。如下图所示：

                 / \
--------------| |-----------------
| element1   | |                |
|   ----------- | |-----------     |
|   |element2 | |          |     |
|   -------------------------     |
|        Event BUBBLING           |
-----------------------------------
与事件捕获相反，element2的事件处理器会首先被触发。

2.2 如何阻止事件冒泡：

方法1：event.stopPropagation()

<script>
//上面点击会出现事件冒泡
document.getElementById("hr_three").onclick=function(event){

    event.stopPropagation(); //阻止了事件冒泡,只有弹出自己的"我是最里层"，然后链接到百度
    
}

</script>

---

方法2：return false

2.return false;

   事件处理过程中，阻止了事件冒泡，也阻止了默认行为（比如刚才它就没有执行超链接的跳转）

---

方法3：event.preventDefault

3.event.preventDefault(); 

   如果把它放在头部A标签的click事件中，点击“点击我”。

   会发现它依次弹出：我是最里层---->我是中间层---->我是最外层，但最后却没有跳转到百度

   它的作用是：事件处理过程中，不阻击事件冒泡，但阻击默认行为（它只执行所有弹框，却没有执行超链接跳转）

---

方法4：vue中@click.stop : 阻止事件冒泡

---

2.3 事件委托与事件冒泡

使用事件委托，只需在 DOM 树中尽量最高的层次上添加一个事件处理程序，“事件代理”即是把原本需要绑定在子元素的响应事件（click、keydown…）委托给父元素，让父元素担当事件监听的职务。就比如舍长代领全宿舍的快递的例子。

三、事件捕获

3.1 事件捕获介绍：

事件捕获

                   | |
--------------- | |-----------------
| element1      | |                |
|   -----------    | |-----------     |
|   |element2   \ /          |     |
|   -------------------------     |
|        Event CAPTURING          |
-----------------------------------

看上面箭头的方向，element1的事件处理器首先被触发，然后向下传递到element2

3.2 阻止事件捕获：

码字不易~， 各位看官要是看爽了，可不可以三连走一波，点赞皆有好运！，不点赞也有哈哈哈~~~