首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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添加监听与删除监听用法详解

- Author -

shichen2014

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
JavaScript 入门基础知识 想学习js的朋友可以参考下
Dec 26 Javascript
jQuery EasyUI API 中文文档 可调整尺寸
Sep 29 Javascript
什么是Node.js？Node.js详细介绍
Jun 01 Javascript
js实现仿阿里巴巴城市选择框效果实例
Jun 24 Javascript
jQuery实现文件上传进度条特效
Aug 12 Javascript
基于JavaScript实现根据手机定位获取当前具体位置（X省X市X县X街道X号）
Dec 29 Javascript
JavaScript正则表达式的分组匹配详解
Feb 13 Javascript
AngularJS ng-style中使用filter
Sep 21 Javascript
使用layer弹窗和layui表单实现新增功能
Aug 09 Javascript
Vue异步组件处理路由组件加载状态的解决方案
Sep 07 Javascript
Vue中el-form标签中的自定义el-select下拉框标签功能
Apr 20 Javascript
详解js创建对象的几种方式和对象方法
Mar 01 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
Flask(2) 限流器(1) 死锁(3) 远程连接(2) 进度条(1) 信号同步(1) 生命周期(1) springCloud(6) reduce()(1) 轮询锁(1)
You might like
PHP文件上传原理简单分析
2011/05/29 PHP
具有时效性的php加密解密函数代码
2013/06/19 PHP
PHP fastcgi模式上传大文件(大约有300多K)报错
2014/09/28 PHP
PHP大转盘中奖概率算法实例
2014/10/21 PHP
php include类文件超时问题处理
2015/02/06 PHP
Laravel网站打开速度优化的方法汇总
2017/07/16 PHP
ExtJs事件机制基本代码模型和流程解析
2010/10/24 Javascript
JavaScript中如何通过arguments对象实现对象的重载
2014/05/12 Javascript
NodeJS中Buffer模块详解
2015/01/07 NodeJs
详解JavaScript对Date对象的操作问题(生成一个倒数7天的数组)
2015/10/01 Javascript
Jquery跨浏览器文本复制插件Zero Clipboard的使用方法
2016/02/28 Javascript
js对象浅拷贝和深拷贝详解
2016/09/05 Javascript
详解Html a标签中href和onclick用法、区别、优先级别
2017/01/16 Javascript
jQuery使用eraser.js插件实现擦除、刮刮卡效果的方法【附eraser.js下载】
2017/04/28 jQuery
Vue自定义事件(详解)
2017/08/19 Javascript
原生JS实现旋转轮播图+文字内容切换效果【附源码】
2018/09/29 Javascript
React Component存在的几种形式详解
2018/11/06 Javascript
Angular6 发送手机验证码按钮倒计时效果实现方法
2019/01/08 Javascript
JavaScript键盘事件响应顺序详解
2019/09/30 Javascript
JS实现点击下拉列表文本框中出现对应的网址,点击跳转按钮实现跳转
2019/11/25 Javascript
12 种使用Vue 的最佳做法
2020/03/30 Javascript
python 中文字符串的处理实现代码
2009/10/25 Python
Python实现对字符串的加密解密方法示例
2017/04/29 Python
Pycharm学习教程（6） Pycharm作为Vim编辑器使用
2017/05/03 Python
在Python程序员面试中被问的最多的10道题
2017/12/05 Python
python正则实现计算器功能
2017/12/14 Python
将TensorFlow的模型网络导出为单个文件的方法
2018/04/23 Python
Python生成短uuid的方法实例详解
2018/05/29 Python
python使用opencv实现马赛克效果示例
2019/09/28 Python
代码总结Python2 和 Python3 字符串的区别
2020/01/28 Python
python实现在线翻译功能
2020/03/03 Python
css3使网页、图片变成灰色兼容大多数浏览器
2014/07/02 HTML / CSS
LN-CC英国：伦敦时尚生活的缩影
2019/09/01 全球购物
幼儿园小班教学反思
2014/02/02 职场文书
七年级历史教学反思
2014/02/05 职场文书
工作作风建设心得体会
2014/10/22 职场文书