DOM事件流
历史原因
- 微软公司认为事件应该是由内向外传播,也就是当事件触发时,应该先触发当前元素上的事件,然后再向当前元素的祖先元素上传播,也就说事件应该在冒泡阶段执行。
- 网景公司认为事件应该是由外向内传播的,也就是当前事件触发时,应该先触发当前元素的最外层的祖先元素的事件,
然后在向内传播给后代元素
W3C综合了两个公司的方案,将事件传播分成了三个阶段
- 捕获阶段:在捕获阶段时从最外层的祖先元素,向目标元素进行事件的捕获,但是默认此时不会触发事件
- 目标阶段:事件捕获到目标元素,捕获结束开始在目标元素上触发事件
- 冒泡阶段:事件从目标元素向他的祖先元素传递,依次触发祖先元素上的事件
设置捕获阶段就触发事件
- 如果希望在捕获阶段就触发事件,可以将
addEventListener()
的第三个参数设置为true - 一般情况下我们不会希望在捕获阶段触发事件,所以这个参数一般都是false
- IE8及以下的浏览器中没有捕获阶段
如下图所示:
事件捕获
addEventListener可以捕获事件:
box1.addEventListener("click", function () {
alert("捕获 box3");
}, true);
上面的方法中,参数为true,代表事件在捕获阶段执行。
代码演示:
//参数为true,代表事件在「捕获」阶段触发;参数为false或者不写参数,代表事件在「冒泡」阶段触发
box3.addEventListener("click", function () {
alert("捕获 child");
}, true);
box2.addEventListener("click", function () {
alert("捕获 father");
}, true);
box1.addEventListener("click", function () {
alert("捕获 grandfather");
}, true);
document.addEventListener("click", function () {
alert("捕获 body");
}, true);
效果演示:
(如果上面的图片打不开,请点击:http://img.smyhvae.com/20180204_1101.gif)
重点:捕获阶段,事件依次传递的顺序是:window --> document --> html–> body --> 父元素、子元素、目标元素。
这几个元素在事件捕获阶段的完整写法是:
window.addEventListener("click", function () {
alert("捕获 window");
}, true);
document.addEventListener("click", function () {
alert("捕获 document");
}, true);
document.documentElement.addEventListener("click", function () {
alert("捕获 html");
}, true);
document.body.addEventListener("click", function () {
alert("捕获 body");
}, true);
fatherBox.addEventListener("click", function () {
alert("捕获 father");
}, true);
childBox.addEventListener("click", function () {
alert("捕获 child");
}, true);
说明:
(1)第一个接收到事件的对象是 window(有人会说body,有人会说html,这都是错误的)。
(2)JS中涉及到DOM对象时,有两个对象最常用:window、doucument。它们俩是最先获取到事件的。
补充一个知识点:
在 js中:
- 如果想获取
html
节点,方法是document.documentElement
。 - 如果想获取
body
节点,方法是:document.body
。
二者不要混淆了。
事件冒泡
事件冒泡: 当一个元素上的事件被触发的时候(比如说鼠标点击了一个按钮),同样的事件将会在那个元素的所有祖先元素中被触发。这一过程被称为事件冒泡;这个事件从原始元素开始一直冒泡到DOM树的最上层。
- 通俗来讲子元素的事件被触发时,祖先元素的同样的事件也会被触发
- 比如你点击了子元素是不是相当于点击了父元素,那么父元素如果绑定了相应事件当然会被触发
- 开发中,大多情况下冒泡是有用的,如果不希望发生冒泡,可以通过事件对象取消冒泡
上图显示,当我点击子元素 box3 的时候,它的box1被触发了。即使我改变代码的顺序,也不会影响效果的顺序
当然,上面的代码中,我们用 addEventListener 这种 DOM2的写法也是可以的,但是第三个参数要写 false,或者不写。
冒泡顺序:
一般的浏览器: (除IE6.0之外的浏览器)
- div
->
body->
html->
document->
window
IE6.0:
- div
->
body->
html->
document
不是所有的事件都能冒泡
以下事件不冒泡:blur、focus、load、unload、onmouseenter、onmouseleave,意思是,事件不会往父元素那里传递。
我们检查一个元素是否会冒泡,可以通过事件的以下参数:
event.bubbles
如果返回值为true,说明该事件会冒泡;反之则相反。
box1.onclick = function (event) {
alert("冒泡 child");
event = event || window.event;
console.log(event.bubbles); //打印结果:true。说明 onclick 事件是可以冒泡的
}
阻止冒泡
大部分情况下,冒泡都是有益的。当然,如果你想阻止冒泡,也是可以的。可以按下面的方法阻止冒泡
event.cancelBubble = true
代码示例:
取消上例中box3的冒泡
<script>
var box1 = document.getElementById('box1');
box1.onclick = function (event) {
alert('我是最外层的div')
};
// 取消box3的冒泡
var box3 = document.getElementById('box3');
box3.onclick = function (event) {
event = event || window.event;
event.cancelBubble = true;
}
</script>
阻止冒泡的举例
下面例子可以看出,冒泡在大多情况都很有用,很多效果我们认为理所应当,其实是忽视了冒泡机制的作用
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title></title>
<style type="text/css">
#box1 {
width: 100px;
height: 100px;
background-color: red;
/*
* 开启box1的绝对定位
*/
position: absolute;
}
#box2{
width: 300px;
height: 300px;
background-color: #bfa;
}
</style>
<script type="text/javascript">
window.onload = function() {
/*
* 使div可以跟随鼠标移动
*/
//获取box1
var box1 = document.getElementById("box1");
//给整个页面绑定:鼠标移动事件
document.onmousemove = function(event) {
//兼容的方式获取event对象
event = event || window.event;
// 鼠标在页面的位置 = 滚动条滚动的距离 + 可视区域的坐标。
var pagex = event.pageX || scroll().left + event.clientX;
var pagey = event.pageY || scroll().top + event.clientY;
// 设置div的偏移量(相对于整个页面)
// 注意,如果想通过 style.left 来设置属性,一定要给 box1开启绝对定位。
box1.style.left = pagex + "px";
box1.style.top = pagey + "px";
};
//取消box2区域的事件冒泡
box2.onmousemove = function (event) {
event = event || window.event;
event.cancelBubble = true;
}
};
// scroll 函数封装
function scroll() {
return {
//此函数的返回值是对象
left: window.pageYOffset || document.body.scrollTop || document.documentElement.scrollTop,
right:
window.pageXOffset || document.body.scrollLeft || document.documentElement.scrollLeft
};
}
</script>
</head>
<body style="height: 1000px;width: 2000px;">
<div id="box1"></div>
<div id="box2">该区域取消了冒泡</div>
</body>
</html>
效果演示: