JS事件類別方法

標籤：str   window   define   list   eve   內部實現   contact   ++   arguments   

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事件類別方法