《DOM事件与事件委托》

DOM 事件模型

先捕获，后冒泡

一个事件发生后，会在子元素和父元素之间传播，传播分三个阶段

1. 捕获阶段：时间从 window 对象自上而下向目标节点传播
2. 目标阶段：真正的目标节点正在处理的阶段
3. 冒泡阶段：事件从目标节点自下而上向 window 对象传播

事件捕获

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

// 填 true
element.addEventListener('click',fn, true)

// 点击 儿子
爷爷.addEventListener('click',()=>{
	console.log('爷爷')
})
爸爸.addEventListener('click',()=>{
	console.log('爸爸')
})
儿子.addEventListener('click',()=>{
	console.log('儿子')
})

// 爷爷
// 爸爸
// 儿子

事件冒泡

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

// 填 false 或 不填
element.addEventListener('click',fn, false)

// 点击 儿子
爷爷.addEventListener('click',()=>{
	console.log('爷爷')
})
爸爸.addEventListener('click',()=>{
	console.log('爸爸')
})
儿子.addEventListener('click',()=>{
	console.log('儿子')
})

// 儿子
// 爸爸
// 爷爷

先捕获看看有没有函数监听，后冒泡看看有没有函数监听，如果有函数那就执行，没有就跳过

特例：

取消冒泡

e.stopPropagation() 可以中断冒泡，浏览器不再向上走

不可阻止默认动作

• MDN 搜索 scroll event（看英文版），看到 Bubbles 和 Cancelable
• Bubbles 的意思是该事件是否冒泡，所有冒泡都可以取消
• Cancelable 的意思是开发者是否可以阻止默认事件，与冒泡无关

可以看到，滚动事件 Cancelable 为 No，不可阻止默认动作

• 阻止 scroll 默认动作没用，因先有滚动才有滚动事件
• 要阻止滚动，可阻止 wheel 和 touchstart 的默认动作
• e.preventDefault()

x.addEventListener('wheel', (e)=>{
  e.preventDefault()
})

事件委托

就是利用事件冒泡的原理，只指定一个事件处理程序，就可以来管理某一类型的所有事件

只需要给父级元素添加事件就好了！

1. 给100个按钮添加点击事件

可以监听这100个按钮的祖先，等冒泡的时候判断 target 是不是这100个按钮中的一个

2. 监听目前不存在的元素的点击事件

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

优点

1. 省监听数（内存）
2. 可以监听动态元素