事件冒泡是事件流的第三個階段，通過事件冒泡可以在這個階段對事件做出響應。
關於冒泡，事件對象中包含bubbles、cancelBubble、stopPropagation()和stopImmediatePropagation()這四個屬性和方法。
bubbles屬性返回一個布爾值，表示當前事件是否會冒泡。該屬性為只讀屬性。
發生在文檔元素上的大部分事件都會冒泡，但focus、blur和scroll事件不會冒泡。所以，除了這三個事件bubbles屬性返回了false外，其它事件該屬性都為true。
<button id="test" style="height: 30px;width: 200px;"></button> <script> //點擊按鈕時，按鈕內容為true，說明click事件默認可冒泡 var test = document.getElementById('test'); test.onclick = function(e){ test.innerHTML =e.bubbles;//true } </script>
<div id="box" style="height: 50px;width: 200px;overflow:scroll;background:pink;line-height:60px;">內容</div> <script> //滾動時，div內容變成false，說明scroll事件默認不可冒泡 var box = document.getElementById('box'); box.onscroll = function(e){ test.innerHTML = e.bubbles;//false } </script>
stopPropagation()方法表示取消事件的進一步捕獲或冒泡，無返回。不能阻止同一事件的其它監聽函數被調用
注意：ie8 瀏覽器不支持
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <button id="btn">觸發</button> <script type="text/javascript"> var btn = document.getElementById('btn'); btn.onclick = function (e){ e = e || event; e.stopPropagation(); this.innerText = '阻止冒泡'; } document.body.onclick = function (e){ alert('冒泡'); } </script> </body> </html>
stopImmediatePropagation()方法不僅可以取消事件的進一步捕獲或冒泡，而且可以阻止同一個事件的其他監聽函數被調用，無返回值
[注意]IE8-瀏覽器不支持
使用stopIPropagation()方法，可以阻止冒泡，但無法阻止同一事件的其他監聽函數被調用
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <button id="btn" style="width: 200px;">觸發</button> <script type="text/javascript"> var btn = document.getElementById('btn'); // 可以阻止冒泡,但無法阻止同一事件的其他監聽函數被調用 btn.addEventListener('click',function (e){ e = e || event; e.stopPropagation() this.innerHTML = '修改了'; }) btn.addEventListener('click',function (e){ e = e || event; this.style.backgroundColor = 'lightblue'; //使用stopIPropagation()，該函數還會執行 }) document.body.addEventListener('click',function (){ alert('body'); //使用stopIPropagation()，該函數不執行 }) </script> </body> </html>
使用stopImmediatePropagation()方法，即可以阻止冒泡，也可以阻止同一事件的其他監聽函數被調用
<button id="btn" style="width: 200px;">觸發</button> <script type="text/javascript"> var btn = document.getElementById('btn'); // 可以阻止冒泡,但無法阻止同一事件的其他監聽函數被調用 btn.addEventListener('click',function (e){ e = e || event; e.stopImmediatePropagation() this.innerHTML = '修改了'; }) btn.addEventListener('click',function (e){ e = e || event; this.style.backgroundColor = 'lightblue'; //使用stopImmediatePropagation()方法，該函數不執行 }) document.body.addEventListener('click',function (){ alert('body'); //使用stopImmediatePropagation()方法，該函數不執行 }) </script>
canceBubble屬性只能用於阻止冒泡，無法阻止捕獲階段。該值可讀寫，默認值為false。當設置為true是，cancelBubble可以取消事件冒泡
[注意]該屬性全瀏覽器支持，但並不是標准寫法
<button id="btn">觸發</button> <script type="text/javascript"> var btn = document.getElementById('btn'); btn.onclick = function (e){ e = e || event; e.cancelBubble = true; this.innerText = '阻止冒泡'; } document.body.onclick = function (e){ alert('冒泡'); } </script>
阻止事件冒泡的兼容性寫法
var handler = function(e){
e = e || event;
if(e.stopPropagation){
e.stopPropagation();
}else{
e.cancelBubble = true;
}
}