1. 事件冒泡机制是什么
事件冒泡是指在DOM结构中，如果某个元素发生了某个事件，那么这个事件会像气泡一样，从这个元素开始依次向祖先元素传递，直到传递到document对象为止。
举个例子，如果有一个元素点击事件被触发，那么这个事件会先在被点击的元素上触发，再依次触发它的父元素、父元素的父元素......直到document元素。
说白了，事件冒泡就是当发生某个事件时，当前元素接收该事件的同时，该元素的祖先元素也会接收此事件，而且祖先元素的接收顺序是由内向外逐级传递的。这种将元素事件从内向外传递的机制被称为事件冒泡
2. 事件冒泡的触发条件
只有在DOM元素中，当某一元素嵌套在另一元素中时（例如嵌套div元素），如果该元素绑定了事件，当鼠标操作在该元素上执行时，会把这个事件发送给浏览器，然后从内向外经过所有的相关元素，直到document对象为止
3. 事件冒泡的取消
可以使用stopPropagation()方法取消事件冒泡。stopPropagation()方法的作用是阻止事件冒泡，调用该方法后，后代元素将不会再接收到该事件。
示例：
document.getElementById('btn').addEventListener('click', function(event){
event.stopPropagation();
});
上述代码写在一个id为btn的元素上，如果这个元素被点击时，就会触发这个方法并且会阻止事件冒泡，避免向上传递给其父元素
4. 基于冒泡的事件委托
事件委托是一种常见的优化Web程序性能的技术，它是利用了事件冒泡机制将事件处理器绑定在父元素上，然后根据冒泡的过程，去判断事件源是不是我们需要的目标，从而实现事件处理的方式
使用冒泡机制进行事件绑定不仅能够大大降低内存消耗，提高程序性能，而且能够工作在动态修改dom结构的情况下
示例：
<div id="box">
<button>按钮1</button>
<button>按钮2</button>
<button>按钮3</button>
<button>按钮4</button>
<button>按钮5</button>
<button>按钮6</button>
<button>按钮7</button>
<button>按钮8</button>
</div>
<script>
var divBox = document.getElementById('box');
divBox.addEventListener('click', function(event){
var target = event.target;
if(target.nodeName.toLowerCase() === 'button') {
console.log(target[xss_clean]);
}
});
</script>
上述代码把事件委托在box元素上，点击box元素内的button时，根据target判断事件源来处理click事件，在这个例子中，每个button的内部文本点击后会在console输出
5. 事件冒泡和事件捕获
事件捕获就是与事件冒泡相反的传递过程，当一个元素发生事件时，先进行事件捕获，直到事件根节点。事件捕获到了根节点后，将会改变事件传递机制，开始进行事件冒泡。事件冒泡将会从根节点向下传递，直到事件触发元素。但是绝大多数情况下，我们使用的都是事件冒泡
示例：
<div id="outer"
<div id="inner">
<button>按钮</button>
</div>
</div>
<script>
var outer = document.getElementById('outer');
var inner = document.getElementById('inner');
var btn = document.getElementsByTagName('button')[0];
outer.addEventListener('click',function(){
console.log('outer');
},false);
inner.addEventListener('click',function(){
console.log('inner');
},false);
btn.addEventListener('click', function(){
console.log('btn');
},false);
</script>
上述代码有三个div元素，分别是最外层的outer、中间的inner、和一个嵌套在inner元素中的button。当点击button按钮时，执行顺序是inner → outer → btn。这种顺序体现了事件冒泡机制，因为按钮已经触发了事件，下沉下来，然后把事件传到了inner，然后再一层一层向外冒泡，最后到达了outer
6. 总结
在JavaScript中，事件冒泡的机制是很重要的，几乎在所有DOM操作中都会用到，也是实现事件委托的主要手段。当我们了解事件冒泡机制后，就可以根据实际情况来利用这个机制达到更好的开发效果。