DOM捕获阶段和冒泡阶段
DOM事件流:事件流描述的是从页面中接收事件的顺序。(事件传播的过程就是事件流)
包括三个阶段:
**事件捕获阶段:**该阶段的主要作用是捕获截取事件
**处于目标阶段:**一般地,该阶段具有双重范围,即捕获阶段的结束,冒泡阶段的开始;
**事件冒泡阶段:**主要作用是将目标元素绑定事件执行的结果返回给浏览器,处理不同浏览器之间的差异,主要在该阶段完成
捕获 当用户点击按钮,浏览器会从 window 从上向下遍历至用户点击的按钮,逐个触发事件处理函数。
冒泡 浏览器从用户点击的按钮从下往上遍历至 window,逐个触发事件处理函数。
什么是捕获阶段?
当监听事件 addEventLister
的第三个参数为true则处于捕获阶段
**事件捕获阶段:**如果上级有事件,则就会执行先执行上级的事件,再执行点击事件(执行顺序为:爷爷事件——>爸爸事件——>儿子事件)
什么是冒泡阶段?
第三个参数不填或为false
**事件冒泡阶段:**先执行被点击的元素事件,再一层一层执行上级事件(执行顺序为:被点击事件——>爸爸事件——>爷爷事件)
是想执行冒泡阶段和还是捕获阶段?
//IE浏览器是执行冒泡阶段
IE5*:baba.attachEvent('onclick',fn)
//捕获
网景:baba.addEventListener('click';fn)
//现在都使用w3c的标准,由第三个参数控制冒泡还是捕获,不填或者false就是冒泡阶段
W3C:baba.addEventListener('click;,fn,bool)
阻止冒泡的方法
使用 e.stopPropagation()
可以中断冒泡
但是有些事件此方法没有效果,比如说 scroll滚动事件
阻止滚动事件的方法
阻止scroll默认动作没有用,因为有滚动才有滚动事件,要想阻止滚动,需要阻止whell和touchstart的默认动作
禁用滚动事件
元素.addEventListener('whell',(e)=>{
e.preventDefault()
})
此时使用鼠标滚轮没有用了,但是还有滚动条
把滚动条隐藏
::-webkit-scrollbar {
width: 0 !important
}
禁用手机端的滚动事件
元素.addEventListener('touchstart',(e)=>{
e.preventDefault()
})
事件委托
当监听子元素时,事件冒泡会通过目标元素向上传递到父级,直到document
,如果子元素不确定或者动态生成,可以通过监听父元素来取代监听子元素。
function on(eventType, element, selector, fn) {
if (!(element instanceof Element)) {
element = document.querySelector(element)
}
element = addEventListener(eventType, (e) => {
const t = e.target
if (t.matches(selector)) {
fn(e)
}
})
}
on('click', '#div1', 'button', () => {
console.log('buton被点击了')
})
target与currentTarget
target与currentTarget
e 会在事件结束之后自动消亡,如果在setTimeout定时操作里使用e,则会报错:如下代码则会报错
x1.addEventListener('click', (e) => {
setTimeout(() => {
e.currentTarget.classList.remove('x')
}, 1000)
})
解决方法:就是把e记下来
x1.addEventListener('click', (e) => {
const t = e.currentTarget
setTimeout(() => {
t.classList.remove('x')
}, 1000)
})
target是被操作(被点击)的元素
currentTarget是程序员监听的元素
欢迎关注公众号:oldCode
后台回复:js思维导图
即可获取js的思维导图知识点
学习的时光总是短暂,又到了时候说拜拜
欢迎关注公众号 oldCode
获取新鲜教程资料