js之事件冒泡和事件捕获介绍
鏈接：http://www.jb51.net/article/42492.htm
（1）冒泡型事件：事件按照從最特定的事件目標到最不特定的事件目標(document對象)的順序觸發(fā)。
（2）捕獲型事件(event capturing)：事件從最不精確的對象(document 對象)開始觸發(fā)，然后到最精確(也可以在窗口級別捕獲事件，不過必須由開發(fā)人員特別指定)。
（3）DOM事件流：同時支持兩種事件模型：捕獲型事件和冒泡型事件，但是，捕獲型事件先發(fā)生。兩種事件流會觸及DOM中的所有對象，從document對象開始，也在document對象結束。
捕獲階段、目標階段、冒泡階段。先調用捕獲階段的處理函數，其次調用目標階段的處理函數，最后調用冒泡階段的處理函數。
DOM事件模型最獨特的性質是，文本節(jié)點也觸發(fā)事件(在IE中不會)。
支持W3C標準的瀏覽器在添加事件時用addEventListener(event,fn,useCapture)方法，基中第3個參數useCapture是一個Boolean值，用來設置事件是在事件捕獲時執(zhí)行，還是事件冒泡時執(zhí)行。而不兼容W3C的瀏覽器(IE)用attachEvent()方法，此方法沒有相關設置，不過IE的事件模型默認是在事件冒泡時執(zhí)行的，也就是在useCapture等于false的時候執(zhí)行，所以把在處理事件時把useCapture設置為false是比較安全，也實現兼容瀏覽器的效果。
事件捕獲階段：事件從最上一級標簽開始往下查找，直到捕獲到事件目標(target)。
事件冒泡階段：事件從事件目標(target)開始，往上冒泡直到頁面的最上一級標簽。
因為各種歷史原因，事件的綁定在不同的瀏覽器總是有不同的寫法，當然現在可能大多數人都已經習慣于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)定，適應不同瀏覽器。e表示事件，this指向當前元素。但是這樣的綁定只會在事件冒泡中運行，捕獲不行。一個元素一次只能綁定一個事件函數。
W3C方式的事件綁定
W3C中推薦使用的事件綁定是用addEventListener()函數，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()函數最后的參數表達了事件處理的階段——false(冒泡)，true(捕獲)。這種方式最重要的好處就是對同一元素的同一個類型事件做綁定不會覆蓋，會全部生效。比如對上面代碼bt元素在進行一次click的綁定，那么兩次綁定的事件處理函數都會執(zhí)行，按照代碼書寫順序。
但是IE瀏覽器不支持addEventListener()函數，只能在IE9以上(包括IE9)可以使用，IE瀏覽器相應的要使用attachEvent()函數代替。
IE下的事件綁定
IE下事件綁定的函數是attachEvent，它支持全系列的IE，但是如果你在Chrome等其他內核瀏覽器中使用這個函數去綁定事件，瀏覽器會報錯的。
<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()函數支持事件捕獲的冒泡階段，同時它不會覆蓋事件的綁定。但是一個缺點就是它處理函數中的this指向的是全局的window，所以上面代碼彈出的結果會是"hello world"。
冒泡和捕獲
上面的綁定事件中提到了冒泡和捕獲階段的概念，這兩個概念對于理解事件是很重要的，對于它們的理解還要涉及到DOM(文檔對象模型)和事件流的概念。事件流就是一個事件對象沿著特定數據結構傳播的這么一個過程。
所謂的事件對象就是Event，當一個元素上綁定的事件被觸發(fā)時會產生一個事件對象，從一切皆對象的觀點看這是很符合邏輯的。冒泡和捕獲講的就是事件流在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"); //結果是bt1
},true);
var bt2 = document.getElementById("bt2");
bt2.addEventListener('click',function(e){
alert("bt2"); //結果是bt2 bt1
},true);
//bt1是true，當bt2是false， 點擊bt2結果是bt1 bt2
//當bt1是false，bt2是true，點擊bt2結果是bt2 bt1
//兩個均是false，點擊bt2結果是bt2 bt1 冒泡
//兩個均是true，，點擊bt2結果是bt1 bt2 捕獲
</script>
</body>
<script>
window.onload=function(){
varoutA=document.getElementById("outA");
varoutB=document.getElementById("outB");
varoutC=document.getElementById("outC");
// 目標(自身觸發(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>
點擊outC，彈出capture1 capture2 target bubble1 bubble2
總結
以上是生活随笔為你收集整理的js之事件冒泡和事件捕获介绍的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： RTP/RTCP协议详解
- 下一篇： 做个系统U盘吧，以后电脑崩溃不求人