DOM 事件及事件委托

DOM 事件模型

某一个元素有父元素，它的父元素还有父元素，它们都有监听事件，那么按什么顺序触发呢？

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

2002年，W3C发布标准

原文文档，很长很难看

首先从外向内找监听函数，然后从内向外找监听函数

• 从外向内：事件捕获（Capture）

• 从内向外：事件冒泡（Bubble）

代码实现

开发者可以选择让自己的监听函数在捕获过程中执行，或在冒泡中执行

el.addEventListener('click', fn, bool)

第三个参数有3个值：

1. 不传该参数，默认为false，该函数在冒泡过程中被调用

2. falsy值，该函数在冒泡过程中被调用 （6个falsy值：0，NaN，‘’，null，undefined，document.all)

3. true，该函数在捕获过程中被调用

默认为false，说明还是更倾向于事件冒泡

target v.s. currentTarget

区别

• e.target - 用户操作的元素

• e.currentTarget - 程序员监听的元素

• this 是 e.currentTarget

举例

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

取消冒泡

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

阻止默认事件

MDN 搜索 scroll event，看到 Bubbles 和 Cancelable

Bubbles 的意思是该事件是否冒泡，所有冒泡都可取消

Cancelable 的意思是开发者是否可以阻止默认事件

Cancelable 与冒泡无关

事件委托

事件委托又称事件代理（delegate）

把原本需要绑定在子元素的响应事件绑定到（委托给）祖先节点，让祖先节点担当事件监听的职务

事件代理的原理是DOM元素的事件冒泡，因为在事件传播过程中，逐层冒泡总能被祖先节点捕获

优点：

1. 省监听数（内存）

   • 假设父元素div下有100个span子元素，那么给100个span子元素都添加监听器所需要的资源远大于只给div加1个监听器

2. 可以监听动态元素

   • 即使该元素还没有被创立，那么该元素创立后能立即响应监听，因为监听器在其父元素身上，即新增子元素无需再绑定监听

举例：

一个班级的同学的新学期教材到了，一种方法就是他们一个个去领，另一种方法就是把这件事情委托给班长，让一个人出去拿好所有教材，然后再根据分发给每个同学；即使有同学后面才来，也能立刻到班长那里领到教材

JS 支持事件吗

支持，也不支持。本节课讲的 DOM 事件不属于 JS 的功能，属于浏览器提供的 DOM 的功能，JS 只是调用了 DOM 提供的 addEventListener 而已

封装事件委托

jQuery已经封装了事件委托

jQuery.on()

.on( events [, selector ] [, data ], handler )