首页 > 代码库 > 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事件类方法