事件冒泡
Posted caicaihong
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了事件冒泡相关的知识，希望对你有一定的参考价值。
在工作做事件冒泡经常遇到，但是事件冒泡很多时候是有作用的。比如我弄一个嵌套层事件，来验证事件冒泡。
<body>
<div id="box1">
我是div
<span id="s1">我是span</span>
</div>
</body>
首先，给span和div和body绑定响应函数：
box1 = document.getElementById("box1"); box1.onclick = function(){ alert("我是div") } s1 = document.getElementById("s1"); s1.onclick = function(event){ alert("我是span") //兼容 event = event || window.event
//取消冒泡 event.cancelBubble = true; } document.body.onclick = function(){ alert("我是body的响应函数") }
当点击span的响应函数时，div和body的响应函数都发生了，这是因为冒泡事件。
通过点击span发生响应，div和body都发生响应，这种影响关系称为事件冒泡
* 事件冒泡（BUbble）
* - 所谓的冒泡就是指事件的向上传导，当后代元素上的事件被触发时，其祖先元素的相同事件也会被触发
* - 在开发中大部分情况冒泡都是有用的，如果不希望发生事件冒泡可以通过事件对象来取消冒泡。，就是谁产生的吗，冒泡就在谁那里取消，比如
* 这个例子，span是最里层的元素，冒泡是由span产生或者div产生，所以取消冒泡就是在后代元素上取消，祖先元素就不会收到后代元素的影响了。（所有浏览器现在都兼容）
以上是关于事件冒泡的主要内容，如果未能解决你的问题，请参考以下文章