前端中的事件流

前端中的事件流

HTML 中与 javascript 交互是通过事件驱动来实现的，例如鼠标点击事件 onclick、页面 的滚动事件 onscroll 等等，可以向文档或者文档中的元素添加事件侦听器来预订事件。 想要知道这些事件是在什么时候进行调用的，就需要了解一下“事件流”的概念。

JS事件流模型

事件捕获Event Capturing是一种从上而下的传播方式，以click事件为例，其会从最外层根节向内传播到达点击的节点，为从最外层节点逐渐向内传播直到目标节点的方式。 事件冒泡Event Bubbling是一种从下往上的传播方式，同样以click事件为例，事件最开始由点击的节点，然后逐渐向上传播直至最高层节点。

DOM0级模型

也称为原始事件模型，这种方式较为简单且兼容所有浏览器，但是却将界面与逻辑耦合在一起，可维护性差。

IE事件模型

IE8及之前的版本是不支持捕获事件的，IE事件模型共有两个过程: 事件处理阶段target phase，事件到达目标元素, 触发目标元素的监听事件。 事件冒泡阶段bubbling phase事件从目标元素冒泡到document，依次执行经过的节点绑定的事件。

DOM2级模型（）

什么是事件流：事件流描述的是从页面中接收事件的顺序,DOM2 级事件流包括下面几个 阶段。

• 事件捕获阶段
• 处于目标阶段
• 事件冒泡阶段

addEventListener：addEventListener 是 DOM2 级事件新增的指定事件处理程序的操作， 这个方法接收 3 个参数：要处理的事件名、作为事件处理程序的函数和一个布尔值。最后这个布尔值参数如果是 true，表示在捕获阶段调用事件处理程序；如果是 false，表示 在冒泡阶段调用事件处理程序。