使用DOM实现事件响应函数的注册、删除及事件传递的终止
看代码，?如下：
?
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><script type="text/javascript">// inner的响应函数var clickInner = function(e){alert(1.1); }; // banner的响应函数 var clickBanner = function(e){ alert(2.1); }// body的响应行数 var clickBody = function(e){ alert(3.1); }// 注册事件响应var addEventHandler = function(){var inner = document.getElementById('inner'); var banner = document.getElementById('banner'); var cancelEvevntBtn = document.getElementById('cancelEvevnt'); if(inner.addEventListener){ inner.addEventListener('click',clickInner,true); banner.addEventListener('click',clickBanner,true); document.body.addEventListener('click',clickBody,true); }else if(inner.attachEvent){ inner.attachEvent('onclick',clickInner); }}// 删除事件响应var removeEventHandler = function(){var inner = document.getElementById('inner'); var banner = document.getElementById('banner'); var cancelEvevntBtn = document.getElementById('cancelEvevnt'); if(inner.removeEventListener){ inner.removeEventListener('click',clickInner,true); banner.removeEventListener('click',clickBanner,true); document.body.removeEventListener('click',clickBody,true); }else if(inner.detachEvent){ inner.detachEvent('onclick',clickInner); }}// 删除捕获事件响应，IE不知捕获事件流，所以IE下无效var removeCapEventHandler = function(){var banner = document.getElementById('banner');if(banner.removeEventListener){banner.removeEventListener('click',clickBanner,true);banner.addEventListener('click',function(e){alert(2.1);e.stopPropagation();},true);}}// 删除冒泡的事件响应var removeBubEventHandler = function(){window.clickHandlerOnDiv = function(e){alert(2);var ev = e || event;if(ev.stopPropagation){ev.stopPropagation();}else {ev.cancelBubble = true;}}} // 给按钮增加响应事件document.onreadystatechange = function () { if(document.readyState=="complete") { var addBtn = document.getElementById('addEvent'); var removeBtn = document.getElementById('removeEvent'); var removeCaptureEvent = document.getElementById('removeCaptureEvent'); var removeBubbleEvent = document.getElementById('removeBubbleEvent'); if(addBtn.addEventListener){ addBtn.addEventListener('click',addEventHandler,false); removeBtn.addEventListener('click',removeEventHandler,false); removeCaptureEvent.addEventListener('click',removeCapEventHandler,false); removeBubbleEvent.addEventListener('click',removeBubEventHandler,false); }else if(addBtn.attachEvent){ addBtn.attachEvent('onclick',addEventHandler); removeBtn.attachEvent('onclick',removeEventHandler); removeBubbleEvent.attachEvent('onclick',removeBubEventHandler); } } } clickHandlerOnBody = function(e){alert(3);}clickHandlerOnDiv = function(e){alert(2);}clickHandlerOnInner = function(e){alert(1);}</script><title>Demo System</title></head><body id="body" onclick="clickHandlerOnBody()">body<div id='banner' style="width:100px;height:100px;background-color:red;" onclick="clickHandlerOnDiv(event)">banner<div id='inner' style="width:50px;height:50px;background-color:yellow;" onclick="clickHandlerOnInner()">inner</div></div><br><input id="addEvent" value="添加事件监听" type="button"/><input id="removeEvent" value="取消事件监听" type="button"/><input id="removeCaptureEvent" value="停止捕获事件流" type="button"/><input id="removeBubbleEvent" value="停止冒泡事件流" type="button"/></body></html>? ?对部分代码进行说明：
? ?1.var ev = e || event;
? ? ? firefox将消息对象作为参数传递到响应函数（e），而IE则定义为全局变量event（window下）。
? ?2.window.clickHandlerOnDiv
? ? ? 全局方法可用通过这种方式进行重写。
? ?3.clickHandlerOnDiv(event)
? ? ? 通过HTML注册事件响应也是可以传递参数的。