一聚教程网：一个值得你收藏的教程网站

ps教程 | flash教程 | 路由器设置 | Jsp教程 | 加入收藏

PHP教程 Css教程 操作系统 数据库

首页 php教程 asp.net教程 css教程 网页制作 网页特效 手机开发 办公数码
当前位置：一聚教程网 > 网页制作 > js教程

推荐专题

最新下载

热门教程

Javascript 添加监听与删除监听的使用介绍

时间：2014-11-30 编辑：简简单单 来源：一聚教程网

在前两天做播放器的时候添加监听后删除监听遇到了一点麻烦，删不掉，后来看了一下才发现，参数需要完全对应，什么叫完全对应呢，换句话说：

 代码如下 复制代码

$('.video')[0].addEventListener('timeupdate', currentTimeHandler, true);

比如这句，需要传入三个参数，这样才能够删除，为什么一定要这样，没错，蛋疼的地方就在这里：
在add和remove时，第三个参数确实可以不写，但此时他们的默认情况是不一样的！！！

通常情况下addEventListener是false…

1、 添加自定义事件监听

  

 代码如下 复制代码
  var eventHandlesCounter=1;//统计添加事件监听的个数，0作为预留位
    function addEvent(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] instanceof Function){
              obj.__EventHandles[evt][0]=obj["on"+evt];
              obj["on"+evt]=handleEvents;
           }
       }
       obj.__EventHandles[evt][fn.__EventID]=fn;
 
       function handleEvents(){
         var fns = obj.__EventHandles[evt];
         for (var i=0;i             fns[i].call(this);
       }
}

2、自定义删除事件监听

 代码如下 复制代码

function delEvent(obj,evt,fn){
   if(!obj.__EventHandles || !obj.__EventHandles[evt] || !fn.__EventID){
      return false;
   }
   if(obj.__EventHandles[evt][fn.__EventID]==fn){
      delete obj.__EventHandles[evt][fn.__EventID];
   }
}

3. 对上述方法进行修正

 代码如下 复制代码

function addEvent(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) {return true;}
    evt = evt || window.event;
    var fns = this.__EventHandles[evt.type];
    for (var i=0;i        if(fns[i] instanceof Function){
           fns[i].call(this);
       }
    }
};
function delEvent(obj,evt,fn,useCapture){
   if (obj.removeEventListener) {//先使用W3C的方法移除事件处理函数        
       obj.removeEventListener(evt,fn,!!useCapture);
   }else {
      if(obj.__EventHandles){
         var fns = obj.__EventHandles[evt];
         if(fns){delete fns[fn.__EventID];}
      }
   }

4、标准化事件对象

 代码如下 复制代码

function fixEvent(evt){
   if(!evt.target){
      evt.target = evt.srcElement;
      evt.preventDefault=fixEvent.preventDefault;
      evt.stopPropagation = fixEvent.stopPropagation;
      if(evt.type == "mouseover"){
         evt.relatedTarget = evt.fromElement;
      }else if(evt.type == "mouseout"){
         evt.relatedTarget = evt.toElement;
      }
      evt.charCode =(evt.type == "keypress")?evt.keyCode:0;
      evt.eventPhase = 2;
      evt.timeStamp = (new Date()).getTime();
   }
return evt;
}
fixEvent.preventDefault=function(){ this.returnValue=false;}
fixEvent.stopPropagation=function(){this.cancelBubble = true;};

fixEvent函数不是单独执行的，它必须有一个事件对象参数，而且只有事件发生时它才被执行！最好的方法是把它整合到addEvent函数的execEventHandles里面。

 代码如下 复制代码

addEvent.execEventHandles = function (evt) {//遍历所有的事件处理函数并执行                         if (!this.__EventHandles) {return true;}
evt = fixEvent(evt || window.event);//在这里对其进行标准化操作
var fns = this.__EventHandles[evt.type];
for (var i=0;i< fns.length;i++) {
if (fns[i] instanceof Function) {

fns[i].call(this,evt);//并且将其作为事件处理函数的第一个参数
//这样在事件处理函数内部就可以使用统一的方法访问事件对象了 } } };


上面是高手写了，下面整理几个实际的监听事情的例子

 代码如下 复制代码



 
    test6.html
 
 
 
 
   
   
 

这里使用document.getElementById("1").attachEvent("onclick",test);进行动态的事件绑定，使用

document.getElementById("1").detachEvent("onclick",test)进行动态的时间的取消，这样就实现了这个事件只能相应一次，下 

次再点击这个按钮的时候就不会再产生什么效果。 

下面再演示一个时时监听键盘事件，判断输入的是否是数字，如果不是数字直接动态提示，然后拒绝其输入 

 代码如下 复制代码 





  

    test7.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节点作占据的内存空间不会被释放。


好了到了这里关于js事件监听与取消的方法就介绍到了这里哦，欢迎各位点评。

	  
	
                


                
                                

                    
                

                
                
                
                
                
                
                                

                    

                        
相关文章

                    

                    
                

                
                
                
                    
                    
                
            

        

    






    

        

            
热门栏目

        

        
    







    

        

            一聚教程网|
            关于我们|
            联系我们|
            广告合作|
            友情链接|
            版权声明
        

        

            copyRight@2007-2024 www.111COM.NET AII Right Reserved 苏ICP备17065847号-2 
        

        

            
                网站内容来自网络整理或网友投稿如有侵权行为请邮件:yijucomnet@163.com 我们24小时内处理