`
cakin24
  • 浏览: 1396293 次
  • 性别: Icon_minigender_1
  • 来自: 西安
社区版块
存档分类
最新评论

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>
 
 
五 阻止冒泡机制代码运行结果

 

 

  • 大小: 3.5 KB
  • 大小: 1.2 KB
1
0
分享到:
评论

相关推荐

    利用事件冒泡(Event Bubbling )获取鼠标下的元素属性

    JavaScript部分可能涉及了`addEventListener`或`attachEvent`(对于旧版IE浏览器)来添加事件监听器,并在事件处理函数中使用`event.target`来获取当前鼠标下的元素,从而展示元素的相关属性,例如ID、类名、文本...

    Javascript 事件冒泡机制详细介绍

    最后,需要注意的是,在早期的IE浏览器中,事件冒泡的机制稍有不同,它使用了“事件捕获”模型,而大多数现代浏览器则默认使用事件冒泡模型。在编写跨浏览器的代码时,需要特别注意这一点。 通过对Javascript事件...

    ie事件捕获控件 捕获ie浏览器到打开链接等等的事件

    在IE浏览器中,事件通常从最具体的元素(如一个按钮)开始,然后向上冒泡到更不具体的元素(如其父元素),直到到达文档的根节点。然而,通过事件捕获,我们可以选择在事件到达目标元素之前处理它,这样可以提前进行...

    js事件监听机制(事件捕获)总结

    而在IE浏览器中,可以通过设置事件对象的cancelBubble属性为true来阻止事件冒泡。 捕获事件流则是在事件到达目标元素之前,事件会先在所有父级元素上进行处理。如果在注册监听器时将useCapture参数设置为true,那么...

    兼容各大浏览器的JavaScript阻止事件冒泡代码

    - `arguments.callee.caller.arguments[0]`的使用是为了在非IE浏览器中正确引用传递给当前函数的事件对象`event`。 #### 五、代码示例 文中还提供了一个使用上述`stopEvent`函数的HTML结构和事件绑定示例。 ```...

    JavaScript事件冒泡机制原理实例解析

    但是,不同的浏览器在实现上存在差异,例如在阻止事件冒泡的方法上,W3C推荐使用`event.stopPropagation()`方法,而早期的IE浏览器则使用`event.cancelBubble=true`来实现同样的功能。 在具体实现上,可以通过...

    js阻止冒泡及jquery阻止事件冒泡示例介绍.docx

    在Web开发中,事件处理是不可或缺的一部分,其中事件冒泡机制尤为重要。事件冒泡是指事件从最深层的节点开始,逐级向上传播至最顶层的节点。在某些情况下,我们希望阻止这种冒泡行为,以达到特定的功能需求或优化...

    详解javascript事件冒泡

    但在早期的IE浏览器中,只实现了事件冒泡,不支持事件捕获。现在,为了跨浏览器兼容性,我们通常只使用事件冒泡阶段进行事件处理。 事件冒泡的典型应用场景包括,但不限于: - 在父元素上添加事件监听器来处理子...

    关于IE浏览器以及Firefox下的javascript冒泡事件的响应层级

    Zakas的《JavaScript高级程序设计》是一本深入探讨JavaScript语言和实践的书籍,其中对事件处理机制有着详尽的解释,是学习JavaScript和事件冒泡的宝贵资源。无论你是初学者还是经验丰富的开发者,都应该对这个主题...

    javascript打造跨浏览器事件处理机制[Blue-Dream出品]

    W3C标准与IE浏览器之间的主要差异在于事件监听和移除的方法不同,以及事件名称前缀和`useCapture`参数的有无。通过抽象出通用的函数来处理这些差异,开发者们可以编写出能够在各种浏览器中运行良好的JavaScript代码...

    【JavaScript源代码】javascript事件冒泡,事件捕获和事件委托详解.docx

    在非标准的IE浏览器中,可以使用`event.cancelBubble = true`。`stopPropagation`仅阻止事件的冒泡,但不会阻止默认行为。 示例: ```javascript let btna = document.getElementById('btn'); btna.onclick = ...

    js之事件冒泡,事件捕获,事件委托

    在非IE浏览器中,`addEventListener`默认在冒泡阶段执行;而在IE8及以下版本,需要使用`attachEvent`来添加事件处理程序,它只支持事件冒泡,并且事件处理程序的执行顺序与添加顺序相反。 阻止事件冒泡是有时必要的...

    js冒泡的问题.docx

    在非IE浏览器中,可以使用`addEventListener`方法的第三个参数来选择事件是采用捕获还是冒泡模式。而在IE中,`attachEvent`方法默认使用的是冒泡模式。 事件冒泡带来的好处包括减少内存占用、提高性能和简化事件...

    js如何取消事件冒泡

    1. **`event.stopPropagation()`**:这是W3C标准的方法,适用于非IE浏览器。当你在事件处理函数中调用`stopPropagation()`时,它会阻止事件继续向上层元素传播。这样,事件就不会在当前元素的任何父元素上触发。以下...

    jquery取消事件冒泡的三种方法(推荐)

    - 在处理旧版IE浏览器的事件冒泡时,需要使用`window.event.cancelBubble = true;`。 在实际开发中,选择合适的事件处理方式可以大大提高程序的性能和用户体验。通过学习和掌握上述三种取消事件冒泡的方法,开发者...

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

    IE浏览器早期版本(IE5.5和IE6)仅支持事件冒泡,不支持事件捕获。而IE8、IE9、IE10及IE11在某些情况下支持事件捕获,但依旧以事件冒泡为主。 在JavaScript中,可以通过addEventListener方法添加事件监听器,并且...

    javascript事件冒泡简单示例

    `,这在IE浏览器中有效。 2. 使用标准的`event.stopPropagation();`,这在大多数现代浏览器中支持。 在上述代码中,两个`for`循环分别处理了两组DOM元素:一组允许事件冒泡,另一组阻止事件冒泡。当鼠标进入阻止...

    JS阻止事件冒泡行为和闭包的方法

    对于旧版的IE浏览器,`window.event`对象提供了`cancelBubble`属性,将它设置为`true`也可以达到同样的效果。 ### JS闭包 闭包是JavaScript中一个非常重要的概念。简单来说,闭包就是能够读取其他函数内部变量的...

    js事件绑定机制1

    - `attachEvent`: 在IE浏览器中(非IE9及以上版本)使用,功能与`addEventListener`类似,但是事件处理顺序与`addEventListener`相反,且不支持事件捕获阶段。 理解JavaScript的事件绑定机制对于编写高性能、可维护...

Global site tag (gtag.js) - Google Analytics