Javascript Event事件中IE与标准DOM的比较

1.事件流的区别 IE采用冒泡型事件 Netscape使用捕获型事件 DOM使用先捕获后冒泡型事件示例：复制代码代码如下: <body> <div> <button>点击这里</button> </div> </body> 冒泡型事件模型： button->div->body (IE事件流) 捕获型事件模型： body->div->button (Netscape事件流) DOM事件模型： body->div->button->button->div->body (先捕获后冒泡) 2.事件侦听函数的区别 IE使用: [Object].attachEvent("name_of_event_handler", fnHandler); //绑定函数 [Object].detachEvent("name_of_event_handler", fnHandler); //移除绑定 DOM使用： [Object].addEventListener("name_of_event", fnHandler, bCapture); //绑定函数 [Object].removeEventListener("name_of_event", fnHandler, bCapture); //移除绑定 bCapture参数用于设置事件绑定的阶段，true为捕获阶段，false为冒泡阶段。示例代码：复制代码代码如下: function addEventHandler(object,eventType,fnHandler){ if(object.addEventListener){ //DOM object.addEventListener(eventType, fnHandler, false); }else if(object.attachEvent){ //IE object.attachEvent("on"+eventType, fnHandler); }else{ //others object["on"+eventType]=fnHandler; } } function removeEventHandler(object,eventType,fnHandler){ if(object.removeEventListener){ //DOM object.removeEventListener(eventType, fnHandler, false); }else if(object.detachEvent){ //IE object.detachEvent("on"+eventType, fnHandler); }else{ //others object["on"+eventType]=null; } } addEventHandler(oDiv,"click",function(){alert("clicked")}); 3.事件对象定位(获取) IE：事件对象是window对象的一个属性event，event只能在事件发生时访问，事件处理函数执行完毕，事件对象被销毁。示例：复制代码代码如下: document.onclick=function(){ alert(window.event.type); } DOM：event对象必须作为唯一的参数传递给事件处理函数，且必须为第一个参数。示例：复制代码代码如下: document.onclick=function(){ alert(arguments[0].type); } 4.获取目标(target) IE：var oTarget=oEvent.srcElement; DOM：var oTarget=oEvent.target; 5.阻止事件默认行为 IE：oEvent.returnValue=false; DOM：oEvent.preventDefault(); 示例：复制代码代码如下: //屏蔽网页右键菜单 document.body.oncontextmenu=function(oEvent){ if(document.all){ oEvent=window.event; oEvent.returnValue=false; }else{ oEvent.preventDefault(); } } 6.停止事件复制（冒泡） IE：oEvent.cancelBubble=true; DOM：oEvent.stopPropagation(); 示例：复制代码代码如下: button.onclick=function(oEvent){ if(document.all){ oEvent=window.event; oEvent.cancelBubble=true; }else{ oEvent.stopPropagation(); } } 附一个代码测试窗口：(感觉有些时候这种方式比alert()还好用) div{ margin:0px auto;} #txt1{ font-size:14px; padding:2px 5px;} p{margin:0px auto; width:400px;} Javascript事件测试 Mouse Here Clear [Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

　　推荐阅读

　　jquery+json 通用三级联动下拉列表

Author: shaoyun Email: shaoyun (at) yeah.net Date: 2010-03-10 02:03 Blog: http://shaoyun.cnblogs.com/ 用Jquery实现，原始代码只支持IE，这里我改了一下，我的代码里面有三个版本的实现第一个是通过读取XML>>>详细阅读

本文标题：Javascript Event事件中IE与标准DOM的比较

地址：http://www.17bianji.com/kaifa2/JS/26556.html

1/2 1