首页
所有分类
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 基础问答三
Dec 03 Javascript
简略说明Javascript中的= =(等于)与= = =(全等于)区别
Apr 16 Javascript
js面向对象编程之如何实现方法重载
Jul 02 Javascript
Firefox下无法正常显示年份的解决方法
Sep 04 Javascript
AngularJS表单编辑提交功能实例
Feb 13 Javascript
JavaScript实现简单Tip提示框效果
Apr 20 Javascript
less简单入门(CSS 预处理语言)
Mar 08 Javascript
五步轻松实现JavaScript HTML时钟效果
Mar 25 Javascript
node+koa2+mysql+bootstrap搭建一个前端论坛
May 06 Javascript
Node批量爬取头条视频并保存方法
Sep 20 Javascript
详解vue使用插槽分发内容slot的用法
Mar 28 Javascript
mpvue微信小程序开发之实现一个弹幕评论
Nov 24 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
create(1) SingleFlight(2) Next.js(1) el-table(1) frozenset(1) TableField(1) 脚手架(2) set(1) 并发(8) Mybatis-Plus(3)
You might like
PHP4实际应用经验篇(6)
2006/10/09 PHP
THINKPHP项目开发中的日志记录实例分析
2014/12/01 PHP
php使用GD库创建图片缩略图的方法
2015/06/10 PHP
整理php防注入和XSS攻击通用过滤
2015/09/13 PHP
自适应图片大小的弹出窗口
2006/07/27 Javascript
网上应用的一个不错common.js脚本
2007/08/08 Javascript
Extjs学习笔记之六 面版
2010/01/08 Javascript
ExtJs设置GridPanel表格文本垂直居中示例
2013/07/15 Javascript
JavaScript中的DSL元编程介绍
2015/03/15 Javascript
jQuery实现转动随机数抽奖效果的方法
2015/05/21 Javascript
Bootstrap3 Grid system原理及应用详解
2016/09/30 Javascript
jquery利用json实现页面之间传值的实例解析
2016/12/12 Javascript
JS实现的验证身份证及获取地区功能示例
2017/01/16 Javascript
jQuery插件HighCharts实现2D柱状图、折线图的组合多轴图效果示例【附demo源码下载】
2017/03/09 Javascript
JS排序之冒泡排序详解
2017/04/08 Javascript
JavaScript运动框架 链式运动到完美运动（五）
2017/05/18 Javascript
最常用的jQuery表单验证(简单)
2017/05/23 jQuery
详解Vue SPA项目优化小记
2018/07/03 Javascript
angular6的响应式表单的实现
2018/10/10 Javascript
vue css 引入asstes中的图片无法显示的四种解决方法
2020/03/16 Javascript
通过js随机函数Math.random实现乱序
2020/05/19 Javascript
Vue开发中常见的套路和技巧总结
2020/11/24 Vue.js
[42:50]NB vs VP 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
跟老齐学Python之使用Python操作数据库（1）
2014/11/25 Python
python中的__slots__使用示例
2015/02/26 Python
python关键字and和or用法实例
2015/05/28 Python
Python中functools模块函数解析
2017/03/12 Python
python使用itchat库实现微信机器人(好友聊天、群聊天)
2018/01/04 Python
python的concat等多种用法详解
2018/11/28 Python
PyQt5 在label显示的图片中绘制矩形的方法
2019/06/17 Python
French Connection官网：女装、男装及家居用品
2019/03/18 全球购物
德尔福集团DELPHI的笔试题
2012/02/22 面试题
高中生物教学反思
2014/02/05 职场文书
交通事故责任认定书
2015/08/06 职场文书
房产销售员2015年终工作总结
2015/10/22 职场文书
班级元旦晚会开幕词
2016/03/04 职场文书