Javascript中事件擷取、事件冒泡以及事件委託機制
- 黄舟原創
- 2017-03-01 15:17:091442瀏覽
概念
事件冒泡：事件促發的最深層元素首先接收事件。然後是它的父元素，依序向上，直到document物件最終接收到事件。儘管相對於html元素來說，document沒有獨立的視覺表現，他仍然是html元素的父元素並且事件能冒泡到document元素。
隨便也說一下事件捕捉。
事件擷取：事件首先發生在DOM樹的最高層物件(document)然後往最深層的元素傳播。 （注意IE6只有冒泡，沒有捕獲）
事件委託：我認為事件委託是利用冒泡原理，把事件的監聽轉換到其父元素上，也就是把事件綁定到父元素上，然後在事件中取得子元素對象，對其進行相應的操作。優點：1.提高效能2.減少程式碼量
實例
事件冒泡實例1
事件預設是在冒泡階段執行
先看下面程式碼：
<script type="text/javascript">
window.onload=function(){
var oId1=document.getElementById('id1');
var oId2=document.getElementById('id2');
var oId3=document.getElementById('id3');
oId1.addEventListener('click',function(e){
console.log("点击了id1");
});
oId2.addEventListener('click',function(e){
console.log("点击了id2");
});
oId3.addEventListener('click',function(e){
console.log("点击了id3");
});
}</script><style type="text/css">
*{margin: 0;padding: 0;}</style>
<p id="box" style="background-color:#669;widht:600px; height:400px;">
<p id="id1" style="background-color:#F00;widht:500px;height:300px;">
<p id="id2" style="background-color:#6F9;widht:400px; height:200px;">
<p id="id3" style="background-color:#000;widht:300px; height:100px;">
</p>
</p></p></p>我依序點選id1、id2、id3，執行效果如下圖：
解析：因為點選id3時候，先從id3開始冒泡，執行id3上綁定的事件，在冒泡到id2，執行id2，上面的事件，最後執行id1上面的事件。
事件冒泡實例2
現在開始阻止id2的冒泡，修改JS如下
window.onload=function(){
var oId1=document.getElementById('id1');
var oId2=document.getElementById('id2');
var oId3=document.getElementById('id3');
oId1.addEventListener('click',function(e){
console.log("点击了id1");
});
oId2.addEventListener('click',function(e){
console.log("点击了id2");
e.stopPropagation();
});
oId3.addEventListener('click',function(e){
console.log("点击了id3");
});
}
</script>此時，我依序點擊id1、id2、id3，執行效果如下圖： 
因為事件執行到id2，不在冒泡，故點擊id2，id3的時候，不會執行id1綁定的事件。
事件擷取實例1
為了驗證事件在擷取階段執行，我將JS程式碼改為如下：
<script type="text/javascript">
window.onload=function(){
var oId1=document.getElementById('id1');
var oId2=document.getElementById('id2');
var oId3=document.getElementById('id3');
oId1.addEventListener('click',function(e){
console.log("点击了id1");
},true);
oId2.addEventListener('click',function(e){
console.log("点击了id2");
},true);
oId3.addEventListener('click',function(e){
console.log("点击了id3");
},true);
}</script>此時，我依序點擊id1、id2、id3 ，執行效果如下圖： 
解析：每次點擊，事件都會從根元素開始執行，即捕獲到，如果有事件，就執行。
事件擷取實例2
此時，我將JS程式碼改為如下：
<script type="text/javascript">
window.onload=function(){
var oId1=document.getElementById('id1');
var oId2=document.getElementById('id2');
var oId3=document.getElementById('id3');
oId1.addEventListener('click',function(e){
console.log("点击了id1");
},true);
oId2.addEventListener('click',function(e){
e.stopPropagation();
console.log("点击了id2");
},true);
oId3.addEventListener('click',function(e){
console.log("点击了id3");
},true);
}</script>此時，我依序點擊id1、id2、id3，執行效果如下圖： 
從中發現了，一個現象，我點擊id3的時候，發現執行了id1和id2上面綁定的事件，為什麼不執行id3上面的事件呢？原來是因為取消冒泡e.stopPropagation();，也阻止了事件的捕獲。
事件冒泡與捕獲實例
現在我將JS修改為如下：
<script type="text/javascript">
window.onload=function(){
var oId1=document.getElementById('id1');
var oId2=document.getElementById('id2');
var oId3=document.getElementById('id3');
oId1.onclick=function(){ //该事件在冒泡阶段执行
console.log("点击了id1");
}
oId2.addEventListener('click',function(e){
console.log("点击了id2");
},true);
oId3.addEventListener('click',function(e){
console.log("点击了id3");
},true);
}</script>此時，我依序點擊id1、id2、id3，執行效果如下圖： 
事件委託實例1
下面程式碼，當我在box綁定click事件的時候，透過e.srcElement，可以取得點擊的是哪個元素。
<script type="text/javascript">
window.onload=function(){
var oBox=document.getElementById('box');
oBox.onclick=function(e){
var curObj=e.srcElement;
console.log(curObj.id);
}
}</script><style type="text/css">
*{margin: 0;padding: 0;}</style>
<p id="box" style="background-color:#669;widht:600px; height:400px;">
<p id="id1" style="background-color:#F00;widht:500px;height:300px;">
<p id="id2" style="background-color:#6F9;widht:400px; height:200px;">
<p id="id3" style="background-color:#000;widht:300px; height:100px;">
</p>
</p></p></p>
可以看出，我們可以在box綁定click事件裡面取得點擊的元素。
事件委託實例2
驗證事件委託中冒泡
將上面的JS改為如下：
<script type="text/javascript">
window.onload=function(){
var oBox=document.getElementById('box');
var oId2=document.getElementById('id2');
oId2.onclick=function(e){
e.stopPropagation();
}
oBox.onclick=function(e){
var curObj=e.srcElement;
console.log(curObj.id);
}
}</script>此時點擊，會發現，id2，id3的時候，沒辦法透過e.srcElement取得到。因為我阻止了id2的冒泡。
以上就是Javascript中事件擷取、事件冒泡以及事件委託機制的內容，更多相關內容請關注PHP中文網（www.php.cn）！