DOM(文档对象模型)结构是一个树型结构,当一个HTML元素产生一个事件时,该事件会在元素结点与根节点之间按特定的顺序传播,路径所经过的节点都会收到该事件,这个传播过程可称为DOM事件流。
1.事件冒泡(推荐)
IE的事件流称为事件冒泡。
即:事件由最具体的元素接收(div),逐级向上传播到不具体的节点(document)。
当我们点击代码片段一中id为box的div块时,单击事件会按照如下顺序传播:
div ——> body——> html ——> document
如上图所示,click首先在div元素上发生,然后沿着Dom树向上传播,每一级节点都会发生直至传播到document对象。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>事件流</title>
</head>
<style type="text/css">
#box1{
width: 300px;
height: 300px;
background-color: red;
}
#box2{
width: 200px;
height: 200px;
background-color: yellow;
}
#box3{
height: 100px;
width: 100px;
background-color: green;
}
</style>
<body>
<div id="box1">
<div id="box2">
<div id="box3"></div>
</div>
</div>
</body>
<script type="text/javascript">
document.getElementById('box1').onclick = function () {
console.log('box1 click')
}
document.getElementById('box2').onclick = function () {
console.log('box2 click')
}
document.getElementById('box3').onclick = function () {
console.log('box3 click')
}
</script>
</html>
2.事件捕获
Netscape提出的事件流模型称为事件捕获。
即:事件从最不具体的节点开始接收(document),传递至最具体的节点 div 和IE的冒泡刚好相反, 事件捕获的本意是当事件到达预定目标前捕获它。
当我们点击代码片段一中id为box的div块时,单击事件会按照如下顺序传播:
document——> html ——> body ——> div
3.DOM2级事件流
为了能够兼容上述两种事件模型,又提出了一个DOM2级事件模型,它规定了事件流包含三个阶段:
事件捕获阶段:为事件捕获提供机会;
处于目标阶段:事件的目标接收到事件(但并不会做出响应);
事件冒泡阶段:事件响应阶段;
第一阶段:从window对象传导到目标节点(上层传到底层),称为“捕获阶段”(capture phase)。
第二阶段:在目标节点上触发,称为“目标阶段”(target phase)。
第三阶段:从目标节点传导回window对象(从底层传回上层),称为“冒泡阶段”(bubbling phase)。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>DOM2级事件流</title>
</head>
<style type="text/css">
#box1{
width: 300px;
height: 300px;
background-color: red;
}
#box2{
width: 200px;
height: 200px;
background-color: yellow;
}
#box3{
height: 100px;
width: 100px;
background-color: green;
}
</style>
<body>
<div id="box1">
<div id="box2">
<div id="box3"></div>
</div>
</div>
</body>
<script type="text/javascript">
var box1 = document.getElementById('box1');
var box2 = document.getElementById('box2');
var box3 = document.getElementById('box3');
// true表示在捕获阶段处理事件、false表示在冒泡阶段处理
box1.addEventListener('click',function () {
console.log('事件捕获阶段触发box1点击事件');
}, true);
box1.addEventListener('click',function () {
console.log('事件冒泡阶段触发box1点击事件');
}, false);
box2.addEventListener('click',function () {
console.log('事件捕获阶段触发box2点击事件');
}, true);
box2.addEventListener('click',function () {
console.log('事件冒泡阶段触发box2点击事件');
}, false)
box3.addEventListener('click',function () {
console.log('事件捕获阶段触发box3点击事件');
}, true);
box3.addEventListener('click',function () {
console.log('事件冒泡阶段触发box3点击事件');
}, false)
</script>
</html>