本文摘自PHP中文网,作者青灯夜游,侵删。
事件发生时会在元素节点之间按照特定的顺序传播,这个传播过程即DOM事件流。DOM事件流分为三个阶段,分别为:
捕获阶段:事件从Document节点自上而下向目标节点传播的阶段;
目标阶段:真正的目标节点正在处理事件的阶段;
冒泡阶段:事件从目标节点自上而下向Document节点传播的阶段。
捕获阶段:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 | <!DOCTYPE html>
<html>
<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>Document</title>
<style>
.father {
overflow: hidden;
width: 300px;
height: 300px;
margin: 100px auto;
background-color: pink;
text-align: center;
}
.son {
width: 200px;
height: 200px;
margin: 50px;
background-color: purple;
line-height: 200px;
color: #fff;
}
</style>
</head>
<body>
<div>
<div>son盒子</div>
</div>
<script>
var son = document.querySelector( '.son' );
son.addEventListener( 'click' , function () {
console.log( 'son' );
}, true);
var father = document.querySelector( '.father' );
father.addEventListener( 'click' , function () {
console.log( 'father' );
}, true);
document.addEventListener( 'click' , function () {
console.log( 'document' );
}, true);
</script>
</body>
</html>
|
控制台输出结果为:
阅读剩余部分
相关阅读 >>
html和js实现简单的计算器
javascript中bind是什么意思
js怎么获取css属性值
js中null是什么意思?
javascript中如何实现异步编程模式
浅谈es6中的字符串(代码示例)
echarts-基于html5 canvas的javascript图表库图文详解
javascript怎么设置高
javascript核心对象有哪些
html5 表单、select 下拉、textarea多行文本的介绍
更多相关阅读请进入《javascript》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者
转载请注明出处:木庄网络博客 » 详解DOM事件流的三个阶段