一、DOM事件

1、2002年，W3C发布标准——DOM Level 2 Event Specification

• 从外向内找监听函数，叫事件捕获
• 从内向外找监听函数，叫事件冒泡
• 先捕获、再冒泡，只是可以选择把监听函数放在捕获阶段还是冒泡阶段

2、addEventListener 事件绑定API

• baba.addEventListener('click',fn,bool)
• bool为falsy或不传，fn走冒泡，即当浏览器在冒泡阶段发现baba有监听函数fn，就会调用fn，并提供事件信息（捕获空跑）
• bool为true，fn走捕获（冒泡空跑）
• 如下代码，未传bool，浏览器在冒泡阶段提供事件信息（颜色从内向外逐层变化） （代码截图来自饥人谷课件）

3、小结——W3C事件模型

3.1、先捕获、再冒泡

• 有个特例：只有一个div被监听（不考虑父子同时被监听），fn分别在捕获阶段和冒泡阶段监听click事件，用户点击的元素就是开发者监听的

div.addEventListener('click',f1)
div.addEventListener('click',f2,true)
// 此时是f1先执行，不遵循“先捕获、再冒泡”，谁先监听谁先执行

3.2、e对象

• e对象会被传给所有监听函数
• 事件结束后，e就不存在了 （截图来自饥人谷课件）

3.3、target与currentTarget

• e.target——用户操作的元素
• e.currentTarget——程序员监听的元素
• eg：div>span[文字]，用户点击文字，e.target就是span，e.currentTarget就是div

3.4、捕获不可取消，冒泡可以

• e.stopPrepagation()可中断冒泡，一般用于封装某些独立的组件

3.5、不可阻止默认动作

• 有些事件不能阻止默认动作，如scroll event

1. 搜索英文版MDN
2. Bubbles Yes——该事件是否冒泡，是
3. Cancelable No——开发者是否可以阻止默认动作，否

• 总结：所有冒泡皆可取消，默认动作有的可取消，有的不可取消（与冒泡无关），如click event，Bubbles Yes，Cancelable Yes

3.5.1、如何阻止滚动（scroll事件不可阻止默认动作）

• 因为先有滚动才有滚动事件
• 所以要阻止滚动，可阻止wheel和touchstart的默认动作
• 同时让滚动条为0，CSS代码为::-webkit-scrollbar{width:0!inportant}

二、自定义事件

• 除浏览器的自带事件外，开发者还可自定义一个事件 （截图来自饥人谷课件）

三、事件委托

1. 基本概念

• 把一个或多个元素的响应事件（如click）委托到另一个元素上，一般是委托到其父层
• 原理是利用事件冒泡，用e.target关注真正的事件触发源

2. 给div1里的100个按钮添加点击事件

• 监听这100个按钮的祖先，冒泡时target一下是不是这100个中的一个

div1.addEventListener('click',(e)=>{
  const t=e.target
  if(t.tagName.toLowerCase()==='button'){
    console.log('button被点击了')
    console.log('button内容是'+t.textContent)
  }
})

3. 如何监听目前不存在的元素的点击事件

• 监听祖先，等点击的时候看看是不是我想要监听的元素即可

4. 事件委托的优点

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