Javascript添加监听与删除监听用法详解


Posted in Javascript onDecember 19, 2014

本文实例讲述了Javascript添加监听与删除监听的用法。分享给大家供大家参考。具体分析如下:

js中事件监听就是利用addEventListener来绑定一个事件,这个用法在jquery中非常常用并且简单,但在原生js中比较复杂,这里整理了addEventListener事件各方法的测试与例子供大家参考学习。

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

$('.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.length;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<fns.length;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);//并且将其作为事件处理函数的第一个参数

//这样在事件处理函数内部就可以使用统一的方法访问事件对象了 } } };

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

  <head>

    <title>test6.html</title>

 <script type="text/javascript">

  function test(){

   window.alert("您投了一次票");

   document.getElementById("1").detachEvent("onclick",test);

  }

 </script>

  </head>

  

  <body>

    <input type="button" value="投票" id="1"/>

    <script type="text/javascript">

     document.getElementById("1").attachEvent("onclick",test);

    </script>

  </body>

</html>

这里使用document.getElementById("1").attachEvent("onclick",test);进行动态的事件绑定,使用
document.getElementById("1").detachEvent("onclick",test)
进行动态的时间的取消,这样就实现了这个事件只能相应一次,下次再点击这个按钮的时候就不会再产生什么效果。
下面再演示一个时时监听键盘事件,判断输入的是否是数字,如果不是数字直接动态提示,然后拒绝其输入
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

  <head>

    <title>test7.html</title>

 <script type="text/javascript">

  function test(event){

   //用户每按下一个按键,就去判断是不是数字

   if(event.keyCode<48 || event.keyCode > 57){

    window.alert("您输入的不是一个数字");

    return false;

   }

  }

 </script>

  </head>

  

  <body>

    <input type="text" onkeypress="return test(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程序设计有所帮助。

Javascript 相关文章推荐
jQuery $.each的用法说明
Mar 22 Javascript
js 用CreateElement动态创建标签示例
Nov 20 Javascript
使用jquery 简单实现下拉菜单
Jan 14 Javascript
JavaScript中Number.MAX_VALUE属性的使用方法
Jun 04 Javascript
JS实现的Select三级下拉菜单代码
Aug 20 Javascript
javascript事件冒泡简单示例
Jun 20 Javascript
JavaScript实现简单评论功能
Aug 17 Javascript
JS实现页面内跳转的简单代码
Sep 03 Javascript
JS实现的base64加密解密操作示例
Apr 18 Javascript
vue调试工具vue-devtools安装及使用方法
Nov 07 Javascript
Element-ui DatePicker显示周数的方法示例
Jul 19 Javascript
JavaScript实现图片放大预览效果
Nov 02 Javascript
Javascript 实现图片无缝滚动
Dec 19 #Javascript
使用JavaScript获取地址栏参数的方法
Dec 19 #Javascript
JS获取各种宽度、高度的简单介绍
Dec 19 #Javascript
JQuery右键菜单插件ContextMenu使用指南
Dec 19 #Javascript
简单谈谈jQuery(function(){})与(function(){})(jQuery)
Dec 19 #Javascript
jQuery多级弹出菜单插件ZoneMenu
Dec 18 #Javascript
使用jquery菜单插件HoverTree仿京东无限级菜单
Dec 18 #Javascript
You might like
php中的静态变量的基本用法
2014/03/20 PHP
PHP常量使用的几个需要注意的地方(谨慎使用PHP中的常量)
2014/09/12 PHP
php异常处理方法实例汇总
2015/06/24 PHP
php给图片加文字水印
2015/07/31 PHP
PHP导出Excel实例讲解
2016/01/24 PHP
php htmlentities()函数的定义和用法
2016/05/13 PHP
Thinkphp5+uploadify实现的文件上传功能示例
2018/05/26 PHP
IE中jscript/javascript的条件编译
2006/09/07 Javascript
Jquery iframe内部出滚动条
2010/02/11 Javascript
让浏览器非阻塞加载javascript的几种方法小结
2011/04/25 Javascript
ExtJS实现文件下载的方法实例
2013/11/09 Javascript
Javascript控制input输入时间格式的方法
2015/01/28 Javascript
SuperSlide标签切换、焦点图多种组合插件
2015/03/14 Javascript
简易的投票系统以及js刷票思路和方法
2015/04/07 Javascript
vue中axios处理http发送请求的示例(Post和get)
2017/10/13 Javascript
JS中图片压缩的方法小结
2017/11/14 Javascript
详解NODEJS的http实现
2018/01/04 NodeJs
小程序二次贝塞尔曲线实现购物车商品曲线飞入效果
2019/01/07 Javascript
jQuery简单实现根据日期计算星期几的方法
2019/01/09 jQuery
Python subprocess模块详细解读
2018/01/29 Python
利用nohup来开启python文件的方法
2019/01/14 Python
在python image 中安装中文字体的实现方法
2019/08/22 Python
python多进程并发demo实例解析
2019/12/13 Python
Pytorch实现LSTM和GRU示例
2020/01/14 Python
Pygame的程序开始示例代码
2020/05/07 Python
CSS3改变浏览器滚动条样式
2019/01/04 HTML / CSS
canvas画布实现手写签名效果的示例代码
2019/04/23 HTML / CSS
个人求职信范文分享
2013/12/13 职场文书
20年同学聚会邀请函
2014/02/04 职场文书
生育关怀行动实施方案
2014/03/26 职场文书
python 模块重载的五种方法
2021/04/24 Python
Oracle11g r2 卸载干净重装的详细教程(亲测有效已重装过)
2021/06/04 Oracle
浅谈Python数学建模之固定费用问题
2021/06/23 Python
HTML怎么设置下划线?html文字加下划线方法
2021/12/06 HTML / CSS
Python集合set()使用的方法详解
2022/03/18 Python
阿里面试Nacos配置中心交互模型是push还是pull原理解析
2022/07/23 Java/Android