浏览器事件捕获冒泡以及阻止冒泡
生活随笔
收集整理的這篇文章主要介紹了
浏览器事件捕获冒泡以及阻止冒泡
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
瀏覽器事件捕獲冒泡以及阻止冒泡
一、瀏覽器的dom事件流
dom事件流有三個階段，捕獲階段—>目標階段—>冒泡階段，不管是有沒有綁定事件，只要發生點擊事件，事件的處理將從DOM層次的根開始，而不是從觸發事件的目標元素開始，事件被從目標元素的所有祖先元素依次往下傳遞，直到目標元素然后再從目標元素冒泡到根元素。這是事件觸發后的整個固定流程，至于要在哪個點綁定事件看具體需要。
舉個小例說明下：
<style>
* {
box-sizing: border-box;
}
#box1 {
height: 600px;
500px;
padding-top: 100px;
background-color: red
}
#box2 {
height: 400px;
500px;
padding-top: 100px;
background-color: green;
}
#box3 {
height: 200px;
500px;
background-color: #000
}
</style>
<body> <div id="box1"> <div id="box2"> <div id="box3"></div> </div> </div> </body>
//正常點擊dom1、dom2.dom3
<script> var dom1 = document.getElementById('box1'); var dom2 = document.getElementById('box2'); var dom3 = document.getElementById('box3');
dom3.addEventListener('click', function(){console.log('target')}); //被點擊的目標target，是捕獲還是冒泡不影響
dom1.addEventListener('click', function(){console.log('cp1')}, true); //true表示cp-capture捕獲
dom2.addEventListener('click', function(){console.log('cp2')}, true);
dom3.addEventListener('click', function(){console.log('cp3')}, true);
dom3.addEventListener('click', function(){console.log('bb3')}, false);
dom1.addEventListener('click', function(){console.log('bb1')}, false); //bb-bubble冒泡
dom2.addEventListener('click', function(){console.log('bb2')}, false);
</script>
//點擊dom3 輸出結果依次為 cp1->cp2->target->cp3->bb3->bb2->1
//點擊dom2 輸出結果依次為 cp1->cp2->bb2->bb1
//點擊dom1 輸出結果依次為 cp1->bb1
//阻止冒泡（一般事件綁定在冒泡階段）
<script>
var dom1 = document.getElementById('box1');
var dom2 = document.getElementById('box2');
var dom3 = document.getElementById('box3');
dom3.addEventListener('click', function(e){console.log('target3')；e.stopPropagation();//阻止冒泡}); //被點擊的目標target3，是捕獲還是冒泡不影響
dom2.addEventListener('click', function(e){console.log('target2'); e.stopPropagation();}); //被點擊的目標target2，是捕獲還是冒泡不影響
dom1.addEventListener('click', function(e){console.log('target1'); e.stopPropagation();}); //被點擊的目標target1，是捕獲還是冒泡不影響
dom1.addEventListener('click', function(){console.log('cp1')}, true); //true表示cp-capture捕獲
dom2.addEventListener('click', function(){console.log('cp2')}, true);
dom3.addEventListener('click', function(){console.log('cp3')}, true);
dom3.addEventListener('click', function(){console.log('bb3')}, false);
dom1.addEventListener('click', function(){console.log('bb1')}, false); //bb-bubble冒泡
dom2.addEventListener('click', function(){console.log('bb2')}, false);
</script>
//點擊dom3 輸出結果依次為 target3
//點擊dom2 輸出結果依次為 target2
//點擊dom1 輸出結果依次為 target1
//以上在谷歌瀏覽器親測正常！
需要注意的是，我們無法在事件捕獲階段阻止事件冒泡！！！
stiopPropagation()方法
stiopPropagation()方法的的官方解釋為：終止事件在傳播過程的捕獲、目標處理或起泡階段進一步傳播。調用該方法后，該節點上處理該事件的處理程序將被調用，事件不再被分派到其他節點。
preventDefault()方法
取消事件的默認動作。
這個方法通知瀏覽器取消執行與事件關聯的默認動作。如<a>標簽的地址跳轉等:
return false方法
對于這個方法，相信同學們一定不會陌生。在甚多時候，return false可以替代stopPropagation()和preventDefault()。
但是并不是所有的情況下都可以用return false來替代上兩種方法。
因為return false方法：不但阻止事件執行，而且會跳出，return false之后的所有事件都不會執行。
總結
以上是生活随笔為你收集整理的浏览器事件捕获冒泡以及阻止冒泡的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： angular中如何定义全局变量_ang
- 下一篇： 网易成立新海外远程工作室 Spliced