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

peterlij

浏览: 60945 次
性别:
来自: 西安

最近访客更多访客>>

飞天奔月

a964208170

qq85609655

yuanyuan7891

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

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

IE Chrome 浏览器 JavaScript

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

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

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

eventType: 即事件类型（不加on）。比如："click"。
handler: 事件处理函数。传入参数即为事件对象event。
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" onclick="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>