js之事件冒泡和事件捕获介绍
鏈接：http://www.jb51.net/article/42492.htm
（1）冒泡型事件：事件按照從最特定的事件目標(biāo)到最不特定的事件目標(biāo)(document對象)的順序觸發(fā)。
（2）捕獲型事件(event capturing)：事件從最不精確的對象(document 對象)開始觸發(fā)，然后到最精確(也可以在窗口級別捕獲事件，不過必須由開發(fā)人員特別指定)。
（3）DOM事件流：同時支持兩種事件模型：捕獲型事件和冒泡型事件，但是，捕獲型事件先發(fā)生。兩種事件流會觸及DOM中的所有對象，從document對象開始，也在document對象結(jié)束。
捕獲階段、目標(biāo)階段、冒泡階段。先調(diào)用捕獲階段的處理函數(shù)，其次調(diào)用目標(biāo)階段的處理函數(shù)，最后調(diào)用冒泡階段的處理函數(shù)。
DOM事件模型最獨(dú)特的性質(zhì)是，文本節(jié)點(diǎn)也觸發(fā)事件(在IE中不會)。
支持W3C標(biāo)準(zhǔn)的瀏覽器在添加事件時用addEventListener(event,fn,useCapture)方法，基中第3個參數(shù)useCapture是一個Boolean值，用來設(shè)置事件是在事件捕獲時執(zhí)行，還是事件冒泡時執(zhí)行。而不兼容W3C的瀏覽器(IE)用attachEvent()方法，此方法沒有相關(guān)設(shè)置，不過IE的事件模型默認(rèn)是在事件冒泡時執(zhí)行的，也就是在useCapture等于false的時候執(zhí)行，所以把在處理事件時把useCapture設(shè)置為false是比較安全，也實(shí)現(xiàn)兼容瀏覽器的效果。
事件捕獲階段：事件從最上一級標(biāo)簽開始往下查找，直到捕獲到事件目標(biāo)(target)。
事件冒泡階段：事件從事件目標(biāo)(target)開始，往上冒泡直到頁面的最上一級標(biāo)簽。
因?yàn)楦鞣N歷史原因，事件的綁定在不同的瀏覽器總是有不同的寫法，當(dāng)然現(xiàn)在可能大多數(shù)人都已經(jīng)習(xí)慣于jQuery的事件綁定，而不清楚javascript的原生事件綁定是什么樣子。
鏈接：http://kb.cnblogs.com/page/199251/
Javascript綁定事件的方式
傳統(tǒng)的事件綁定
element.onclick = function(e){}
<body>
<input type="button" id="bt" name="bt button" value="this is a button">
<script>
var bt = document.getElementById("bt");
bt.onclick = function(e){
alert("this is a alert");
alert(e.currentTarget.name);
}
</script>
</body>
這是傳統(tǒng)的事件綁定，它非常簡單而且穩(wěn)定，適應(yīng)不同瀏覽器。e表示事件，this指向當(dāng)前元素。但是這樣的綁定只會在事件冒泡中運(yùn)行，捕獲不行。一個元素一次只能綁定一個事件函數(shù)。
W3C方式的事件綁定
W3C中推薦使用的事件綁定是用addEventListener()函數(shù)，element.addEventListener('click',function(e){...},false)，上代碼:
<body>
<input type="button" id="bt" name="bt button" value="this is a button">
<script>
var bt = document.getElementById("bt");
bt.addEventListener('click',function(e){
alert("this is a alert");
alert(e.currentTarget.name);
},false);
</script>
</body>
如此的效果和之前的傳統(tǒng)綁定方式是一樣的，這種綁定同時支持捕獲和冒泡，addEventListener()函數(shù)最后的參數(shù)表達(dá)了事件處理的階段——false(冒泡)，true(捕獲)。這種方式最重要的好處就是對同一元素的同一個類型事件做綁定不會覆蓋，會全部生效。比如對上面代碼bt元素在進(jìn)行一次click的綁定，那么兩次綁定的事件處理函數(shù)都會執(zhí)行，按照代碼書寫順序。
但是IE瀏覽器不支持addEventListener()函數(shù)，只能在IE9以上(包括IE9)可以使用，IE瀏覽器相應(yīng)的要使用attachEvent()函數(shù)代替。
IE下的事件綁定
IE下事件綁定的函數(shù)是attachEvent，它支持全系列的IE，但是如果你在Chrome等其他內(nèi)核瀏覽器中使用這個函數(shù)去綁定事件，瀏覽器會報錯的。
<body>
<input type="button" id="bt" name="bt button" value="this is a button">
<script>
var name = "world";
var bt = document.getElementById("bt");
bt.attachEvent('onclick',function(){
alert("hello "+ this.name);
});
</script>
</body>
attachEvent()函數(shù)支持事件捕獲的冒泡階段，同時它不會覆蓋事件的綁定。但是一個缺點(diǎn)就是它處理函數(shù)中的this指向的是全局的window，所以上面代碼彈出的結(jié)果會是"hello world"。
冒泡和捕獲
上面的綁定事件中提到了冒泡和捕獲階段的概念，這兩個概念對于理解事件是很重要的，對于它們的理解還要涉及到DOM(文檔對象模型)和事件流的概念。事件流就是一個事件對象沿著特定數(shù)據(jù)結(jié)構(gòu)傳播的這么一個過程。
所謂的事件對象就是Event，當(dāng)一個元素上綁定的事件被觸發(fā)時會產(chǎn)生一個事件對象，從一切皆對象的觀點(diǎn)看這是很符合邏輯的。冒泡和捕獲講的就是事件流在DOM中兩種不同的傳播方式。
<body>
<div id="bt1" name="divbt1">
<div id="bt2" name="divbt2"></div>
</div>
<script>
var bt1 = document.getElementById("bt1");
bt1.addEventListener('click',function(e){
alert("bt1"); //結(jié)果是bt1
},true);
var bt2 = document.getElementById("bt2");
bt2.addEventListener('click',function(e){
alert("bt2"); //結(jié)果是bt2 bt1
},true);
//bt1是true，當(dāng)bt2是false， 點(diǎn)擊bt2結(jié)果是bt1 bt2
//當(dāng)bt1是false，bt2是true，點(diǎn)擊bt2結(jié)果是bt2 bt1
//兩個均是false，點(diǎn)擊bt2結(jié)果是bt2 bt1 冒泡
//兩個均是true，，點(diǎn)擊bt2結(jié)果是bt1 bt2 捕獲
</script>
</body>
<script>
window.onload=function(){
varoutA=document.getElementById("outA");
varoutB=document.getElementById("outB");
varoutC=document.getElementById("outC");
// 目標(biāo)(自身觸發(fā)事件,是冒泡還是捕獲無所謂)
outC.addEventListener('click',function(){alert("target");},true);
// 事件冒泡
outA.addEventListener('click',function(){alert("bubble1");},false);
outB.addEventListener('click',function(){alert("bubble2");},false);
// 事件捕獲
outA.addEventListener('click',function(){alert("capture1");},true);
outB.addEventListener('click',function(){alert("capture2");},true);
};
</script>
<body>
<divid="outA"style="400px; height:400px; background:#CDC9C9;position:relative;">
<divid="outB"style="height:200; background:#0000ff;top:100px;position:relative;">
<divid="outC"style="height:100px; background:#FFB90F;top:50px;position:relative;"></div>
</div>
</div>
</body>
點(diǎn)擊outC，彈出capture1 capture2 target bubble1 bubble2
總結(jié)
以上是生活随笔為你收集整理的js之事件冒泡和事件捕获介绍的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： RTP/RTCP协议详解
- 下一篇： 做个系统U盘吧，以后电脑崩溃不求人