这篇文章主要介绍了js事件监听器用法,以实例形式较为详细的分析了javascript事件监听器使用注意事项与相关技巧,需要的朋友可以参考下
本文实例讲述了js事件监听器用法。分享给大家供大家参考。具体分析如下：

1、当同一个对象使用.onclick的写法触发多个方法的时候，后一个方法会把前一个方法覆盖掉，也就是说，在对象的onclick事件发生时，只会执行最后绑定的方法。而用事件监听则不会有覆盖的现象，每个绑定的事件都会被执行。如下：

window.onload = function(){
  var btn = document.getElementById("yuanEvent");
  btn.onclick = function(){
    alert("第一个事件");
  }
  btn.onclick = function(){
    alert("第二个事件");
  }
  btn.onclick = function(){
    alert("第三个事件");
  }
}

最后只输出：第三个事件，因为后一个方法都把前一个方法覆盖掉了。

原生态的事件绑定函数addEventListener：

var eventOne = function(){
  alert("第一个监听事件");
}
function eventTwo(){
  alert("第二个监听事件");
}
window.onload = function(){
  var btn = document.getElementById("yuanEvent");
  //addEventListener：绑定函数
  btn.addEventListener("click",eventOne);
  btn.addEventListener("click",eventTwo);
}

输出：第一个监听事件 和 第二个监听事件

2、采用事件监听给对象绑定方法后，可以解除相应的绑定，写法如下：

var eventOne = function(){
  alert("第一个监听事件");
}
function eventTwo(){
  alert("第二个监听事件");
}
window.onload = function(){
  var btn = document.getElementById("yuanEvent");
  btn.addEventListener("click",eventOne);
  btn.addEventListener("click",eventTwo);
  btn.removeEventListener("click",eventOne);
}

输出：第二个监听事件

3、解除绑定事件的时候一定要用函数的句柄，把整个函数写上是无法解除绑定的。
错误写法:

btn.addEventListener("click",function(){
  alert(11);
});
btn.removeEventListener("click",function(){
  alert(11);
});

正确写法：

btn.addEventListener("click",eventTwo);
btn.removeEventListener("click",eventOne);

总结：对函数进行封装后的监听事件如下，兼容各大主流浏览器。

/*
 * addEventListener:监听Dom元素的事件
 * 
 * target：监听对象
 * type：监听函数类型，如click,mouseover
 * func：监听函数
 */
function addEventHandler(target,type,func){
  if(target.addEventListener){
    //监听IE9，谷歌和火狐
    target.addEventListener(type, func, false);
  }else if(target.attachEvent){
    target.attachEvent("on" + type, func);
  }else{
    target["on" + type] = func;
  } 
}
/*
 * removeEventHandler:移除Dom元素的事件
 * 
 * target：监听对象
 * type：监听函数类型，如click,mouseover
 * func：监听函数
 */

function removeEventHandler(target, type, func) {
  if (target.removeEventListener){
    //监听IE9，谷歌和火狐
    target.removeEventListener(type, func, false);
  } else if (target.detachEvent){
    target.detachEvent("on" + type, func);
  }else {
    delete target["on" + type];
  }
}
var eventOne = function(){
  alert("第一个监听事件");
}
function eventTwo(){
  alert("第二个监听事件");
}
window.onload = function(){
  var bindEventBtn = document.getElementById("bindEvent");
  //监听eventOne事件
  addEventHandler(bindEventBtn,"click",eventOne);
  //监听eventTwo事件
  addEventHandler(bindEventBtn,"click",eventTwo );
  //监听本身的事件
  addEventHandler(bindEventBtn,"click",function(){
    alert("第三个监听事件");
  });
  //取消第一个监听事件
  removeEventHandler(bindEventBtn,"click",eventOne);
  //取消第二个监听事件
  removeEventHandler(bindEventBtn,"click",eventTwo);
}

实例：

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Event</title>
    <script type="text/javascript">
      function addEventHandler(target,type,func){
        if(target.addEventListener){
          //监听IE9，谷歌和火狐
          target.addEventListener(type, func, false);
        }else if(target.attachEvent){
          target.attachEvent("on" + type, func);
        }else{
          target["on" + type] = func;
        } 
      }
      function removeEventHandler(target, type, func) {
        if (target.removeEventListener){
          //监听IE9，谷歌和火狐
          target.removeEventListener(type, func, false);
        } else if (target.detachEvent){
          target.detachEvent("on" + type, func);
        }else {
          delete target["on" + type];
        }
      }
      var eventOne = function(){
        alert("第一个监听事件");
      }
      function eventTwo(){
        alert("第二个监听事件");
      }
      window.onload = function(){
        var bindEventBtn = document.getElementById("bindEvent");
        //监听eventOne事件
        addEventHandler(bindEventBtn,"click",eventOne);
        //监听eventTwo事件
        addEventHandler(bindEventBtn,"click",eventTwo );
        //监听本身的事件
        addEventHandler(bindEventBtn,"click",function(){
          alert("第三个监听事件");
        });
        //取消第一个监听事件
        removeEventHandler(bindEventBtn,"click",eventOne);
        //取消第二个监听事件
        removeEventHandler(bindEventBtn,"click",eventTwo);
      }
    </script>
  </head>
  <body>
    <input type="button" value="测试" id="bindEvent">
    <input type="button" value="测试2" id="yuanEvent">
  </body>
</html>

转自：http://www.jb51.net/article/67051.htm

js事件监听器用法实例详解的更多相关文章

  1. js事件监听器用法实例详解-注册与注销监听封装

    本文实例讲述了js事件监听器用法.分享给大家供大家参考.具体分析如下: 1.当同一个对象使用.onclick的写法触发多个方法的时候,后一个方法会把前一个方法覆盖掉,也就是说,在对象的onclick事 ...

  2. python中argparse模块用法实例详解

    python中argparse模块用法实例详解 这篇文章主要介绍了python中argparse模块用法,以实例形式较为详细的分析了argparse模块解析命令行参数的使用技巧,需要的朋友可以参考下 ...

  3. 【python库模块】Python subprocess模块功能与常见用法实例详解

    前言 这篇文章主要介绍了Python subprocess模块功能与常见用法,结合实例形式详细分析了subprocess模块功能.常用函数相关使用技巧. 参考 1. Python subprocess ...

  4. PHP中__get()和__set()的用法实例详解

    php面向对象_get(),_set()的用法 一般来说,总是把类的属性定义为private,这更符合现实的逻辑.但是,对属性的读取和赋值操作是非常频繁的,因此在PHP5中,预定义了两个函数“__ge ...

  5. jQuery中on()方法用法实例详解

    这篇文章主要介绍了jQuery中on()方法用法,实例分析了on()方法的功能及各种常见的使用技巧,并对比分析了与bind(),live(),delegate()等方法的区别,需要的朋友可以参考下 本 ...

  6. js确认框confirm()用法实例详解

    先为大家介绍javascript确认框的三种使用方法,具体内容如下 第一种方法:挺好用的,确认以后才能打开下载地址页面.原理也比较清晰.主要用于删除单条信息确认. ? 1 2 3 4 5 6 7 8 ...

  7. Python回调函数用法实例详解

    本文实例讲述了Python回调函数用法.分享给大家供大家参考.具体分析如下: 一.百度百科上对回调函数的解释: 回调函数就是一个通过函数指针调用的函数.如果你把函数的指针(地址)作为参数传递给另一个函 ...

  8. jquery中attr()与prop()函数用法实例详解(附用法区别)

    本文实例讲述了jQuery中attr()与prop()函数用法.分享给大家供大家参考,具体如下: 一.jQuery的attr()方法 jquery中用attr()方法来获取和设置元素属性,attr是a ...

  9. Oracle触发器用法实例详解

    转自:https://www.jb51.net/article/80804.htm. 本文实例讲述了Oracle触发器用法.分享给大家供大家参考,具体如下: 一.触发器简介 触发器的定义就是说某个条件 ...

随机推荐

  1. hdu4976 A simple greedy problem. （贪心+DP）

    http://acm.hdu.edu.cn/showproblem.php?pid=4976 2014 Multi-University Training Contest 10 1006 A simp ...

  2. LINUX下搭建VPN

    一.准备 需要 dkms-2.0.17.5-1.noarch.rpm.ppp-2.4.5-33.0.rhel6.x86_64.rpm.pptpd-1.4.0-1.el6.x86_64.rpm,并依次安 ...

  3. SQL Server数据库邮件配置

    一.数据库邮件介绍 数据库邮件是从SQL Server数据库引擎中发送电子邮件的企业解决方案,通过使用数据库邮件,数据库应用程序可以向用户发送电子邮件.邮件中可以包含查询结果,还可以包含来自网络中任何 ...

  4. Windows Phone 开发环境的搭建

    1. 系统 系统:Windows 7(32 位).Windows 7(64 位).Windows Vista SP2(32 位)和 Windows Vista(64 位)或者更高版本. 不支持 :Wi ...

  5. 如何禁用wordpress的RSS Feed

    RSS(Really Simple Syndication)是一种描述和同步网站内容的格式,早期使用RSS订阅能更快地获取信息,网站提供RSS输出,有利于让用户获取网站内容的最新更新.但随着采集技术的 ...

  6. JS快速获取图片宽高的方法

    快速获取图片的宽高其实是为了预先做好排版样式布局做准备,通过快速获取图片宽高的方法比onload方法要节省很多时间,甚至一分钟以上都有可能,并且这种方法适用主流浏览器包括IE低版本浏览器. 我们一步一 ...

  7. linux 之常见的好用命令

    参考网址:软件匠艺小组之第八期把命令行玩飞起来 1.如果想要将文件重定向到文件里,而又想看重定向的内容, tee命令 例如:ls | tee foot.txt 2.如果想要字母显示为大写独特的,命令: ...

  8. HDU 5228

    #include<stdio.h> #include<string.h> *]; int main(){ int t; scanf("%d",&t) ...

  9. phpstorm的调试工具xdebug

    1.需求 知道xdebug的使用方法 2.安装xdebug http://www.awaimai.com/1290.html 3.配置phpstorm http://www.awaimai.com/1 ...

  10. python 循环语句的else语句用法，当循环条件变为假，切不是通过breakbreak终止的时候，就会执行这个else语句。

    循环语句可以有一个else子句:当(for)循环迭代完整个列表或(while)循环条件变为假,而非由break语句终止时,就会执行这个else语句.下面循环搜索质数的代码例示了这一点: >> ...