读jQuery之十三添加事件和删除事件的核心方法
2023-06-13 09:14:30 时间
jQuery的事件模块严重依赖于其数据储存(jQuery.data)，你会发现我的代码中的dataManager对象对应它。
这里只提供bind和unbind方法。暂不包含
1，事件命名空间(eventnamespace)
2，事件代理(eventdelegation)
3，特殊事件如domready
接口如下：
复制代码代码如下:
这里只提供bind和unbind方法。暂不包含
1，事件命名空间(eventnamespace)
2，事件代理(eventdelegation)
3，特殊事件如domready
接口如下：
E.bind(el,"click",fn);
E.bind(el,"click",fn,data);
E.unbind(el,"click",fn);
E.unbind(el,"click");
E.unbind(el);
/**
*EventfromjQuery
*2011-06-20snandy
*
*Anumberofhelperfunctionsusedformanagingevents.
*ManyoftheideasbehindthiscodeoriginatedfromjQuerylibrary(1.6.2).
*
*example
*
*E.bind(el,"click",fn);
*
*E.bind(el,"click",fn,data);
*
*E.unbind(el,"click",fn);
*
*E.unbind(el,"click");
*
*E.unbind(el);
*
*/
E=function(window){
varuuid=0,
globalCache={},
doc=window.document,
w3c=!!doc.addEventListener,
expando="snandy"+(""+Math.random()).replace(/\D/g,""),
addListener=w3c?
function(el,type,fn){el.addEventListener(type,fn,false);}:
function(el,type,fn){el.attachEvent("on"+type,fn);},
removeListener=w3c?
function(el,type,fn){el.removeEventListener(type,fn,false);}:
function(el,type,fn){el.detachEvent("on"+type,fn);};
dispatch=w3c?
function(el,type){
try{
varevt=doc.createEvent("Event");
evt.initEvent(type,true,true);
el.dispatchEvent(evt);
}catch(e){alert(e)};
}:
function(el,type){
try{
el.fireEvent("on"+type);
}catch(e){alert(e);}
},
dataManager={
data:function(elem,name,data){
vargetByName=typeofname==="string",
thisCache,
isNode=elem.nodeType,
cache=isNode?globalCache:elem,
id=isNode?elem[expando]:elem[expando]&&expando;
if(!id&&isNode){
elem[expando]=id=++uuid;
}
if(!cache[id]){
cache[id]={};
}
thisCache=cache[id];
if(data!==undefined){
thisCache[name]=data;
}
returngetByName?thisCache[name]:thisCache;
},
removeData:function(elem,name){
varid=elem[expando],
thisCache=globalCache[id];
if(!id||!thisCache){
return;
}
if(typeofname==="string"){
deletethisCache[name];
}else{
deleteglobalCache[id];
}
}
};
functionreturnFalse(){
returnfalse;
}
functionreturnTrue(){
returntrue;
}
functionnow(){
return(newDate).getTime();
}
functionisEmptyObject(obj){
for(variinobj){
returnfalse;
}
returntrue;
}
functionaddEvent(elem,types,handler,data){
if(elem.nodeType===3||elem.nodeType===8){
return;
}
if(handler===false){
handler=returnFalse;
}elseif(!handler){
return;
}
varelemData=dataManager.data(elem),
events=elemData.events,
eventHandle=elemData.handle,
types=types.split("");
if(!events){
elemData.events=events={};
}
if(!eventHandle){
elemData.handle=eventHandle=function(e){
returnevtHandle.call(eventHandle.elem,e);
};
}
eventHandle.elem=elem;
vartype,i=0;
while(type=types[i++]){
varhandleObj={handler:handler,data:data},
handlers=events[type];
if(!handlers){
handlers=events[type]=[];
addListener(elem,type,eventHandle);
}
handlers.push(handleObj);
}
elem=null;
}
functionevtHandle(event){
event=fixEvent(event||window.event);
varhandlers=((dataManager.data(this,"events")||{})[event.type]||[]).slice(0);
event.currentTarget=this;
for(varj=0,l=handlers.length;j<l;j++){
varhandleObj=handlers[j];
event.handler=handleObj.handler;
event.data=handleObj.data;
event.handleObj=handleObj;
varret=handleObj.handler.call(this,event);
if(ret!==undefined){
if(ret===false){
event.preventDefault();
event.stopPropagation();
}
}
if(event.isImmediatePropagationStopped()){
break;
}
}
}
functionremoveEvent(elem,types,handler){
//don"tdoeventsontextandcommentnodes
if(elem.nodeType===3||elem.nodeType===8){
return;
}
if(handler===false){
handler=returnFalse;
}
vartype,origType,i=0,j,
elemData=dataManager.data(elem),
events=elemData&&elemData.events;
if(!elemData||!events){
return;
}
//Unbindalleventsfortheelement
if(!types){
types=types||"";
for(typeinevents){
removeEvent(elem,type);
}
return;
}
//Handlemultipleeventsseparatedbyaspace
//jQuery(...).unbind("mouseovermouseout",fn);
types=types.split("");
while((type=types[i++])){
origType=type;
handleObj=null;
eventType=events[type];
if(!eventType){
continue;
}
if(!handler){
for(j=0;j<eventType.length;j++){
handleObj=eventType[j];
removeEvent(elem,origType,handleObj.handler);
eventType.splice(j--,1);
}
continue;
}
for(j=0;j<eventType.length;j++){
handleObj=eventType[j];
if(handler===handleObj.handler){
//removethegivenhandlerforthegiventype
eventType.splice(j--,1);
}
}
}
//removegenericeventhandlerifnomorehandlersexist
if(eventType.length===0){
deleteevents[origType];
}
//Removetheexpandoifit"snolongerused
if(isEmptyObject(events)){
varhandle=elemData.handle;
if(handle){
handle.elem=null;
}
deleteelemData.events;
deleteelemData.handle;
if(isEmptyObject(elemData)){
dataManager.removeData(elem,"events");
}
}
}
functionEvent(src){
this.originalEvent=src;
this.type=src.type;
this.timeStamp=now();
}
Event.prototype={
preventDefault:function(){
this.isDefaultPrevented=returnTrue;
vare=this.originalEvent;
if(e.preventDefault){
e.preventDefault();
}
e.returnValue=false;
},
stopPropagation:function(){
this.isPropagationStopped=returnTrue;
vare=this.originalEvent;
if(e.stopPropagation){
e.stopPropagation();
}
e.cancelBubble=true;
},
stopImmediatePropagation:function(){
this.isImmediatePropagationStopped=returnTrue;
this.stopPropagation();
},
isDefaultPrevented:returnFalse,
isPropagationStopped:returnFalse,
isImmediatePropagationStopped:returnFalse
};
functionfixEvent(evt){
varprops="altKeyattrChangeattrNamebubblesbuttoncancelablecharCodeclientXclientYctrlKeycurrentTargetdatadetaileventPhasefromElementhandlerkeyCodelayerXlayerYmetaKeynewValueoffsetXoffsetYoriginalTargetpageXpageYprevValuerelatedNoderelatedTargetscreenXscreenYshiftKeysrcElementtargettoElementviewwheelDeltawhich".split(""),
len=props.length;
varoriginalEvent=evt;
evt=newEvent(originalEvent);
for(vari=len,prop;i;){
prop=props[--i];
evt[prop]=originalEvent[prop];
}
if(!evt.target){
evt.target=evt.srcElement||document;
}
if(evt.target.nodeType===3){
evt.target=evt.target.parentNode;
}
if(!evt.relatedTarget&&evt.fromElement){
evt.relatedTarget=evt.fromElement===evt.target?evt.toElement:evt.fromElement;
}
if(evt.pageX==null&&evt.clientX!=null){
vardoc=document.documentElement,body=document.body;
evt.pageX=evt.clientX+(doc&&doc.scrollLeft||body&&body.scrollLeft||0)-(doc&&doc.clientLeft||body&&body.clientLeft||0);
evt.pageY=evt.clientY+(doc&&doc.scrollTop||body&&body.scrollTop||0)-(doc&&doc.clientTop||body&&body.clientTop||0);
}
if(!evt.which&&((evt.charCode||evt.charCode===0)?evt.charCode:evt.keyCode)){
evt.which=evt.charCode||evt.keyCode;
}
if(!evt.metaKey&&evt.ctrlKey){
evt.metaKey=evt.ctrlKey;
}
if(!evt.which&&evt.button!==undefined){
evt.which=(evt.button&1?1:(evt.button&2?3:(evt.button&4?2:0)));
}
returnevt;
}
functionbind(el,type,fn,data){
varhandler;
if(typeoftype==="object"){
for(varkeyintype){
bind(el,key,type[key],data);
}
return;
}
handler=fn;
addEvent(el,type,handler,data);
}
functionunbind(el,type,fn){
if(typeoftype==="object"){
for(varkeyintype){
unbind(el,key,type[key]);
}
}else{
removeEvent(el,type,fn);
}
}
return{
data:dataManager.data,
removeData:dataManager.removeData,
bind:bind,
unbind:unbind
};
}(this);
相关文章
- jquery grid设置行背景色
- 怎么设置jQuery中的事件和动画
- 使用jQuery处理ctrl+enter或者enter发送信息事件
- jquery选择器用法_jQuery属性选择器
- jquery 绑定回车(Enter )事件
- jQuery给动态添加的元素绑定事件的方法详解编程语言
- jquery on绑定事件叠加解决方法详解编程语言
- jQuery常用鼠标事件汇总
- jQuery mouseover和mouseout事件
- JQuery初体验(建议学习jquery)
- jQuery源码分析之Event事件分析
- jQuery中的bind绑定事件与文本框改变事件的临时解决方法
- js或者jquery判断图片是否加载完成实现代码
- jQuery事件的命名空间简单了解
- ff下JQuery无法监听input的keyup事件的解决方法
- jquery实现input输入框实时输入触发事件代码
- jquery新的绑定事件机制on方法的使用方法
- JQuery为页面Dom元素绑定事件及解除绑定方法
- jquery判断元素是否隐藏的多种方法
- Jquery图片延迟加载插件jquery.lazyload.js的使用方法
- JQuery给元素绑定click事件多次执行的解决方法