首页
所有分类
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面向对象编程(一) 实例代码
Jun 25 Javascript
JavaScript内核之基本概念
Oct 21 Javascript
利用window.name实现windowStorage代码分享
Jan 02 Javascript
ECMAScript6新增值比较函数Object.is
Jun 12 Javascript
jQuery实现的进度条效果
Jul 15 Javascript
javascript作用域、作用域链(菜鸟必看)
Jun 16 Javascript
JavaScript制作弹出层效果
Dec 02 Javascript
vue.js事件处理器是什么
Mar 20 Javascript
vue.js实现带日期星期的数字时钟功能示例
Aug 28 Javascript
ES6 Promise对象的含义和基本用法分析
Jun 14 Javascript
vue swipe自定义组件实现轮播效果
Jul 03 Javascript
js判断非127开头的IP地址的实例代码
Jan 05 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
R71E(1) 胆机(1) React(6) R9700(1) ICOM(2) GTX1660(1) WR-800F(1) 对讲机(1) R72E(1) DE1102(1)
You might like
上传多个文件的PHP脚本
2006/11/26 PHP
Zend framework处理一个http请求的流程分析
2010/02/08 PHP
thinkphp 一个页面使用2次分页的实现方法
2013/07/15 PHP
PHP资源管理框架Assetic简介
2014/06/12 PHP
CentOS6.5 编译安装lnmp环境
2014/12/21 PHP
js操作Xml(向服务器发送Xml,处理服务器返回的Xml)(IE下有效)
2009/01/30 Javascript
菜鸟javascript基础资料整理2
2010/12/06 Javascript
JS中的异常处理方法分享
2013/12/22 Javascript
JavaScript中的索引数组、关联数组和静态数组、动态数组讲解
2014/11/08 Javascript
jQuery实现带滚动线条导航效果的方法
2015/01/30 Javascript
jquery实现页面关键词高亮显示的方法
2015/03/12 Javascript
JavaScript 实现的 zip 压缩和解压缩工具包Zip.js使用详解
2015/12/14 Javascript
javascript函数命名的三种方式及区别介绍
2016/03/22 Javascript
JavaScript lodash常见用法系列小结
2016/08/24 Javascript
canvas实现图像放大镜
2017/02/06 Javascript
Vue+element 解决浏览器自动填充记住的账号密码问题
2019/06/11 Javascript
vue实现路由懒加载及组件懒加载的方式
2019/06/11 Javascript
微信小程序3种位置API的使用方法详解
2019/08/05 Javascript
小程序角标的添加及绑定购物车数量进行实时更新的实现代码
2020/12/07 Javascript
用于统计项目中代码总行数的Python脚本分享
2015/04/21 Python
Python中的复制操作及copy模块中的浅拷贝与深拷贝方法
2016/07/02 Python
Python守护线程用法实例
2017/06/23 Python
python批量从es取数据的方法(文档数超过10000)
2018/12/27 Python
Django框架下静态模板的继承操作示例
2019/11/08 Python
python爬虫爬取网页数据并解析数据
2020/09/18 Python
html5 web本地存储将取代我们的cookie
2012/12/26 HTML / CSS
台湾旅游网站：雄狮旅游网
2017/08/16 全球购物
技校生自我鉴定
2013/12/08 职场文书
《争吵》教学反思
2014/02/15 职场文书
房产授权委托书范本
2014/09/22 职场文书
爱心捐助活动总结
2015/05/09 职场文书
入党积极分子考察意见
2015/06/02 职场文书
go 实现简易端口扫描的示例
2021/05/22 Golang
MySQL连接查询你真的学会了吗？
2021/06/02 MySQL
Python查找算法的实现 （线性、二分，分块、插值查找算法)
2022/04/24 Python
Python中requests库的用法详解
2022/06/05 Python