c事件和委托的区别_前端日记—DOM 事件机制和事件委托

DOM事件机制

事件指的就是就是onclick，onmouseover，onmouseout等。

2002年W3C规定了浏览器的事件调用顺序标准，这其中有两个关键术语。

• 事件捕获：简单一点解释事件捕获就是当事件触发时先通知父层，再通知子层 。
• 事件冒泡：即反过来理解，当事件触发时先通知子层，再通知父层。

示意图：

开发者可以自己选择把监听方法放在捕获阶段还是冒泡阶段

事件监听

可以用addEventListener()来实现监听事件

W3C给的标准是addaddEventListener('click',fn,bool)，其中：

• 如果bool不传或为falsy，就让fn走冒泡事件
• 如果bool为true，就让fn走捕获事件

开发者选择fn放在哪边

target 和 currentTarget

区别：

• e.target-用户操作的元素
• e.currentTarget-程序员监听的元素

举例：

• div>span{文字}，用户点击了文字
• e.target 就是 span
• e.currentTarget 就是 div

W3C标准的DOM事件机制

• 过程：先捕获，再冒泡
• e对象被传给所有监听函数
• 在事件结束后，e对象就不存在了
• 捕获不可以取消，但是冒泡可以用e.stopPropagation()中断，浏览器不再往上走

事件委托

通俗地说，事件委托就是把一个元素响应事件的函数，委托到另一个元素上；

通常的做法是：

• 把一个或者一组元素的事件委托到它的父层或者更外层元素上
• 真正绑定事件的是外层元素，当事件响应到需要绑定的元素上时，会通过事件冒泡机制从而触发它外层元素的绑定事件上
• 然后从外层元素上去执行函数

这样做的好处：

• 可以减少内存消耗，减少监听数
• 可以监听动态元素