首页 > 技术文章 > javascript事件处理

luke21 2014-04-13 22:48 原文

一、事件处理程序。

1、DOM0级事件处理程序。

    形如 element.onclick = function(){};

    程序的作用域为元素的作用域。

    移除监听, element.onclick = null;

2、DOM2级事件处理程序。

    形如 element.addEventListener("click",function(){},false);

    程序的作用域为元素的作用域。

    第一个参数为事件类型,第二个参数为事件处理程序,第三个参数为true时表示在捕获阶段调用事件处理程序,为false为冒泡阶段。一般为false。

    能够一次添加多个事件处理程序。

    为了能够移除事件处理程序,第二个参数最好不要使用匿名程序。

    移除监听,element.removeElementListener("click",handler,false);

3、IE事件处理程序。

    IE的事件处理程序跟DOM0和DOM2级事件处理程序有几个比较明显的区别。

    形如 element.attachEvent("onclick",handler);

    程序作用域为全局作用域。

    也可添加多个事件处理程序,触发的顺序与添加顺序相反

    移除监听,element.detachEvent("onclick",handler); 移除规则与DOM2级类似。

二、事件对象。

1、DOM中的事件对象。

    function(event){

        var evt = event;

    }

    事件的目标  event.target;

    事件的类型  event.type;

    事件冒泡处理:

        当event.bubbles = true 时可以调用 event.stoppropagation() 阻止冒泡,也可以阻止事件捕获

    默认事件处理:

        当event.cancelable = true 时可以调用 event.preventDefault() 阻止默认事件

2、IE中的事件对象。

    在使用DOM0级方法添加事件处理程序时,event对象作为window对象的一个属性存在。即:

    function(){

        var evt = window.event;

    }

    如果是使用IE方法添加事件处理程序,也会有一个event作为参数传入事件处理程序中。但是也可以使用window来访问event对象。

    事件的目标 event.srcElement;

    事件的类型 event.type;

    事件冒泡处理:

    event.cancelBubble = true; IE不支持事件捕获,所以也就没有阻止事件捕获的说法了。

    默认事件处理:

    event.returnVaule = false;

三、跨浏览器事件处理事件。

    综上所述,可以写出一个比较好用的跨浏览器事件处理事件对象。

  var EventUtil = {

    addHandler: function(element, type, handler){

      if(element.addEventListener){

        element.addEventListener(type,handler,false);

      }else if(element.attachEvent){

        element.attachEvent("on"+type,handler){

      }else{

        element["on"+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 = false;

      }

    },

    removeHandler: function(element,type,handler){

      if(element.removeEventListener){

        element.removeEventListener(type,handler,false);

      }else if(element.detachEvent){

        element.detachEvent("on"+type,handler);

      }else{

        element["on"+type] = null;

      }

    },

    stopPropagation: function(event){

      if(event.stopPropagation){

        event.stopPropagation();

      }else{

        event.cancelBubble = true;

      }

    }

};

    

推荐阅读