首页 > 代码库 > JS事件类方法

JS事件类方法

1.添加事件

var addEventHandler=function(oTarget,sEventType,fnHandler){

  if(oTarget.addEventListener){

    oTarget.addEventListener(sEventType,fnHandler,false);

  }else if(oTarget.attachEvent){

    oTarget.attachEvent("on"+sEventType,fnHandler);

  }else{

      oTarget["on"+sEventType]=fnHandler;

    }

};

2.移除事件

var removeEventHandler=function(oTarget,sEventType,fnHandler){

  if(oTarget.removeEventListener){

    oTarget.removeEventListener(sEventType,fnHandler,false);

  }else if(oTarget.detachEvent){

    oTarget.detachEvent("on"+sEventType,fnHandler);

  }else{

    oTarget["on"+sEventType]=null;

  }

};

3.事件处理 Bind

var BindAsEventListener=function(object,fun){

  var args=Array.prototype.slice.call(arguments).slice(2);

  return function(event){

    return fun.apply(object,[event|| window.event].contact(args));

  }

}  

//我们知道,Array.prototype.slice.call(arguments)能将具有length属性的对象转成数组,除了IE下的节点集合(因为ie下的dom对象以com对象的形式实现的。)

 var a={length:2,0:‘first‘,1:‘second‘};

Array.prototype.slice.call(a);//["first","second"]

var a={length:2};

Array.prototype.slice.call(a);//[undefined,undefined]

首先,slice有两个用法,一个是String.slice,一个是Array.slice,第一个返回的是字符串,第二个返回的是数组,这里我们看第二个。

Array.prototype.slice.call(arguments)能够将arguments转成数组,那么就是arguments.toArray().slice();到这里,是不是就可以说Array.prototype.slice.call(arguments)的过程就是先将传进来的第一个参数转为数组,在调用slice?

这里我们可以大胆猜想slice的内部实现,如下  

Array.prototype.slice=function(start,end){

  var result=new Array();

  start=start||0;

  end=end||this.length;//this指向调用的对象

  for(var i=start;i<end;i++){

    result.push(this[i]);

  }

  return result;

}

//使用

var Test=function(){

  this.init();

};

Test.prototype={

  init:function(){

    this.name="test";

    this.btn=document.getElementById("test");

    this._fc=BindAsEventListener(this,this._doClick,‘bind event‘);

    addEventHandler(this.btn,"click",this._fc);

  },

  _doClick:function(e,str){

    e.preventDefault();

    alert(this.name+‘ ‘+str);

  },

  destory:function(){

    removeEventHandler(this.btn,"click",this._fc);

  }

}

//事件代理:

var Delegate=function(parent,eventType,selector,fn,that){

  eventType=eventType||"click";

  if(!parent){

    return;

  }

  if(typeof selector !=="function"){

    return;

  }

  if(typeof selector !=="string"){

    return;

  }

  var handle=function(e){

    var evt=window.event?window.event:e;

    var target=evt.target||evt.srcElement;

    target=getDlgElement(target);

    if(target){

      fn.call(that,{target:target,event:e});

    }

  };

  var getDlgElement=function(ele){

    if(!ele){

      return null;

    }

    return ((ele.id===selector)||

        (ele.className && ele.className.indexOf(selector)!=-1))?ele:getDlgElement(ele.parentNode);

  };

  parent["on"+eventType]=handle;

};

 

var Test2=function(){

  this.init();

};

Test2.prototype={

  init:function(){

    var me=this;

    Delegate(document,"click","classname",function(e){

      e.event.preventDefault();

      var obj=e.target;

      me.setValue(obj,"test");

    },this)

  },

  setValue:function(elem,str){

    elem:setAttribute("data-value",str);

  }

}

 

JS事件类方法