简述 DOM 事件模型或 DOM 事件机制

什么是DOM

DOM文档对象模型，以根元素开头展开成一颗树，描述了处理网页内容的方法和接口。最根本对象是document（window.document）。

什么是DOM事件？

举例，click就是一个事件，可以在后面绑定函数执行功能。事件可以在文档(Document)结构的任何部分被触发，触发者可以是用户操作，也可以是浏览器本身。事件并不是只是在一处被触发和终止；他们在整个document中流动，拥有它们自己的生命周期。

DOM事件与事件委托

编程接口

点击事件

首先从外到内找监听函数，叫事件捕获 然后从内到外找监听函数，叫冒泡捕获

示意图

addEventListener

事件绑定API

选择器（例：baba yeye 等）.addEventLitener('click',fn,bool) 如果bool不传或者为falsy,就让fn走冒泡，先调用子元素的监听函数 如果bool为ture,就让fn走捕获，先调用父元素的监听函数

target与currentTarget区别

e.target 是用户操作的元素 currentTarget 是程序员监听的元素 举例

复制代码 当用户点击文字 e.target 就是span e.currentTarget就是div

取消冒泡的情况

e.stopPropagation()可以中断冒泡。这票干完就不通知后面的人了，狭义的说即挂在冒泡顺序里的监听函数不被执行。捕获无法取消，因为DOM是一颗树，根一定在的。只有顺着根不断发展。 e.stopPropagation 可以取消冒泡 一般用于封装某些独立的组件 MDN查询 scorr 冒泡是否能被取消 Bubbles 为该事件是否为冒泡 Cancelable 为开发者是否可以取消冒泡

取消滚动

x.addEventListener('wheel', (e)=>{ console.log(2) e.preventDefault() }) 复制代码 更多事件 示例：developer.mozilla.org/zh-CN/docs/…

事件委托 名字挺起来还是挺有意思的,其实理解起来也很简单——父节点嵌套的子节点的触发的事件会通过事件冒泡到达父节点，事件处理程序不直接绑定到子节点，统一由公共父节点进行事件监听。

举例 ：给100个按键添加点击事件

.addEventListener('click', (e) =>{
  const t = e.target
  if(t.tagName.toLowerCase() ==='button'){
    console.log('触发点击事件')
    console.log(t.textContent)
  }
})

依次点击结果为