一、DOM事件模型

first. DOM 0级事件模型

second. DOM 2级事件模型

DOM level2 事件支持处理多个函数。一般分为三个阶段：

1. 事件捕获阶段：

事件从document一直向下传播到目标元素，依次检查经历过的节点是否绑定了事处监听函数（事件处理程序），如果有则执行，反之不执行

2. 事件处理阶段：

事件达到目标元素，触发元素监听函数

3. 事件冒泡阶段：

与事件捕获恰恰相反，事件冒泡顺序是由内到外进行事件传播，直到document。

二、DOM事件委托（事件代理）

当我们需要对很多元素添加事件的时候，可以通过将事件添加到它们的父节点而将事件委托给父节点来触发处理函数。这主要得益于浏览器的事件冒泡机制。

优点：

减少JS与DOM结点的交互次数，提升性能。
大量减少内存占用，减少事件注册。
新增元素实现动态绑定事件。

实现：

1. addEventListener();

baba.addEventListener("click",fn,(bool))

其中，bool不写代表默认，走冒泡，当浏览器发现baba监听函数，就调用fn，提供相关信息

当bool的值为true，走捕获，当浏览器发现baba监听函数，调用fn，提供相关信息

2. removeEventListener();

baba.removeEventListener("click",fn,(bool))

参数与addEventListener一样，同时注意若移除函数，不要用匿名函数,因为add和remove写一样的匿名函数其实不是值同一个函数，要用变量引用。

.currentTarget和.target的区别:

e.currentTarget指监听事件者

e.target指事件的真正发出者

//当点击我是儿子后  <div class='baba'><div class="erzi">我是儿子</div></div>
baba.addEventListener("click",(e)=>{
    console.log(e.currentTarget);  //打印baba
    console.log(e.target);  //打印erzi
})

如何阻止冒泡?

e.stopPropagation()

DOM事件与事件委托