事件的傳播 ~~~javascript ~~~ ...
事件的傳播
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#box1 {
width: 300px;
height: 300px;
background-color: aliceblue;
}
#box2 {
width: 200px;
height: 200px;
background-color: skyblue;
}
#box3 {
width: 100px;
height: 100px;
background-color: yellow;
}
</style>
<script type="text/javascript">
window.onload=function(){
var box1=document.getElementById("box1");
var box2=document.getElementById("box2");
var box3=document.getElementById("box3");
bind(box1,"click",function(){alert("box1")})
bind(box2,"click",function(){alert("box2")})
bind(box3,"click",function(){alert("box3")})
// 事件的傳播
// - 微軟公司認為時間應該由內向外傳播，也就是事件觸發時，應該先出發當前元素上的事件
// 然後再向當前元素的祖先元素上傳播，也就是說事件應該在冒泡階段執行
// - 網景公司認為事件應該是由外向內傳播的，也就是當前事件觸發時，應該先觸發當前元素的最外層的祖先元素的事件
// - W3C綜合了兩個公司的方案，將事件傳播分成三個階段
// 1.捕獲階段
// - 在捕獲階段從最外層的祖先元素，向目標元素進行事件的捕獲，但是預設此時不會觸發事件
// 2.目標階段
// - 事件捕獲到目標元素
// 3.冒泡階段
// - 事件從目標元素向他的祖先元素傳遞，依次觸發祖先元素
// - 如果希望在捕獲階段就觸發事件，可以將addEventListenter()的第三個參數設置為true
// 一般情況下，我們不會再捕獲階段觸發事件
}
function bind(obj,eventStr,callback){
if(obj.addEventListener){
// 大部分瀏覽器相容的方式
obj.addEventListener(eventStr,callback,false);
}else{
/*
this是誰由調用方式決定的
callbank.call(obj)
*/
// IE8及以下
obj.attachEvent("on"+eventStr,function(){
// 在匿名函數中調用回掉函數
callback.call(obj);
});
}
}
</script>
</head>
<body>
<div id="box1">
<div id="box2">
<div id="box3"></div>
</div>
</div>
</body>
</html>
