事件捕获
事件流由document 向下扩散到目标对象的过程。
事件冒泡
事件流由目标对象向上扩散到document 的过程。
浏览器事件流过程：浏览器先执行事件捕获，再执行事件冒泡。
addEventListener('事件名称',callback,第三个参数)
第三个参数为布尔值，false表示，事件冒泡阶段触发。true，表示事件捕获阶段触发，默认为false
<!DOCTYPE html>
<html lang="en">
<style>
div{
width: 100%;
height: 300px;
background: red;
}
body{
width: 100%;
height: 400px;
background: black;
}
</style>
<body id="body">
<div id="div">
<button id="btn">son</button>
</div>
</body>
<script>
const btn = document.querySelector('#btn');
const div = document.querySelector('#div');
const body = document.querySelector('#body')
btn.addEventListener('click',()=>{
console.log('btn')
},false)
div.addEventListener('click',()=>{
console.log('div')
})
body.addEventListener('click',()=>{
console.log('body')
},true)
// body btn div
</script>
</html>
网友评论