事件流
当HTML页面与JavaScript进行交互时,需要通过事件驱动实现,例如:鼠标的点击事件、页面的滚动事件、加载等等,而想要知道这些事件是在什么情况下进行调用,则需要进一步的了解“事件流”。
什么是事件流?
描述的是从页面中接收事件的顺序,也可以理解为事件的传播顺序。
DOM事件流的三阶段分别是:事件捕获阶段、处于目标阶段、事件冒泡阶段。
事件处理程序
“DOM2级事件”定义了两个方法用于处理制定或者删除的事件处理程序的操作:addEventListener()和removeEventListener(),需接收3个参数:要处理的事件名、作为事件处理程序的函数和一个布尔值,布尔值若为true,则表示在捕获阶段调用事件处理程序,反之,则是在冒泡阶段调用事件处理程序。
事件的绑定
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>事件流</title>
</head>
<body>
<a href="javascript:;" id="btn">按钮</a>
<script>
window.onload = function(){
var oBtn = document.getElementById('btn');
oBtn.addEventListener('click',function(){
console.log('btn处于事件捕获阶段');
}, true);
oBtn.addEventListener('click',function(){
console.log('btn处于事件冒泡阶段');
}, false);
document.addEventListener('click',function(){
console.log('document处于事件捕获阶段');
}, true);
document.addEventListener('click',function(){
console.log('document处于事件冒泡阶段');
}, false);
};
</script>
</body>
</html>
事件的作用范围
html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#wrap {
width: 200px;
height: 200px;
background: fuchsia;
}
#outer {
position: relative;
top: 50px;
left: 50px;
width: 100px;
height: 100px;
background: pink;
}
#inner {
position: relative;
top: 25px;
left: 25px;
width: 50px;
height: 50px;
background: yellow;
}
</style>
</head>
<body>
<div id="wrap">
<div id="outer">
<div id="inner"></div>
</div>
</div>
<script type="text/javascript">
var wrap = document.getElementById('wrap');
wrap.addEventListener('click', function() {
alert('我是wrap');
}, false);
</script>
</body>
</html>
根据上面的例子,当点击紫色div(包括被子元素覆盖的部分)的任意一部分,都会弹出“我是wrap”,点击div之外的地方没有任何反应,元素注册事件的作用范围为元素自身在页面中所占的空间大小,但是真的就是这样吗?
只是通过css将蓝色div放在wrap之外,HTML和js不变。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#wrap {
width: 200px;
height: 200px;
background: orange;
}
#outer {
position: relative;
top: 50px;
left: 50px;
width: 100px;
height: 100px;
background: #eeddff;
}
/*inner中的top被修改*/
#inner {
position: relative;
top: 152px;
left: 25px;
width: 50px;
height: 50px;
background: #44ddff;
}
</style>
</head>
<body>
<div id="wrap">
<div id="outer">
<div id="inner"></div>
</div>
</div>
<script type="text/javascript">
var wrap = document.getElementById('wrap');
wrap.addEventListener('click', function() {
alert('我是wrap');
}, false);
</script>
</body>
</html>
当点击蓝色div时,“我是wrap”照样弹出,由此可知:当元素注册了事件,此事件的作用范围为:元素自身占页面空间部分加嵌套元素所占空间范围(若嵌套元素覆盖在容器元素上,则事件的作用范围为容器元素自身所占空间大小)。
事件的执行顺序
由事件的作用范围,我们得出当元素注册了事件,此事件的作用范围为:元素自己身占页面空间部分加嵌套元素所占空间范围(若嵌套元素覆盖在容器元素上,则事件的作用范围为容器元素自身所占空间大小)的结论,那么当点击事件发生时,它们的执行顺序又是怎样呢?
事件冒泡
事件开始时由最具体的元素(即文档中嵌套的层次最深的节点)接收,然后逐级向上传播到较为不具体的节点。
我们将事件处理程序的布尔值改为false,使元素处于冒泡阶段调用事件处理程序。
CSS和HTML代码不变,JS代码为:
var wrap = document.getElementById('wrap');
var outer = document.getElementById('outer');
var inner = document.getElementById('inner');
wrap.addEventListener('click',function(){
alert('我是wrap');
},false);
outer.addEventListener('click',function(){
alert('我是outer');
},false);
inner.addEventListener('click',function(){
alert('我是inner');
},false);
实验过后我们得知:当触发点击事件时,先弹出的是“我是inner”,接着是“我是outer”,最后是“我是wrap”,因此,当容器元素及其嵌套元素都在冒泡阶段调用事件处理程序时:事件按事件冒泡的顺序执行事件处理程序,即由最具体的元素(即文档中嵌套的层次最深的节点)接收,然后逐级向上传播到较为不具体的节点。
事件捕获
事件捕获是指不太具体的节点应该更早接收到事件,而最具体的节点应该最后接收到事件。
如:我们将事件处理程序的布尔值改为true,使元素处于捕获阶段调用事件处理程序。
CSS和HTML代码不变,JS代码为:
var wrap = document.getElementById('wrap');
var outer = document.getElementById('outer');
var inner = document.getElementById('inner');
wrap.addEventListener('click',function(){
alert('我是wrap');
},true);
outer.addEventListener('click',function(){
alert('我是outer');
},true);
inner.addEventListener('click',function(){
alert('我是inner');
},true);
当我们点击页面中心浅蓝色的部分时,先是弹出“我是wrap”,接着弹出“我是outer”,最后弹出“我是inner”。因此当容器元素及其嵌套元素都在捕获阶段调用事件处理程序时:事件按事件捕获的顺序执行事件处理程序。
阻止事件冒泡和捕获
w3c的方法是e.stopPropagation(),IE则是使用e.cancelBubble = true
其作用是阻止目标元素的冒泡事件,即阻止目标元素的事件冒泡到父级元素。但是会不阻止浏览器的默认行为。
function stopBubble(e) {
if ( e && e.stopPropagation )
e.stopPropagation();
else
window.event.cancelBubble = true;
}
取消默认事件:
w3c的方法是e.preventDefault(),IE则是使用e.returnValue = false;
既然是说默认行为,当然是元素必须有默认行为才能被取消,如果元素本身就没有默认行为,调用也就无效了。什么元素有默认行为呢?比如a链接,submit提交按钮等。当Event 对象的 cancelable为false时,表示没有默认行为,这时即使有默认行为,调用preventDefault也是不会起作用的。
<a href="http://www.baidu.com/" id="test" >baidu</a>
var a = document.getElementById("test");
a.onclick =function(e){
if(e.preventDefault){
e.preventDefault();
}else{
window.event.returnValue == false;
}
}
return false
javascript的return false只会阻止默认行为,如果使用jQuery的话则既阻止默认行为又阻止对象冒泡。