冒泡事件 & 捕獲事件
阿新 • • 發佈:2022-05-30
事件冒泡&事件捕獲
例如,父元素和子元素都綁定了點選事件,點選了子元素。子元素和父元素都會觸發點選事件。
三個div都綁定了事件,點選最裡面的div事件冒泡:由內到外觸發(內層div事件->中間div事件->外層div事件)
事件捕獲:由外到內觸發(外層div事件->中間div事件->內層div事件)
html&css
<style>
#outside {
width: 300px;
height: 300px;
border: 3px solid red;
}
#middle {
width: 200px;
height: 200px;
border: 3px solid green;
}
#inside {
width: 100px;
height: 100px;
border: 3px solid blue;
}
</style>
<div id="outside">
<div id="middle">
<div id="inside">點這</div>
</div>
</div>
事件冒泡(由內到外)
let outside = document.getElementById('outside')
let middle = document.getElementById('middle')
let inside = document.getElementById('inside')
outside.onclick=function() {
console.log(this.id);
}
middle.onclick=function() {
console.log(this.id);
}
inside.onclick=function() {
console.log(this.id);
}
點選最裡面的div,事件由內到外觸發
事件捕獲(由外到內)
// addEventListener 第三個引數為true是事件捕獲,為false是事件冒泡(預設)
outside.addEventListener('click', fun, true);
middle.addEventListener('click', fun, true);
inside.addEventListener('click', fun, true);
function fun() {
console.log(this.id);
}
點選最裡面的div,事件由外到內觸發
阻止事件冒泡
1)e.stopPropagation()
2)window.event.cancelBubble = true
let outside = document.getElementById('outside')
let middle = document.getElementById('middle')
let inside = document.getElementById('inside')
// 事件冒泡(從內到外) onclick
outside.onclick=function() {
console.log(this.id);
}
middle.onclick=function() {
console.log(this.id);
}
inside.onclick=function(e) {
console.log(this.id);
// 阻止事件冒泡 方法一
e.stopPropagation();
// 方法二
// window.event.cancelBubble = true
}
點選最裡面的div,不再觸發外層div的事件