封装javascript事件处理函数绑定和解绑代码

快乐打工仔 分类:实例代码

javascript事件处理函数的绑定和解绑都是常见的操作,还有相关的阻止事件冒泡等。

下面就分享一段代码实例,它实现了相关的封装。

代码如下:

var EventUtil = {
  addHandler:function(elem,type,handler){
    if(elem.addEventListener){
      elem.addEventListener(type,handler,false);
    }else if(elem.attachEvent){
      elem.attachEvent("on"+type,handler);
    }else{
      elem["on"+type]=handler;
    }
  },
  removeHandler:function(elem,type,handler){
    if(elem.removeEventListener){
      elem.removeEventListener(type,handler,false);
    }else if(elem.detachEvent){
      elem.detachEvent("on"+type,handler);
    }else{
      elem["on"+type]=null;
    }
  },
  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;
    }
  },
  stopPropagation:function(event){
    if(event.stopPropagation){
      event.stopPropagation();
    }else{
      event.cancelBubble=true;
    }
  }
};

上面的代码实现封装效果,下面对代码进行一下简单介绍:

(1).EventUtil.addHandler(elem,type,handler),elem是要绑定事件处理函数的元素,type是事件处理函数的类型,不能加on,例如click事件,不能写成onclick,handler规定事件处理函数。

(2).EventUtil.removeHandler(elem,type,handler),elem要解绑的元素,type事件处理函数类型,第三个是事件处理函数。

(3).EventUtil.getEvent(event),获取兼容所有浏览器的事件对象。

(4).EventUtil.getTarget(event),获取触发事件的对象元素。

(5).EventUtil.preventDefault(event),阻止默认动作。

(6).EventUtil.stopPropagation(event),阻止事件冒泡行为。

封装javascript事件处理函数绑定和解绑代码,这样的场景在实际项目中还是用的比较多的,关于封装javascript事件处理函数绑定和解绑代码就介绍到这了。

封装javascript事件处理函数绑定和解绑代码属于前端实例代码,有关更多实例代码大家可以查看

网站出售中,有意者加微信:javadudu

回复

我来回复
  • 暂无回复内容