Javascript添加监听与删除监听用法详解
本文实例讲述了Javascript添加监听与删除监听的用法。分享给大家供大家参考。具体分析如下:
js中事件监听就是利用addEventListener来绑定一个事件,这个用法在jquery中非常常用并且简单,但在原生js中比较复杂,这里整理了addEventListener事件各方法的测试与例子供大家参考学习。
在前两天做播放器的时候添加监听后删除监听遇到了一点麻烦,删不掉,后来看了一下才发现,参数需要完全对应,什么叫完全对应呢,换句话说:
$('.video')[0].addEventListener('timeupdate',currentTimeHandler,true);
比如这句,需要传入三个参数,这样才能够删除,为什么一定要这样,没错,蛋疼的地方就在这里:
在add和remove时,第三个参数确实可以不写,但此时他们的默认情况是不一样的!!
通常情况下addEventListener是false…
1、添加自定义事件监听
vareventHandlesCounter=1;//统计添加事件监听的个数,0作为预留位 functionaddEvent(obj,evt,fn){ if(!fn.__EventID){fn.__EventID=eventHandlesCounter++;} if(!obj.__EventHandles){obj.__EventHandles=[];} if(!obj.__EventHandles[evt]){ obj.__EventHandles[evt]=[]; if(obj["on"+evt]instanceofFunction){ obj.__EventHandles[evt][0]=obj["on"+evt]; obj["on"+evt]=handleEvents; } } obj.__EventHandles[evt][fn.__EventID]=fn; functionhandleEvents(){ varfns=obj.__EventHandles[evt]; for(vari=0;i<fns.length;i++) fns[i].call(this); } }
2、自定义删除事件监听
functiondelEvent(obj,evt,fn){ if(!obj.__EventHandles||!obj.__EventHandles[evt]||!fn.__EventID){ returnfalse; } if(obj.__EventHandles[evt][fn.__EventID]==fn){ deleteobj.__EventHandles[evt][fn.__EventID]; } }
3.对上述方法进行修正
functionaddEvent(obj,evt,fn,useCapture){ if(obj.addEventListener){//优先使用W3C事件注册 obj.addEventListener(evt,fn,!!useCapture); }else{ if(!fn.__EventID){fn.__EventID=addEvent.__EventHandlesCounter++;} if(!obj.__EventHandles){obj.__EventHandles=[];} if(!obj.__EventHandles[evt]){ obj.__EventHandles[evt]=[]; if(obj["on"+evt]){ (obj.__EventHandles[evtype][0]=obj["on"+evtype]).__EventID=0; } obj["on"+evtype]=addEvent.execEventHandles; } } } addEvent.__EventHandlesCounter=1; addEvent.execEventHandles=function(evt){ if(!this.__EventHandles){returntrue;} evt=evt||window.event; varfns=this.__EventHandles[evt.type]; for(vari=0;i<fns.length;i++){ if(fns[i]instanceofFunction){ fns[i].call(this); } } }; functiondelEvent(obj,evt,fn,useCapture){ if(obj.removeEventListener){//先使用W3C的方法移除事件处理函数 obj.removeEventListener(evt,fn,!!useCapture); }else{ if(obj.__EventHandles){ varfns=obj.__EventHandles[evt]; if(fns){deletefns[fn.__EventID];} } }
4、标准化事件对象
functionfixEvent(evt){ if(!evt.target){ evt.target=evt.srcElement; evt.preventDefault=fixEvent.preventDefault; evt.stopPropagation=fixEvent.stopPropagation; if(evt.type=="mouseover"){ evt.relatedTarget=evt.fromElement; }elseif(evt.type=="mouseout"){ evt.relatedTarget=evt.toElement; } evt.charCode=(evt.type=="keypress")?evt.keyCode:0; evt.eventPhase=2; evt.timeStamp=(newDate()).getTime(); } returnevt; } fixEvent.preventDefault=function(){this.returnValue=false;} fixEvent.stopPropagation=function(){this.cancelBubble=true;};
fixEvent函数不是单独执行的,它必须有一个事件对象参数,而且只有事件发生时它才被执行!最好的方法是把它整合到addEvent函数的execEventHandles里面。
addEvent.execEventHandles=function(evt){//遍历所有的事件处理函数并执行 if(!this.__EventHandles){returntrue;} evt=fixEvent(evt||window.event);//在这里对其进行标准化操作 varfns=this.__EventHandles[evt.type]; for(vari=0;i<fns.length;i++){ if(fns[i]instanceofFunction){ fns[i].call(this,evt);//并且将其作为事件处理函数的第一个参数 //这样在事件处理函数内部就可以使用统一的方法访问事件对象了}}};
上面是高手写了,下面整理几个实际的监听事情的例子
<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01Transitional//EN"> <html> <head> <title>test6.html</title> <scripttype="text/javascript"> functiontest(){ window.alert("您投了一次票"); document.getElementById("1").detachEvent("onclick",test); } </script> </head> <body> <inputtype="button"value="投票"id="1"/> <scripttype="text/javascript"> document.getElementById("1").attachEvent("onclick",test); </script> </body> </html>
这里使用document.getElementById("1").attachEvent("onclick",test);进行动态的事件绑定,使用
document.getElementById("1").detachEvent("onclick",test)进行动态的时间的取消,这样就实现了这个事件只能相应一次,下次再点击这个按钮的时候就不会再产生什么效果。
下面再演示一个时时监听键盘事件,判断输入的是否是数字,如果不是数字直接动态提示,然后拒绝其输入
<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01Transitional//EN"> <html> <head> <title>test7.html</title> <scripttype="text/javascript"> functiontest(event){ //用户每按下一个按键,就去判断是不是数字 if(event.keyCode<48||event.keyCode>57){ window.alert("您输入的不是一个数字"); returnfalse; } } </script> </head> <body> <inputtype="text"onkeypress="returntest(event);"/>请输入数字 </body> </html>
这里的event就是一个事件对象,他能返回很多的信息,具体请参考相关文档。
补充:事件监听方面的兼容
1.IE使用attachEvent/detachEvent方法来添加和删除事件监听器;w3c使用addEventListener/removeEventListener方法。
2.IE对其事件使用onevent的命名方式,而w3c的是event的命名方式。
3.IE事件监听器内使用的是一个全局的Event对象,而w3c是将event对象作为参数传递给监听器。
4.为了避免触发默认的事件行为,IE的做法是要求程序员设置Event对象中的returnValue属性值为false,而w3c的做法是执行preventDefault方法。
5.IE没有提供对事件捕获阶段的支持。
6.要停止事件的传递,IE的做法是设置event对象的cancelBubble为true,而w3c的做法是设置执行stopPropagation方法。
7.IE将事件监听器当做一个独立的函数来调用,而w3c中它是作为对象的方法来调用的,这表示在ie中事件监听器中的this关键字指向的不是事件发生对象而是一个没用的全局对象(window对象)。
8.IE在使用事件监听器方面存在内存泄露问题。在IE浏览器中,如果要为某个元素创建一个事件监听器,并且在监听器中使用该元素,则在用户进入其他页面之前,该监听器以及相关的DOM节点作占据的内存空间不会被释放。
希望本文所述对大家的javascript程序设计有所帮助。