冒泡 VS 捕获事件流

最新推荐文章于 2024-06-14 11:01:38 发布

fengguowusheng

最新推荐文章于 2024-06-14 11:01:38 发布

阅读量72

点赞数

分类专栏： HTML + JS + CSS 文章标签： javascript ViewUI

本文链接：https://blog.csdn.net/fengguowusheng/article/details/84128947

版权

HTML + JS + CSS 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

事件传播——冒泡与捕获

　　DOM事件标准定义了两种事件流，这两种事件流有着显著的不同并且可能对你的应用有着相当大的影响。这两种事件流分别是捕获和冒泡。和许多Web技术一样，在它们成为标准之前，Netscape和微软各自不同地实现了它们。Netscape选择实现了捕获事件流，微软则实现了冒泡事件流。幸运的是，W3C决定组合使用这两种方法,并且大多数新浏览器都遵循这两种事件流方式。

　　默认情况下，事件使用冒泡事件流，不使用捕获事件流。然而，在Firefox和Safari里，你可以显式的指定使用捕获事件流，方法是在注册事件时传入useCapture参数，将这个参数设为true。

冒泡事件流

　　当事件在某一DOM元素被触发时，例如用户在客户名字节点上点击鼠标，事件将跟随着该节点继承自的各个父节点冒泡穿过整个的DOM节点层次，直到它遇到依附有该事件类型处理器的节点，此时，该事件是onclick事件。在冒泡过程中的任何时候都可以终止事件的冒泡，在遵从W3C标准的浏览器里可以通过调用事件对象上的stopPropagation()方法，在Internet Explorer里可以通过设置事件对象的cancelBubble属性为true。如果不停止事件的传播，事件将一直通过DOM冒泡直至到达文档根。

捕获事件流

　　事件的处理将从DOM层次的根开始，而不是从触发事件的目标元素开始，事件被从目标元素的所有祖先元素依次往下传递。在这个过程中，事件会被从文档根到事件目标元素之间各个继承派生的元素所捕获，如果事件监听器在被注册时设置了useCapture属性为true,那么它们可以被分派给这期间的任何元素以对事件做出处理；否则，事件会被接着传递给派生元素路径上的下一元素，直至目标元素。事件到达目标元素后，它会接着通过DOM节点再进行冒泡。

IE只支持冒泡事件流处理方式

FIREFOX 和 Chrome 支持两种，默认为冒泡事件流处理方式

<html>
	<head>
	<script language="javascript">
	<!--
	function registerAsCapture() {
		document.getElementById("outDiv").addEventListener("click", function(){
					alert('click on out div');
				}, true);
		document.getElementById("innerDiv").addEventListener("click", function(){
					alert('click on inner div');
				}, false);
		document.getElementById("a1").addEventListener("click", function(){
					alert('click on a');
				}, true);
	}
	-->
	</script>
	</head>
	<body>
		<div id="outDiv">
			<div id="innerDiv">
				<a id="a1" href="javascript:void(0);">连接</a>
			</div>
		</div>
		<input type="button" value="注册捕获事件流处理的事件" οnclick="javascript:registerAsCapture();"/><br/>
	</body>
</html>

参考资料

http://baike.baidu.com/view/3696782.htm

http://www.w3cmm.com/javascript/addeventlistener-removeeventlistener.html

fengguowusheng

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
冒泡 VS 捕获事件流

事件传播——冒泡与捕获　　DOM事件标准定义了两种事件流，这两种事件流有着显著的不同并且可能对你的应用有着相当大的影响。这两种事件流分别是捕获和冒泡。和许多Web技术一样，在它们成为标准之前，Netscape和微软各自不同地实现了它们。Netscape选择实现了捕获事件流，微软则实现了冒泡事件流。幸运的是，W3C决定组合使用这两种方法,并且大多数新浏览器都遵循这两种事件流方式。　　...
复制链接

扫一扫