IE浏览器的事件冒泡机制

最新推荐文章于 2022-09-14 11:41:57 发布

iteye_5722

最新推荐文章于 2022-09-14 11:41:57 发布

阅读量286

点赞数

分类专栏： JavaScript 文章标签： IE浏览器事件冒泡机制

JavaScript 专栏收录该内容

188 篇文章 0 订阅

订阅专栏

一介绍

1、当浏览者在页面上执行了某个动作，页面上实际上有多个元素可以响应该事件，假如单机页面的某个按钮，该按钮又处于<div>元素之内，则实际上用户既单机了该按钮，也单击了<div>元素。

2、IE中的事件传递方向是从事件发生的对象开始，然后依次向该对象所在的父节点传递。这种传递方式是从下向上传递的，因此这种事件的传递机制又称为冒泡。

3、下面应用说明了这种机制的用法

二冒泡机制代码

<!DOCTYPE html>
<html>
<head>
	<meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
	<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
	<title> Internet Explorer事件冒泡机制 </title>
</head>
<body οnclick="gotClick('body元素');">
	<table οnclick="gotClick('table元素');">
		<tr οnclick="gotClick('tr元素');">
			<td οnclick="gotClick('td元素');">
				<p οnclick="gotClick('p元素');">
					<input type="button" value="单击我" 
						οnclick="gotClick('按钮');" />
				</p>
			</td>
		</tr>
	</table>
	<hr/>
	<div id="results"></div>
	<script type="text/javascript">
		var gotClick = function(who) 
		{
			document.getElementById("results").innerHTML
				+= who + " 被单击了 <br />";
		}
	</script>
</body>
</html>

三冒泡机制代码运行结果

四阻止冒泡机制代码

<!DOCTYPE html>
<html>
<head>
	<meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
	<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
	<title> Internet Explorer事件冒泡机制 </title>
</head>
<body οnclick="gotClick('body元素');">
	<table οnclick="gotClick('table元素');">
		<tr οnclick="gotClick('tr元素');">
			<td οnclick="gotClick('td元素');">
				<p οnclick="gotClick('p元素');">
					<input type="button" value="单击我" 
						οnclick="gotClick('按钮'); event.cancelBubble=true;" />
				</p>
			</td>
		</tr>
	</table>
	<hr/>
	<div id="results"></div>
	<script type="text/javascript">
		var gotClick = function(who) 
		{
			document.getElementById("results").innerHTML
				+= who + " 被单击了 <br />";
		}
	</script>
</body>
</html>

五阻止冒泡机制代码运行结果

iteye_5722

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
IE浏览器的事件冒泡机制

一介绍1、当浏览者在页面上执行了某个动作，页面上实际上有多个元素可以响应该事件，假如单机页面的某个按钮，该按钮又处于&lt;div&gt;元素之内，则实际上用户既单机了该按钮，也单击了&lt;div&gt;元素。2、IE中的事件传递方向是从事件发生的对象开始，然后依次向该对象所在的父节点传递。这种传递方式是从下向上传递的，因此这种事件的传递机制又称为冒泡。3、下面应用说明了这种机制...
复制链接

扫一扫