DOM事件模型

1. DOM监听事件

• addEventListener()：绑定事件的监听函数
• removeEventListener()：移除事件的监听函数
• dispatchEvent()：触发事件

2. 事件绑定API

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

如果bool不传或为false

就让fn走冒泡，即当浏览器在冒泡阶段发现baba有fn监听函数，就会调用fn,并提供事件信息。

如果bool为true

就让fn走捕获，即当浏览器在捕获阶段发现baba有fn监听函数，就会调用fn,并且提供事件信息。

3. target 与 currentTarget的区别

e.target 用户操作的元素

e.currentTarget 是程序员监听的元素

4. 取消冒泡 e.stopPropagation()

• 捕获是不可取消的，但是冒泡可以取消。
• 所有冒泡皆可取消，默认动作有的可以取消有的不能取消。
• e.stopPropagation()  可以中断冒泡，浏览器不再向上走了。

5. 不可阻止默认动作

有些事件不能阻止默认动作

• MDN搜索scroll event,可以一个表格看到，表格中有Bubbles和Cancelable
• Bubbles的意思是该事件是否冒泡
• Cancelable的意思是开发者是否可以阻止默认事件
• Cancelable与冒泡无关

6. 事件委托

由于事件会在冒泡阶段向上传播到父节点，因此可以把子节点的监听函数定义在父节点上，由父节点的监听函数统一处理多个子元素的事件。这种方法叫做事件的代理（delegation）。

var ul = document.querySelector('ul');

ul.addEventListener('click', function (event) {
  if (event.target.tagName.toLowerCase() === 'li') {
    // some code
  }
});

上面代码中，click事件的监听函数定义在<ul>节点，但是实际上，它处理的是子节点<li>的click事件。这样做的好处是，只要定义一个监听函数，就能处理多个子节点的事件，而不用在每个<li>节点上定义监听函数。而且以后再添加子节点，监听函数依然有效。

总结一下事件代理的优点：

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

注意的是：本章节讲的是DOM的事件，JS只是调用了DOM提供的addEventListener方法，其实JS不支持事件，除非开发者手写一个事件系统。