1.导火索

代码演示

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

分别给三个div 添加事件监听函数 fn1-fn2-fn3

第一个问题：点击文字，算点击了谁？

答案：都算。

第二个问题：点击文字，先调用那个函数？

答案：都行。

IE5认为先调用fn3,网景认为先调用fn1矛盾产生了~

2.捕获和冒泡

从外向里找监听函数 叫做事件捕获

从内向外 找监听函数 叫做 事件冒泡

2002年 “和事佬” W3C 颁布标准 同时支持两种方式用函数。首先，从外到里，再从里向外。如果有监听函数就调用，提供事件信息，没有就跳过。

优化代码：就是将重复的代码用函数表示

用图说话

3.事件委托

“大中介”

好处：

• 省监听的内存

• 可以监听动态元素

举个栗子： 假如你要去西溪阿里工作了，但是你的住处还没有着落，自己找房子比较浪费时间，而且没有什么比较优质的房源，此时你为了更好更快的找到自己心仪的住处,果断拿起电话打给了小花（小花是一名房屋中介的漂亮小姐姐），经过一番房源的筛选，为你找到了合适的房子。

实际用处：

（1）给n个按钮添加点击事件

监听这N个按钮的祖宗，等到冒泡的时候判断target是不是这N个里的其中一个。

（2）监听目前还不存在的元素点击事件

监听祖宗，等点击的时候看看是不是我想要的那个。

总结：

本文主要浅析了 冒泡和捕获的定义，以及用途，以及事件委托的概念。