10-20 02:02 阅读 262

关注

DOM事件和事件委托

DOM事件

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

<div class="爷爷">     <div class="父亲">         <div class="儿子">             文字          </div>     </div> </div> 复制代码

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

1. 2002年，W3C发布标准

• 规定浏览器应该同时支持两种调用顺序

• 首先按照最外层=>最里层（1->2->3） 顺序看看有没有函数监听

• 然后按照最里层=>最外层（3->2->1） 顺序看看有没有函数监听

• 有监听函数就调用，并提供事件信息，没有就跳过

1. 术语

• 从外向内找监听函数，叫事件捕获

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

• 开发者可以自己选择把监听函数放在捕获阶段还是冒泡阶段。

4.示意图

addEventListener

1. 事件绑定API

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

1. 图示

小结

• 先捕获，再冒泡

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

取消冒泡

• 捕获不可以取消，但是冒泡可以e.stopPropagation()可以中断冒泡，浏览器不再向上走。一般用于封装某些独立的组件不可阻止默认动作。

• 有些事件不能阻止默认动作，MDN搜索scroll event，看到Bubbles和Cancelable，Bubbles的意思是该事件是否冒泡，所有冒泡都可取消，Cancelable的意思是开发者是否可以阻止默认事，Cancelable与冒泡无关。

事件委托

1.场景1

• 要给100个按钮添加点击事件，咋办？

• 监听100个按钮的祖先， 等冒泡的时候判断target是不是这100个按钮中的一个

• 要监听目前不存在的元素的点击事件，咋办？

• 监听祖先，要点击的时候看看是不是想要监听的元素即可

1. 优点

• 省监听数（内存）

• 可以监听动态元素

1. 代码

• 问题1

• 问题2

• 封装事件委托

• 如果在button里面加了个span sapn里面放文字

作者：拾柒17
链接：https://juejin.cn/post/7020967927075569700