事件冒泡是事件流的第三个阶段，通过事件冒泡可以在这个阶段对事件做出响应。
关于冒泡，事件对象中包含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;
}
}