事件流的简短介绍

前端事件流

1、含义

html和js之间进行交互，了解事件的调用时间先了解事件流

事件流：事件描述的是从页面中接收事件的顺序，DOM2级事件流包括几个阶段。“事件捕获阶段”“处于目标阶段”“事件冒泡阶段”

• 事件捕获：一个事件触发后，从Window对象触发，不断经过下级节点，直至目标节点。在事件到达目标节点之前的过程为捕获阶段，经过的节点有对应触发的事件 — 【事件捕获时(true), 先执行body事件再执行div事件】

• 事件冒泡：事件到达目标节点后，沿着捕获阶段的路线进行原路返回，经过的节点触发对应的事件 — 【事件冒泡(false), 先执行div事件，再执行body事件】

• addEventListener(event，function，useCapture布尔值) //默认为false冒泡，true为捕获

2、addEventListener

addEventListener：DOM2级时间新增的指定事件处理程序的操作。此方法接收的三个参数为：“要处理的时间名”“事件处理程序的函数”“一个布尔值”

• 当布尔值为true时，表示“捕获阶段”调用事件处理程序
• 当布尔值为false时，表示“冒泡阶段”调用事件处理程序

3、让事件先冒泡再捕获

如何实现先冒泡再捕获

• 在w3c标准中正常的执行顺序为：应先捕获再冒泡。
• 现要实现先冒泡再捕获，给一个元素绑定两个addEventListener。其中第三个参数为true(捕获)和false(冒泡)，调整正常的代码顺序，将设置false的监听事件放在设置true的监听事件前面即可。此可使冒泡先执行。