前言

对于 JS 而言，对 DOM 的操作是重中之重，可以说是这个语言的灵魂。

以下，简单讲解下事件的冒泡、委派和绑定。

DOM 事件流

• 事件捕获阶段：事件从祖先元素往子元素查找（DOM树结构）（外至内），直到捕获到事件目标 target。在这个过程中，默认情况下，事件相应的监听函数是不会被触发的。＝＝＞addEventListener(event, function, true)

• 事件目标：当到达目标元素之后，执行目标元素该事件相应的处理函数。如果没有绑定监听函数，那就不执行。

• 事件冒泡阶段：事件从事件目标 target 开始，从子元素往冒泡祖先元素冒泡（内至外），直到页面的最上一级标签。==> addEventListener(event, function, false)

冒泡

事件冒泡: 当一个元素上的事件被触发的时候（比如说鼠标点击了一个按钮），同样的事件 将会在那个元素的所有祖先元素中被触发。这一过程被称为事件冒泡；这个事件从原始元素开始一直冒泡到DOM树的最上层。

通俗来讲，冒泡指的是：子元素的事件被触发时，父元素的同样的事件也会被触发。取消冒泡就是取消这种机制。

委派

事件委托，通俗地来讲，就是把一个元素响应事件（click、keydown......）的函数委托到另一个元素。

举例：

与其逐个逐个的绑定相同事件，ie：click 到 <li> 元素上，我们为什么不直接绑定给它的父元素 <ul>呢？！

这样就可以做到，只需绑定一次，就能实现子元素都能用到！

好处：

事件委托是利用了冒泡机制，减少了事件绑定的次数，减少内存消耗，提高性能。

绑定

给dom绑定不同事件，从而进行操作

参考：

冒泡： 事件的传播和事件冒泡

委派： 事件委托

绑定： 事件的绑定和事件对象Event