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()还好用)

  

   [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]