一个例子弄懂事件冒泡和事件捕获
程序员文章站
2022-05-06 09:11:19
...
先看一张图
先看这张图，然后我们用例子来理解。
事件冒泡
事件按照从最特定的事件目标到最不特定的事件目标(document对象)的顺序触发。
事件冒泡会从当前触发的事件目标一级一级往上传递，依次触发，直到document为止。
事件冒泡例子
层级关系：body>div>p 给body，div,p分别绑定点击事件，console.log()出body,div,p;
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>事件冒泡</title>
<style>
body{
background-color: red;
}
div {
width: 500px;
height: 500px;
background-color: aqua;
}
p {
width: 100px;
height: 100px;
background-color: royalblue;
}
</style>
<script>
window.onload = function(){
document.getElementById('body').addEventListener('click',body,false)
document.getElementById('div').addEventListener('click',div,false)
document.getElementById('p').addEventListener('click',p,false)
function body() {
console.log('body')
}
function div() {
console.log('body')
}
function p() {
console.log('p')
}
}
</script>
</head>
<body id="body">
<div id="div">
<p id="p"></p>
</div>
</body>
</html>
点击p时打印结果如下：
由结果可以看出：事件冒泡会从当前触发的事件目标一级一级往上传递，依次触发，直到document为止。
事件捕获
捕获型事件(event capturing)：事件从最不精确的对象(document 对象)开始触发，然后到最精确(也可以在窗口级别捕获事件，不过必须由开发人员特别指定)
事件捕获会从document开始触发，一级一级往下传递，依次触发，直到真正事件目标为止。
这时将addEventListener的第三个参数改为true 再次点击：
document.getElementById('body').addEventListener('click',body,true)
document.getElementById('div').addEventListener('click',div,true)
document.getElementById('p').addEventListener('click',p,true)
结果如图：
由此可以得出：事件捕获会从document开始触发，一级一级往下传递，依次触发，直到真正事件目标为止。
上一篇： 终于弄懂了事件冒泡和事件捕获！
下一篇： JavaScript事件冒泡和事件捕获