《DOM事件模型》基本事件模型在 We b应用程序或Web网站中，可以通过使用者操作或系统的事件，达到相应的响应。而在

基本事件模型

在 We b应用程序或Web网站中，可以通过使用者操作或系统的事件，达到相应的响应。而在 JavaScript 中，事件在未得到标准化之前，各浏览器就有一个事件模型 —— 基本事件模型（Basic Event Model）。

事件是用户或者浏览器自己执行的某种动作，是文档或者浏览器发生的一些交互瞬间，比如点击（click）按钮等，这里的click就是事件的名称。JS 与 html 之间的交互是通过事件实现的，DOM 支持大量的事件。

事件捕获

事件捕获是由 Netscape 浏览器开发团队提出的，他们主张事件一般是由 window 开始逐级向内传播，每一级的节点上都会发生，直到到达最具体的节点 (可以这样理解，跟抓捕犯人一样从最外层包围开始，一步一步向内逮捕）。

src=http___wx2.sinaimg.cn_bmiddle_cf652d2bgy1fcjypssc4dj20k00k077c.jpg&refer=http___wx2.sinaimg.jpg

从外到内找监听函数，叫事件捕获。

事件冒泡

事件冒泡是 IE 的事件流，事件是由最具体的元素接收，然后逐级向上传播，在每一级的节点上都会发生，直到传播到 document 对象，向 Chrome 这样的浏览器会冒泡到 window 对象，就是这么有意思冒泡，和捕获完全是相反的。(方便理解，逮捕后犯人想要越狱时，便要从最里面一层层的突围出去，这就很冒泡。)

src=http___inews.gtimg.com_newsapp_match_0_10658095357_0.jpg&refer=http___inews.gtimg.jpg

从内向外找监听函数，叫事件冒泡

DOM 事件流

这里规定的事件流有三个阶段：事件捕获阶段，目标阶段，事件冒泡阶段。

执行时机

浏览器在调用两种事件顺序的时候，往往总是会先调用事件捕获，再调用事件冒泡，

通俗一点来说就是一个事件被触发时，浏览器会自动从用户操作标签外的最上级标签逐渐向里检查是否有相同事件，如果有则触发，如果没有则继续向下检查知道用户操作的标签，这过程称为捕获

，此时浏览器会继续由用户操作标签继续向是上级标签检查，如果有相同事件则触发，如果没有则继续向上检查直到最上级元素为止，此过程称为冒泡。（有监听函数就执行，并提供事件信息，没有就跳过）

屏幕截图 2021-06-08 215220.png

一组简单代码实现捕获和冒泡

三种实例方法

addEventListener：绑定事件的监听函数
removeEventListener：移除事件的监听函数

dispatchEvent：触发事件

const level1 = document.querySelector('.level1')
const level2 = document.querySelector('.level2')
const level3 = document.querySelector('.level3')
const level4 = document.querySelector('.level4')
const level5 = document.querySelector('.level5')
const level6 = document.querySelector('.level6')
const level7 = document.querySelector('.level7')
 let n = 1
     const remove = (x)=>{
     const t = x.currentTarget
     setTimeout(()=>{  
     t.classList.remove('x')
},n*1000)
 n+=1
} //逮捕 捕获
   const add = (x)=>{
   const t = x.currentTarget
   setTimeout(()=>{  
   t.classList.add('x')
},n*1000)
n+=1
} // 冒泡
level1.addEventListener('click', remove,true)
level1.addEventListener('click',add)
level2.addEventListener('click', remove ,true)
level2.addEventListener('click',add)
level3.addEventListener('click', remove,true)
level3.addEventListener('click',add)
level4.addEventListener('click', remove,true)
level4.addEventListener('click',add)
level5.addEventListener('click', remove,true)
level5.addEventListener('click',add)
level6.addEventListener('click', remove,true)
level6.addEventListener('click',add)
level7.addEventListener('click', remove,true)
level7.addEventListener('click',add)

取消冒泡

冒泡是可以被取消的，但是捕获则不可以被取消

e.stopPropagation() 可以中断冒泡，浏览器不会再往上走.(这样理解，犯人越狱时突然收到信号，有内鬼终止交易，这是会立马停止不会再往后进行从而停止冒泡.)

小小总结

target 和 currentTaget ：一个是用户点击的，一个是开发者监听的。
取消冒泡： e.stopPropagation()
事件特性： Bubbles 表示是否冒泡. cancelable ：是否支持开发者取消冒泡 .如scroll不支持取消冒泡
如何禁止滚动：取消特定元素的 wheel 和 touchstart 的默认动作

《DOM事件模型》