IE浏览器的事件冒泡机制

一介绍

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 onclick="gotClick('body元素');">
	<table onclick="gotClick('table元素');">
		<tr onclick="gotClick('tr元素');">
			<td onclick="gotClick('td元素');">
				<p onclick="gotClick('p元素');">
					<input type="button" value="单击我" 
						onclick="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 onclick="gotClick('body元素');">
	<table onclick="gotClick('table元素');">
		<tr onclick="gotClick('tr元素');">
			<td onclick="gotClick('td元素');">
				<p onclick="gotClick('p元素');">
					<input type="button" value="单击我" 
						onclick="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>

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

IE浏览器的事件冒泡机制

猜你喜欢