首页 > 代码库 > JavaScript高级程序设计42.pdf

JavaScript高级程序设计42.pdf

IE中的事件对象

要访问IE中的event对象有几种不同的方式,取决于指定事件处理程序的方法。在使用DOM0级方法添加事件处理程序时,event对象作为window对象的一个属性存在

wondow.event.type  //IE中的type属性与DOM的type属性相同

在使用attachEvent()添加事件处理程序时,会有一个event对象作为参数被传入到事件处理程序函数中

btn.attachEvent("onclick",function(event){

    alert(event.type);  //"click"

    });

通过HTML特性指定的事件处理程序,还可以通过event变量来访问event对象

<input type="button" value="http://www.mamicode.com/Click Me" onclick="alert(event.type)">

IE中的event对象同样包含于创建它的事件相关的属性和方法,与DOM一样,这些属性和方法也会因为事件类型的不同而不同,但所有的事件对象都包含下列属性和方法

cancelBubble  布尔值  读/写  默认为false,但将其设置为true就可以取消事件冒泡

returnValue  布尔值  读/写  默认为true,但将其设置为false就可以取消事件的默认行为

srcElement  元素  只读  事件的目标

type  字符串  只读  被触发的事件的类型

因为事件处理程序的作用域是根据指定它的方式来确定的,this不会始终等于事件目标,可以使用event.srcElement,比如

btn.onclick=function(){

    alert(window.event.srcElement===this);  //true

    };

btn.attachEvent("onclick",function(event){

    alert(event.srcElement===this);  //false

    });

取消默认行为(与DOM不同的是,没有方法确定事件能否被取消)

link.onclick=function(){

    window.event.returnValue=http://www.mamicode.com/false;

    };

取消事件冒泡,下面例子只显示一次警告框

btn.onclick=function(){

    alert("Clicked");

    window.event.cancelBubble=true;

    };

document.body.onclick=function(){

    alert("Body clicked");

    };

跨浏览器的事件对象

var EventUtil={

  addHandler:function(element,type,handler){

      //省略的代码

      },

  getEvent:function(event){

      return event? event:window.event;

      },

  getTarget:function(event){

      return event.target|event.srcElement;

      },

  preventDefault:function(event){

      if(event.preventDefault){

        event.preventDefault();

        }else{

        event.returnValue=http://www.mamicode.com/false;

        }

      },

  removeHandler:function(element,type,handler){

      //省略的代码

      },

  stopPropagation:function(event){

      if(event.stopPropagation){

        event.stopPropagation();

        }else{

        event.cancelBubble=true;

        }

      }

  };

可以这样使用

event=EventUtil.getEvent(event);  //取得event变量或者属性

EventUtil.stopPropagation(event);  //传入event调用方法