理解JavaScript的事件流与事件委托机制
最编程
2024-08-07 13:52:32
...
var eleDiv = document.querySelector('#div');
var i = 0;
// 捕获
// 3号事件
document.body.addEventListener('click',function(){
console.log('捕获-阶段3:body')
},{
// 默认值是不使用捕获,即冒泡（这里可以去看addEventListener参数说明）
capture:true
});
// 4号 event.stopPropagation()可以阻止事件的传递（事件流任何阶段都可使用）
eleDiv.addEventListener('click',function(event){
console.log('捕获-阶段4:div')
if(i++ % 2 !== 0) {
event.stopPropagation(); // 阻止事件传递
}
},{
// 默认值是不使用捕获,即冒泡
capture:true
})
// 冒泡
// 7号事件
eleDiv.addEventListener('click',function(){
console.log('捕获-阶段7:div')
},{
// 冒泡(默认值)
capture:false
});
// 8号事件
document.body.addEventListener('click',function(){
console.log('捕获-阶段8:body')
},{
// 冒泡(默认值)
capture:false
})
上一篇： JS里的事件委托是啥？
下一篇： 理解JavaScript中的事件代理机制