DOM2和IE的事件传播机制（捕捉，起泡）

最新推荐文章于 2019-11-27 08:31:52 发布
最新推荐文章于 2019-11-27 08:31:52 发布
阅读量154 收藏
点赞数
文章标签： IE Chrome 浏览器 JavaScript ViewUI

 

当事件发生在某个文档节点上时（即事件目标），目标的事件处理程序就会被触发。此外目标的每个祖先节点也有机会处理该事件。
2级DOM的事件传播包含三个阶段:

  1. 捕捉阶段（capturing），事件从顶级文档树节点一级一级向下遍历，直到到达该事件的目标节点。
  2. 到达事件的目标节点，执行目标节点的时间处理程序。
  3. 事件起泡（bubbling），事件从目标节点一级一级向上上溯，直到顶级文档树节点。

相应的，2级DOM通过下面的两个函数给节点对象添加和删除事件处理函数。
      addEventListener(eventType, handler, propagate);
      removeEventListener(eventType, handler, propagate);
三个参数意思分别如下:

  1. eventType: 即事件类型（不加on）。比如："click"。
  2. handler: 事件处理函数。传入参数即为事件对象event。
  3. propagate: 是否只执行捕获和目标节点两个阶段。true的话，只执行1，2两个阶段；false的话，只指向2，3两个阶段。

IE的事件传播只包含上边的2和3两个阶段

相应的，IE通过下面两个函数给节点对象添加和删除事件处理函数。
      attachEvent(eventType, handler);
      detachEvent(eventType, handler);
参数意思同2级DOM对应的函数参数。

 

下面是程序的部分执行结果：

1. 开启捕捉过程，点击SetEventHandler按钮之后，点击Click Me按钮，观察捕捉过程中的事件响应

 

 

2. 开启阻止起泡过程，点击SetEventHandler按钮之后，点击Click Me按钮，观察起泡过程中的事件响应

 

 

以下是Sample的代码，分别给window, document, document.body, divOut, divIn和btnClick针对不同的浏览器追加了事件处理函数，并且在画面上列出执行时候的可配置项，动态模拟各种配置项对事件传播过程的影响，同时也将各种情况下的执行结果显示到了页面上。浏览器（Chrome, IE）。

 

<html>
<head>
	<script type="text/javascript">
		var disablePropagation = true;
		var cancelBubble = false;
		//Simple judge of browser
		var isIE = window.attachEvent ? true : false;
		
		//Short name for document.getElementById
		var byId = function(id) {
			return document.getElementById(id);
		}
		
		// Has event handler already been set.
		var isEventHandlerSetted = false;
		// value setted for Enable Propagate Checkbox at last time.
		var preisEnablePropagate = false;
		// event happend at last time.
		var preEvent = null;
		
		// Set Event Handler for elements
		function setEventHandler() {
			clearTrace();
		
			// remove setted event handlers at last time
			if (isEventHandlerSetted) {
				if (isIE) {
					window.detachEvent('onclick', prtDtlWindow);
					document.detachEvent('onclick', prtDtlDocument);
					document.body.detachEvent('onclick', prtDtlBody);
					byId('divOut').detachEvent('onclick', prtDtlDivOut);
					byId('divIn').detachEvent('onclick', prtDtlDivIn);
					byId('btnClick').detachEvent('onclick', prtDtlClickMeBtn);
				} else {
					window.removeEventListener('click', prtDtl, preisEnablePropagate);
					document.removeEventListener('click', prtDtl, preisEnablePropagate);
					document.body.removeEventListener('click', prtDtl, preisEnablePropagate);
					byId('divOut').removeEventListener('click', prtDtl, preisEnablePropagate);
					byId('divIn').removeEventListener('click', prtDtl, preisEnablePropagate);
					byId('btnClick').removeEventListener('click', prtDtl, preisEnablePropagate);
				}
			}
			
			// Add new event handlers according to new setting.
			var isEnablePropagate = byId("cbxEnablePropagate").checked;
			preisEnablePropagate = isEnablePropagate;
			if (isIE) {
				window.attachEvent('onclick', prtDtlWindow);
				document.attachEvent('onclick', prtDtlDocument);
				document.body.attachEvent('onclick', prtDtlBody);
				byId('divOut').attachEvent('onclick', prtDtlDivOut);
				byId('divIn').attachEvent('onclick', prtDtlDivIn);
				byId('btnClick').attachEvent('onclick', prtDtlClickMeBtn);
			} else {
				window.addEventListener('click', prtDtl, isEnablePropagate);
				document.addEventListener('click', prtDtl, isEnablePropagate);
				document.body.addEventListener('click', prtDtl, isEnablePropagate);
				byId('divOut').addEventListener('click', prtDtl, isEnablePropagate);
				byId('divIn').addEventListener('click', prtDtl, isEnablePropagate);
				byId('btnClick').addEventListener('click', prtDtl, isEnablePropagate);
			}
			
			isEventHandlerSetted = true;
		}
		
		// a series of event handler for IE
		function prtDtlWindow() {
			prtDtl(window.event, window);
		}
		function prtDtlDocument() {
			prtDtl(window.event, document);
		}
		function prtDtlBody() {
			prtDtl(window.event, document.body);
		}
		function prtDtlDivOut() {
			prtDtl(window.event, byId ('divOut'));
		}
		function prtDtlDivIn() {
			prtDtl(window.event, byId ('divIn'));
		}
		function prtDtlClickMeBtn() {
			prtDtl(window.event, byId ('btnClick'));
		}
		
		// print detail formatted event handler execution info.
		function prtDtl(e, currentTarget) {
			if (!isSameEvent(preEvent, e)) {
				clearTrace();
			}
				
			var target = null;
			var curTarget = null;
			if (isIE) {
				target = e.srcElement;
				curTarget = currentTarget
			} else {
				target = e.target;
				curTarget = e.currentTarget;
			}
			
			if (!isSameEvent(preEvent, e))
				trace(target, true);
			trace(curTarget, false);
			
			if (isIE) {
				/* when I hold e directively ussing preEvent, preEvent's srcElement.id 
				 is the same as e's srcElement.id even when I click again.
				 So I use preEvent to hold e's srcElement.id directively.
				 (It seems the preEvent and e always share the same reference, but this
				 is conflict with the result [preEvent === e] which returns false.)
				 Maybe IE uses a completely different logic when compare Event Object I guess, 
				 who hnows.*/
				//preEvent = e;
				preEvent = target.id;
			} else {
				preEvent = e;	
			}
			
			var isCclBubble = byId("cbxCclBubble").checked;
			var isEnablePropagate = byId("cbxEnablePropagate").checked;
			if (isCclBubble || isEnablePropagate) {
				stopEvent(e, curTarget);
			}
		}
		
		function trace(t, isTarget) {
			var targetName = "";
			if (t === window) {
				targetName = "Window";
			} else if (t === document) {
				targetName = "Document";
			} else if (t.getAttribute != null){
				targetName = t.getAttribute('detail');
			} else {
				for (var p in t) {
					if (p.indexof('name') != -1) {
						targetName = p;
						break;
					}
				}
			}
			var traceTxt = byId('traceArea');
			if (isTarget) {
				var browser = "Not IE";
				if (isIE) 
					browser = "IE";	
				traceTxt.value += ("Your Browser is " + browser + ". \n");
				traceTxt.value += ("Event Target is [" + targetName + "]. \n\n\n");
			} else {
				traceTxt.value += ("[" + targetName + "]'s handling function called. \n");
			}
		}
		
		function stopEvent(e, curTarget) {
			var stopAtWindow = byId("cbxWindow").checked;
			var stopAtDocument = byId("cbxDocument").checked;
			var stopAtBody = byId("cbxBody").checked;
			var stopAtOutDiv = byId("cbxOutDiv").checked;
			var stopAtInDiv = byId("cbxInDiv").checked;
			var stopAtClickMeBtn = byId("cbxClickMeBtn").checked;
			
			switch (curTarget) {
				case window:
					stopEventIn(e, stopAtWindow);
					break;
				case document:
					stopEventIn(e, stopAtDocument);
					break;
				case document.body:
					stopEventIn(e, stopAtBody);
					break;
				case byId("divOut"):
					stopEventIn(e, stopAtOutDiv);
					break;
				case byId("divIn"):
					stopEventIn(e, stopAtInDiv);
					break;
				case byId("btnClick"):
					stopEventIn(e, stopAtClickMeBtn);
					break;
				default:
					;
			}
		}
		
		function stopEventIn(e, stop) {
			if (!stop) 
				return;
			if (isIE) {
				e.cancelBubble = true;
				return;
			}
			e.stopPropagation();
		}
		
		function clearTrace() {
			byId("traceArea").value = "";
		}
		
		/* It is strange that IE create several event object for 
		 different elements' event handler.
		 although user only click once. why????? TODO */
		function isSameEvent(preEvent, e) {
		
			if (preEvent == null) {
				return false;
			}
			
			if (isIE) {
				/* It seems preEvent and e share same reference because that even 
				 when i click again and again,
				 preEvent.srcElement.id always has the same value with e.srcElement.id */
				// return (preEvent.srcElement.id == e.srcElement.id);
				return (preEvent == e.srcElement.id);
			}
			
			return preEvent===e;
		}
	</script>
</head>
<body detail="Body">
	<table><tr>
		<td>
			<div id="divOut" detail="outter div" style="height:300; width:300; border:1 red solid">
				<div id="divIn" detail="inner div" style="height:200; width:200; border:1 blue solid">
					<button id="btnClick" type="button" detail="click me button">Click Me</button>
				</div>
			</div>
		</td>
		<td>
			<div id="divSet" detail="Setting div" style="height:300; width:300; border:1 red solid">
				<table>
					<tr><td><button type="button" detail="Setting button" οnclick="setEventHandler()">Set EventHandler</button></td></tr>
					<tr><td><label>
						<input id="cbxEnablePropagate" detail="Enable Propagate Checkbox" type="checkbox"/>Enable Propagate ?</label></td></tr>
					<tr><td><label><input id="cbxCclBubble" detail="Cancel Bubble Checkbox" type="checkbox"/>Cancel Bubble ?</label></td></tr>
					<tr><td><label><input id="cbxWindow" detail="Stop At Window Checkbox" type="checkbox"/>Stop At Window ?</label></td></tr>
					<tr><td><label><input id="cbxDocument" detail="Stop At Docuement Checkbox" type="checkbox"/>Stop At Docuement ?</label></td></tr>
					<tr><td><label><input id="cbxBody" detail="Stop At Body Checkbox" type="checkbox"/>Stop At Body ?</label></td></tr>
					<tr><td><label><input id="cbxOutDiv" detail="Stop At Outdiv Checkbox" type="checkbox"/>Stop At OutDiv ?</label></td></tr>
					<tr><td><label><input id="cbxInDiv" detail="Stop At InDiv Checkbox" type="checkbox"/>Stop At InDiv ?</label></td></tr>
					<tr><td><label><input id="cbxClickMeBtn" detail="Stop At Click me Button" type="checkbox"/>Stop At ClickMeBtn ?</label></td></tr>
				</table>
			<div>
		</td>
		<td>
			<div id="divTrace" style="height:300; width:300; border:1 red solid;">
				<textarea id="traceArea" detail="TextArea" style="width:100%; height:100%"></textarea>
			</div>
		</td>
	</tr></table>
</body>
</html>

 

iteye_14352
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
原生事件绑定（跨浏览器），dom0和dom2的区别？
薛跳跳的博客
06-04 1378
1. DOM0级事件处理程序     通过javascript制定事件处理程序的传统方式，将一个函数赋值给一个事件处理程序属性。特点是简单，跨浏览器。         var btn = document.getElementById("btn"); btn.onclick = function(){ alert('cliked'); } dom0级方法制定的事件处理程序被认为是...
事件冒泡（IE事件流），事件捕获和DOM事件流
阿超的博客
04-08 4415
1 前言《JS高级程序设计》第13章在讲述事件冒泡和事件捕获时没有提供实例，我想这部分内容如果有实例，会有助于读者理解。2 事件冒泡和事件不会首先看一张图：描述了事件冒泡和事件捕获的流程。 首先声明，不同浏览器以及规范在事件流是否会触发顶层元素（document,html,body)有细微的差别，非常混乱。IE事件流，即事件冒泡，是从达到触发条件的最小标签向上冒泡。比如上图中的img，即使绑定了
传统事件绑定、DOM2级事件绑定、以及IE事件绑定区别
Mia_shaungchen的博客
05-13 1004
传统与DOM2级事件绑定的区别： 1.传统事件绑定同一事件句柄只能绑定一个事件函数，绑定多个后面的会覆盖前面的；DOM2级支持同一元素的同一事件句柄可以绑定多个监听函数； 传统：window.onnload=function(){     alert("a");     } window.onnload=function(){     alert("b");     } 打印
js iedom2事件
weixin_43294560的博客
11-27 149
iedom2事件 不能在非ie浏览器中解析 事件支持事件冒泡,ie9以下不支持事件捕获,支持绑定多个相同类型事件 ie9以下会逆序执行绑定的多个相同类型事件 **绑定** 对象名.attachEvent("有on的事件名",函数,是否开启捕获的布尔值) **解绑** 对象名.detachEvent("有on的事件名",非匿名函数); 代码示例： <...
JS中DOM0级和DOM2级以及IE的区别
王小雨的博客
01-11 967
DOM0级和DOM2级在绑定事件上的区别 一、dom0级 1、绑定方式（用html的方式绑定） 使用html属性的方式绑定，如果要调用这个函数，这个函数在js中就要处于全局作用域 function queren(data) { alert(data.value) } （用匿名函数的方式绑定） var btn1=documen
javascript事件捕获机制【深入分析IE和DOM中的事件模型】
10-20
4. 阻止事件传播和默认行为：在实际应用中，可能需要根据业务逻辑的需求，阻止事件冒泡或阻止事件默认行为。 掌握这些知识点对于提升前端开发能力，实现复杂交互非常有帮助。实际操作中，可能还需要参考一些在线...
[Javascript]：DOM绑定事件、事件流机制、事件委托、事件对象
我只是个程序员。
09-19 1591
写JS代码时经常用到DOM事件，却不怎么理解事件的一些相关原理。所以将关于DOM事件的知识系统整理一下，差不多涵盖DOM事件的方方面面。下面用到的事件表格和相关图片都来源于网上(代码都是自己亲手写的，并验证正确)。如有不足或错误之处，请给予指正，非常感谢！ 什么是事件       事件是指发生的事情。在网页中，事件通常是指用户或浏览器自身执行的某种动作，DOM事件则是表示文档和浏览器窗
DOM2高级事件处理
10-24
DOM2级事件模型被除IE外的所有主流浏览器支持，提供了更复杂的事件传播机制和事件处理程序注册方式。 在DOM0级事件处理中，事件仅在发生事件的元素上执行其对应的事件处理程序。然而，DOM2级事件模型引入了**事件...
关于javascript DOM事件模型的两件事
12-11
事件捕捉（Event Capture）的实现问题 W3C DOM Level2的事件模型规范中，事件在DOM树中的传播过程（从根节点到目标节点）被分为了两个阶段：捕捉（Capture）和冒泡（Bubbling）。下面这个图能大概的说明整个过程： ...
【读书笔记】DOM0级 DOM2级 IE三种事件处理程序的区别
helloworld
06-22 436
1、DOM0级事件处理程序：  btn.onclick = function () { alert(this.id); } 特点：每个事件只支持一个处理程序。 2、DOM2级事件处理程序(IE9+也支持)，包括addEventListener()和removeEventListener()： var handler = functiont () { alert(this.id
浅谈IE事件处理与其他浏览器的差异
筱葭的博客
03-05 2141
1、触发事件对象（触发事件的元素被认为是目标target）： （1）IE下，event对象有srcElement属性，但没有target属性。 （2）Firefox下，event对象有target属性，但没有srcElement属性。 （3）Chrome下，event对象同时具有target和srcElement属性。   2、按键码（字符代码）： （1）IE只有keyCode属性。
DOM2级事件绑定的兼容处理
BrightLD的博客
12-21 929
DOM2的兼容处理 DOM2事件绑定，标准浏览器和IE低版本浏览器中除了语法上的区别，还有其它方面的区别 THIS问题 标准 执行事件池中绑定的方法，方法中的THIS是当前操作的元素；会给方法传递事件对象进来，事件对象中存在TARGET等属性； IE低版本 执行方法的时候，方法中的THIS是WINDOW而不是当前元素；事件对象也传递进来了，但是传递进来的值和window.event一样
DOM事件模型总结
weixin_30756499的博客
04-11 291
原帖地址：http://topic.csdn.net/u/20090529/17/832bb57c-b139-41f1-9df3-c6a063e24203.html 前言，关于DOM事件的Bubbling和Capturing——在浏览器解析事件的时候，有两种触发方式，一种叫做Bubbling(冒泡)，另外一种叫做Capturing(捕获)。由上图可以看出来，冒泡的方式效果就是当一个DOM元素的某...
JS IE浏览器事件绑定：HTML事件、dom0事件、dom2事件
boonyaxnn的博客
04-08 796
一、html事件和dom0事件 没有兼容性问题，非IE的dom2事件不能在 IE8及其以下浏览器使用 报错：对象不支持“addEventListener”属性或方法 二、IE浏览器下的dom2事件绑定 1、语法：元素.attachEvent(type,listener) 2、注意： ①事件类型必须有 on ②没有事件捕获 ③按照事件绑定的顺序依次触发...
泛微协同办公平台E-cology9.0版本后台维护手册(D)--流程引擎.docx
最新发布
09-03
泛微后端技术文档
A fast intra mode decision algorithm combining neighboring info
09-03
论文提出了一种用于H.264/AVC高配置文件的快速帧内模式决策算法，旨在降低编码复杂度。 算法基于当前块的内容以及邻块的空间连续性来选择最佳预测模式。 通过使用重建的邻域像素，不同的预测模式会导致不同的残差块，算法利用残差块的特征来辅助模式决策。 提出的算法使用绝对变换差之和（SATD）来衡量残差块，并使用最可能的模式来指示邻块预测模式的影响。 实验结果表明，与全搜索算法相比，所提出的算法在编码性能略有下降的情况下，有效降低了帧内预测的复杂度
《会员卡刷卡消费管理系统专业版》是一款集系统设置、会员管理、充值积分、会员消费、查询统计于一体的软-MbccmsP.zip
09-03
c 《会员卡刷卡消费管理系统专业版》是一款集系统设置、会员管理、充值积分、会员消费、查询统计于一体的软_MbccmsP.zip 《会员卡刷卡消费管理系统专业版》是一款集系统设置、会员管理、充值积分、会员消费、查询统计于一体的软_MbccmsP.zip 《会员卡刷卡消费管理系统专业版》是一款集系统设置、会员管理、充值积分、会员消费、查询统计于一体的软_MbccmsP.zip 《会员卡刷卡消费管理系统专业版》是一款集系统设置、会员管理、充值积分、会员消费、查询统计于一体的软_MbccmsP.zip 《会员卡刷卡消费管理系统专业版》是一款集系统设置、会员管理、充值积分、会员消费、查询统计于一体的软_MbccmsP.zip 《会员卡刷卡消费管理系统专业版》是一款集系统设置、会员管理、充值积分、会员消费、查询统计于一体的软_MbccmsP.zip 《会员卡刷卡消费管理系统专业版》是一款集系统设置、会员管理、充值积分、会员消费、查询统计于一体的软_MbccmsP.zip《会员卡刷卡消费管理系统专业版》是一款集系统设置、会员管理、充值积分、会员消费、查询统计于一体的软_MbccmsP.zip 《会
基于springboot学生选课系统设计与实现.docx
09-03
基于springboot学生选课系统设计与实现.docx
掌握JavaScript事件处理机制：从内嵌到DOM标准
DOM级别2引入了更详细的事件处理机制，而IE4.0及其后续版本则沿用了自己特有的冒泡型事件模型，尽管这种模型与DOM标准不完全一致。 DOM事件流的概念是基于DOM树结构的，事件从最具体的触发元素开始，向上逐级传播至...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值