js事件的传播
1、什么是事件?
js事件是由访问web页面的用户引起的一系列操作,当用户执行某些操作时,再去执行一系列代码或用来获取事件的详细信息。
常见的事件类型请参考:http://www.w3school.com.cn/jsref/jsref_events.asp
2、事件的传播概述:
事件根据事件模型规定的传播路径被逐级传递, 在传播过程中依次触发对应的事件监听器, 然后被继续传递. 直到完成事件传播, 或是传播过程被终止。
3、事件的传播分为三个阶段:
- 捕获阶段(capture phase):在捕获阶段时从最外层的祖先元素(window对象),向目标元素进行事件的捕获,但是默认此时不会触发事件;
-
document
-
< html>
-
< body>
-
< div>
事件捕获过程中,document对象首先接受click事件,然后事件沿DOM树依次向下,一直传播到事件的实际目标,即div元素。
2.目标阶段(target phase):事件捕获到目标元素,捕获结束开始在目标元素上触发事件;
3.冒泡阶段(bubble phase):事件从目标元素向他的祖先元素传递,依次触发祖先元素上的事件;(通俗来讲就是元素A中有子元素B,B元素的事件触发了,那么A元素相同的事件也会触发) -
document
-
< html>
-
< body>
-
< div>
也就是说,click事件首先在div元素上发生,然后click事件沿DOM树向上传播,在每一级节点上都会发生,直至传播至document对象。
-
首先发生的是事件捕获,为截获事件提供了机会。
-
然后是实际的目标接收到事件。
-
然后冒泡阶段发生,事件又传播回文档。
4、怎么阻止事件传播?
阻止事件冒泡的兼容性方法:function stopBubbles(e){
var evt=e || window.event;
if(evt.stopProgagation){
evt.stopPropagation();//ie8及以下版本不支持
}else{
evt.cancelBubble=true; //火狐不支持
}
}
阻止默认行为的兼容性方法:
function preventDefault(e){
var evt=e || window.event;
if (typeof evt.preventDefault != 'undefined') {//w3c
evt.preventDefault();
} else{
evt.returnValue = false;//ie
}
}
事件冒泡案例:
<html lang="en">
<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>
.outer {
width: 300px;
height: 300px;
background: red;
}
.inner {
width: 200px;
height: 200px;
background: blue;
}
.content {
width: 100px;
height: 100px;
background: greenyellow;
}
</style>
</head>
<body>
<div class="outer">outer
<div class="inner">inner
<div class="content">content</div>
</div>
</div>
<script src="../public/js/jquery.min.js"></script>
<script>
$(function(){
$('.outer').click(function(){
console.log('outer');
})
$('.inner').click(function(){
console.log('inner');
})
$('.content').click(function(){
console.log('content');
})
})
</script>
</body>
点击content输出如下: