JS的事件流和事件委托

事件流

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

事件流：事件流描述的是从页面中接收事件的顺序,DOM2 级

事件流包括下面几个阶段：

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

事件委托

简介：

事件委托指的是，不在事件的发生地（直接 dom）上设置监听函数，而是在其父元素上设置监听函数，通过事件冒泡，父元素可以监听到子元素上事件的触发，通过判断事件发生元素 DOM 的类型，来做出不同的响应。

举例：

最经典的就是 ul 和 li 标签的事件监听，比如我们在添加事件时候，采用事件委托机制，不会在 li 标签上直接添加，而是在
ul 父元素上添加。

好处：

比较合适动态元素的绑定，新添加的子元素也会有监听函数，
也可以有事件触发机制。