JS中的事件捕獲和事件冒泡
阿新 • • 發佈:2019-01-09
前言
前段時間給應屆生講JS的事件,順便講了一下事件捕獲和事件冒泡是怎麼一回事兒,但是沒給他具體的例子,這裡新增一段列子,順便給菜鳥們一些具體程式碼來看看冒泡和捕獲是怎麼一回事兒。
1、事件捕獲
捕獲型事件(event capturing):事件從最不精確的物件(document 物件)開始觸發,然後到最精確(也可以在視窗級別捕獲事件,不過必須由開發人員特別指定)
2、事件冒泡
冒泡型事件:事件按照從最特定的事件目標到最不特定的事件目標(document物件)的順序觸發。
3、捕獲和冒泡過程圖
不同的瀏覽器對事件的處理機制不同
兩種模型
以前,Netscape和Microsoft是不同的實現方式。
Netscape中,parent先觸發,這就叫做事件捕獲。
Microsoft中,child先觸發,這就叫做事件冒泡。
兩種事件處理順序剛好相反。IE只支援事件冒泡,Chrome,Mozilla, Opera 7 和 Konqueror兩種都支援,舊版本的Opera’s 和 iCab兩種都不支援 。
W3C模型
W3C模型是將兩者進行中和,在W3C模型中,任何事件發生時,先從頂層開始進行事件捕獲,直到事件觸發到達了事件源元素。然後,再從事件源往上進行事件冒泡,直到到達document。
4、例項程式碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>冒泡和捕獲測試</title>
<style>
*{margin: 0;padding: 0;}
body{width:100%;}
div{width:80%;height: 80%;padding: 10%;position: relative;}
#a{background: rgba(255,0,0,.6);}
#b{background: rgba(0,255,0,.6);}
#c{background: rgba(0,0,255,.6);}
p{ color:#333;font-size: 1.2em;text-align: center; }
</style>
</head>
<body>
<div id="a">
<p > this is a div</p>
<div id="b">
<p>this is b div</p>
<div id="c">
<p>this is c div</p>
</div>
</div>
</div>
<script type="text/javascript">
var a = document.getElementById('a'),
b = document.getElementById('b'),
c = document.getElementById('c');
function addEvent(obj,ev,fn){
if(obj.attachEvent){//針對IE瀏覽器
obj.attachEvent('on'+ev,fn)
}else{//針對FF與chrome
obj.addEventListener(ev,fn,false)//當為true時採用事件捕獲,當為false採用事件冒泡
//程式設計師可以自己選擇繫結事件時採用事件捕獲還是事件冒泡。
}
}
addEvent(a,'click',function(){
alert('this is a div');
});
addEvent(b,'click',function(){
alert('this is b div');
});
addEvent(c,'click',function(){
alert('this is c div');
});
</script>
</body>
</html>