所谓事件冒泡就是事件像泡泡一样从最开始生成的地方一层一层往上冒，比如上图中a标签为事件目标，点击a标签后同时也会触发p、li上的点击事件，一层一层向上直至最外层的html或document。下面是代码示例：
<div> <a>事件冒泡</a> </div> <script> var box = document.getElementById('box'), child = document.getElementById('child'); child.addEventListener('click', function() { alert('我是目标事件'); }, false); box.addEventListener('click', function() { alert('事件冒泡至DIV'); }, false); </script>
上面的代码运行后我们点击a标签，首先会弹出'我是目标事件'提示，然后又会弹出'事件冒泡至DIV'的提示，这便说明了事件自内而外向上冒泡了。
那么我们如何阻止事件冒泡呢？这里就涉及事件的Event对象中的stopPropagation方法，如下：
child.addEventListener('click', function(e) { alert('我是目标事件'); e.stopPropagation(); }, false);
加上stopPropagation方法后，我们再次点击a标签就不会触发div上的click事件了。
2.事件捕获
和事件冒泡相反，事件捕获是自上而下执行，我们只需要将addEventListener的第三个参数改为true就行。
<div> <a>事件冒泡</a> </div> <script> var box = document.getElementById('box'), child = document.getElementById('child'); child.addEventListener('click', function() { alert('我是目标事件'); }, true); box.addEventListener('click', function() { alert('事件冒泡至DIV'); }, true); </script>
此时我们点击a标签，首先弹出的是'事件冒泡至DIV'，其次弹出的是'我是目标事件'，正好与事件冒泡相反。
总结
本文主要介绍了不同DOM级别下的事件处理程序，同时介绍了事件冒泡和捕获的触发原理和方法。熟练地使用不同级别的DOM事件并且解决相应的浏览器兼容性问题对我们的前端项目开发会很有帮助。在下篇文章中，我将给大家介绍DOM事件中Event对象的属性和方法。
以上就是本文的全部内容，希望对大家有所帮助，有兴趣的朋友可以看下《DOM 事件的深入浅出（二）》同时也希望多多支持脚本之家！
您可能感兴趣的文章: