什么是冒泡事件?

原创 2011年01月11日 21:42:00

 

就是当设定了多个div的嵌套时;即建立了父子关系,当父div与子div共同加入了onclick事件时,当触发了子div的onclick事件后,子div进行相应的js操作。但是父div的onclick事件同样会被触发。这就造成了事件的多层并发,导致了页面混乱。这就是冒泡事件。
消除冒泡事件的方法
阻止JavaScript事件冒泡传递(cancelBubble 、stopPropagation)
下面的一段代码即可以很好的解释是么是冒泡效果,什么叫消除冒泡效果
文章来自学IT网:http://www.xueit.com/html/2010-04/33-190414088420104795201625.html

<html>
<head>
<title> 阻止JavaScript事件冒泡传递(cancelBubble 、stopPropagation)</title>
<meta name="keywords" content="JavaScript,事件冒泡,cancelBubble,stopPropagation" />
<script type="text/javascript">
function doSomething (obj,evt) {
alert(obj.id);
var e=(evt)?evt:window.event; //判断浏览器的类型,在基于ie内核的浏览器中的使用cancelBubble
if (window.event) {
e.cancelBubble=true;
} else {
//e.preventDefault(); //在基于firefox内核的浏览器中支持做法stopPropagation
e.stopPropagation();
}
}
</script>
</head>
<body>
<div id="parent1" onclick="alert(this.id)" style="width:250px;background-color:yellow">
<p ID="ASDF" onclick="alert(this.id)">This is parent1 div.</p>
<div id="child1" onclick="alert(this.id)" style="width:200px;background-color:orange">
<p>This is child1.</p>
</div>
<p>This is parent1 div.</p>
</div>
<br />
<div id="parent2" onclick="alert(this.id)" style="width:250px;background-color:cyan;">
<p>This is parent2 div.</p>
<div id="child2" onclick="doSomething(this,event);" style="width:200px;background-color:lightblue;">
<p>This is child2. Will bubble.</p>
</div>
<p>This is parent2 div.</p>
</div>
</body>
</html> 上面代码保存后打开当点击child1时不仅会弹出 child1 对话框还会弹出 parent1
这就是冒泡事件
但是单击chile2只会弹出child2却不会弹出 parent2,这便是应用了阻止冒泡事件的特效的效果.

事件的冒泡

事件的冒泡(Bubble): 所谓冒泡指的是事件的向上传导,后代元素上的事件被触发时,其祖先元素的相同事件也会触发。      开发中大部分冒泡是有用的,如果不希望发生事件冒泡可以通过事件对象来取消...
  • qq_41173164
  • qq_41173164
  • 2018年02月06日 15:10
  • 8

什么是JS事件冒泡?

(转载自:http://blog.sina.com.cn/s/blog_a322154901015qkk.html) 什么是JS事件冒泡?: 在一个对象上触发某类事件(比如单击onclic...
  • nian1272153207
  • nian1272153207
  • 2016年09月23日 16:53
  • 157

解析Javascript事件冒泡机制

1.事件 2.冒泡
  • u010349169
  • u010349169
  • 2014年04月18日 12:45
  • 11531

冒泡事件和预览事件(隧道事件)

什么是路由事件? MSDN定义如下: 功能定义:路由事件是一种可以针对元素树中的多个侦听器(而不是仅针对引发该事件的对象)调用处理程序的事件。 实现定义:路由事件是一个 CLR 事件,可以...
  • ilipan
  • ilipan
  • 2015年07月22日 20:15
  • 977

解决点击事件冒泡

  • 2015年11月02日 22:30
  • 996B
  • 下载

js之事件冒泡和事件捕获详细介绍

事件——怎样使用事件以及IE和DOM事件模型之间存在哪些主要差别,有需要的朋友可以参考一下 (1)冒泡型事件:事件按照从最特定的事件目标到最不特定的事件目标(document对象)的顺序触发。  ...
  • taoerchun
  • taoerchun
  • 2016年04月27日 16:18
  • 1062

理解事件捕获和事件冒泡

参考资料浅谈事件冒泡与事件捕获 一年前刚开始接触JavaScript的时候就看过有关事件冒泡和事件捕获的文章,但是当时只是看过了就是看过了,没有自己实际的实践,并没有什么自己的理解在里面,属于转眼就...
  • sinat_27088253
  • sinat_27088253
  • 2016年04月03日 17:28
  • 692

如何阻止事件冒泡和默认事件

一、冒泡事件 我们都知道冒泡就像水底气泡浮到水面这一过程。冒泡事件即是事件从最底层逐个经过上面一级级事件的过程,就是冒泡事件。那么如何有效的阻止冒泡事件的发生?其实在非IE浏览器中提供了一个事件对象 ...
  • u011641865
  • u011641865
  • 2016年04月26日 08:52
  • 5690

什么是冒泡和捕获?

把事件捕获和冒泡的过程统称为事件的传播 事件的传播是可以阻止的: 在W3c中,使用stopPropagation()方法在IE下设置cancelBubble = true; 在捕获的...
  • wang710599511
  • wang710599511
  • 2015年11月19日 13:27
  • 123

关于事件冒泡和浏览器默认行为

GoodSite:http://caibaojian.com/javascript-stoppropagation-preventdefault.html    : http://www.cnblog...
  • a5534789
  • a5534789
  • 2015年03月11日 23:17
  • 917
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:什么是冒泡事件?
举报原因:
原因补充:

(最多只允许输入30个字)