事件定义:javascript和html之间的交互是通过事件实现的,事件就是浏览器窗口和文档发生的一些特定的交互的瞬间
一 事件流
事件冒泡 : IE 的事件流。事件开始是由具体的元素接受,然后逐级向上传播
事件捕获:Netscape 提出的为事件捕获。事件开始由不太具体的节点接收,而最具体的节点应该最后接收到事件。用意在于事件到达预定目标之前捕获它
DOM事件流:包含三个阶段 事件捕获、处于目标阶段、事件冒泡。 注:目标对象事件会在冒泡阶段触发。但是 ie9,Safari,chrome 会在捕获阶段触发目标对象事件。所以他们 有两个机会在目标对象上面操作事件
如下面demo可以演示事件的执行原理
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<style>
body{
height: 500px;
width: 500px;
}
#div1{
height: 200px;
width: 300px;
background-color: red;
}
#div2{
background-color: #008000;
height: 50px;
width: 50px;
}
</style>
</head>
<body>
<div id="div1">
click div1
<div id="div2">click div2</div>
</div>
<script>
var div1=document.getElementById("div1"),div2=document.getElementById("div2");
div1.addEventListener("click",some1,false);
div2.addEventListener("click",some2,false);
document.body.addEventListener("click",some,true);
function some1(){
alert("div1");
}
function some2(e){
alert("div2");
//e.stopPropagation(); //阻止冒泡
}
function some(e){
//return false; //阻止捕获
alert("body");
}
</script>
</body>
</html>
- addEventListener 最后一个参数为true时,表示事件触发在捕获阶段,如果为false目标事件触发在冒泡阶段
- 点击div2看到结果为 body->div2->div1。 这是目标元素在冒泡之前检查其父级元素是否有捕获触发事件,检查到body有捕获阶段的触发事件,就先执行body.然后冒泡执行目标元素和div1
- 打开some2中的注释,点击div2看到结果为 body->div2. 因为阻止了向上冒泡,所以div1的click事件未触发
- 打开some中注释,看到执行结果为 div2。阻止了目标元素的冒泡和其父级元素的捕获执行。
- 有兴趣的同学可以变换addEventListener最后一个参数,执行来看event的冒泡和捕获的执行原理