DOM事件和事件委托

DOM事件

1. 首先先从点击事件开始研究

<div class="爷爷">
    <div class="父亲">
        <div class="儿子">
            文字 
        </div>
    </div>
</div>

给三个div分别添加了事件监听，当点击文字时，最先点击了哪个div，最新按调用哪个事件监听函数？ 点击子元素也同样点击了父元素，相反也是如此

2. 2002年，W3C发布标准

• 规定浏览器应该同时支持两种调用顺序
• 首先按照最外层=>最里层（1->2->3） 顺序看看有没有函数监听
• 然后按照最里层=>最外层（3->2->1） 顺序看看有没有函数监听
• 有监听函数就调用，并提供事件信息，没有就跳过

3. 术语

• 从外向内找监听函数，叫事件捕获
• 从内向外找监听函数，叫事件冒泡
• 开发者可以自己选择把监听函数放在捕获阶段还是冒泡阶段。

4.示意图

addEventListener

1. 事件绑定API

    x.attachEvent('onclick', fn)  // 冒泡（IE 5）
    x.addEventListener('click', fn)  // 捕获（网景）
    x.addEventListener('onclick', fn, bool)

2. 图示

小结

• 先捕获，再冒泡
• 注意e对象被传给所有监听函数，事件结束后，e对象就不存在了

取消冒泡

• 捕获不可以取消，但是冒泡可以e.stopPropagation()可以中断冒泡，浏览器不再向上走。一般用于封装某些独立的组件不可阻止默认动作。
• 有些事件不能阻止默认动作，MDN搜索scroll event，看到Bubbles和Cancelable，Bubbles的意思是该事件是否冒泡，所有冒泡都可取消，Cancelable的意思是开发者是否可以阻止默认事，Cancelable与冒泡无关。

事件委托

1.场景1

• 要给100个按钮添加点击事件，咋办？
  • 监听100个按钮的祖先， 等冒泡的时候判断target是不是这100个按钮中的一个
• 要监听目前不存在的元素的点击事件，咋办？
  • 监听祖先，要点击的时候看看是不是想要监听的元素即可

2. 优点

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

3. 代码

• 问题1
• 问题2
• 封装事件委托
• 如果在button里面加了个span sapn里面放文字