1、DOM事件模型

提问：点击hello时，最先调用哪一个函数？

<div class=yeye>
  <div class=baba>
    <div class=erzi>
    hello
    </div>
  </div>
</div>
给3个div分别添加事件监听fnYe/fnBa/fnEr

如果按照从内向外顺序调用函数，叫做事件冒泡
如果按照从外向内顺序调用函数，叫做事件捕获 2002年，W3C发布标准，规定浏览器应同时支持两种调用顺序，首先按照从外向内顺序，然后按照从内向外的顺序，有监听函数就调用，并提供事件信息，没有就跳过。一个事件发生后，会在子元素和父元素之间传播

事件传播机制

事件的传播机制：捕获阶段-目标阶段-冒泡阶段

window ->document ->HTML ->body ->outer ->inner ->center

当一个元素接收到事件的时候，会把他接收到的事件传给自己的父级，一直到window，如果父级没有绑定事件函数，那么就算传递了也不会有什么表现。

截屏2021-12-02 下午4.11.13.png

addEventListener

div1.addEventListener('click',fn,bool)
.stopPropagation //阻止事件冒泡

绑定的方法都是在目标或者冒泡阶段执行

如果bool值不传或者为falsy，fn会在冒泡阶段执行

可以控制在捕获阶段执行

如果bool值为true，fn会在捕获阶段执行

只有一个div被监听（不考虑父子同时被监听），用户点击的元素就是开发者监听的

div.addEventListener('click',f1)
div.addEventListner('click',f2,true)

此时f1先执行，谁先监听谁执行。

把原本需要绑定在子元素上的响应事件（click，keydown）委托给父元素，让父元素担当事件监听的职务。事件代理的原理就是DOM元素的事件冒泡。

<ul id="list">
 <li>item1</li>
 <li>item2</li>
 <li>item3</li>
 ...
 <li>itemx</li>
</ul>

可以在ul上代理所有的click事件