1.DOM事件模型

DOM支持两种事件模型：

• 捕获型模型
• 冒泡型模型

先看下面的代码

<div class=爷爷>
  <div class=爸爸>
    <div class=儿子>
    文字
    </div>
  </div>
</div>

给三个div分别添加事件监听fnYe/fnBa/fnEr

点击文字，最先调用哪个函数

• 都行，可能先fnYe也可能先fnEr

2002年，W3C发布标准

• 文档名为DOM Level 2 Events Specification
• 规定浏览器应该同时支持两种调用顺序
• 首先按从上到下的顺序看是否有函数监听（先从window，再到document，然后是html标签，然后是body标签，然后按照普通的html结构一层一层往下传，最后到达目的标签）
• 然后按从下到上的顺序看有没有函数监听
• 有监听函数就调用，并提供事件信息，没有就跳过

!!术语!!

• 从外到内找监听函数，叫事件捕获
• 从内到外找监听函数，叫事件冒泡

示意图

2. DOM事件委托（事件代理）

对“事件处理程序过多”的问题的解决方案就是事件委托。事件委托就是利用事件冒泡，只指定一个事件处理程序，就可以管理某一类型的所有事件。

优点：

• 省监听数（即是省内存）
• 可以监听动态元素

资料来源：饥人谷