这篇文章主要介绍了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. vijos1741 观光公交 （贪心）

    https://www.vijos.org/p/1741 P1741观光公交 请登录后递交 标签:NOIP提高组2011[显示标签]   描述 风景迷人的小城Y市,拥有n个美丽的景点.由于慕名而来的游 ...

  2. JS禁止WEB页面鼠标事件大全

    <!--禁止鼠标右键代码-->:<noscript><ifra:<scriptlanguage=javas:<!--:if(window.Event):doc ...

  3. 微信或移动端网页的meta

    针对微信: <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> ...

  4. Web渗透测试使用Kali Linux（一）渗透测试概要及环境部署

    渗透测试是利用已经发现的漏洞,采用恶意黑客的惯用手段来尝试对漏洞进行攻击. Kali Linux是BackTrack的进化版,是Linux的衍生版本,专门开发用作渗透测试,其中提供了很多的渗透测试工具 ...

  5. js 日期处理，json处理

    模块化js :requirejshttp://www.requirejs.cn/ 好用的日期控件:http://www.bootcss.com/p/bootstrap-datetimepicker/i ...

  6. 一张图告诉你，只会CSS还不够！

    会了CSS语法.会了CSS选择器,你就真的会了CSS吗,来看这张图!是超实用的CSS代码段的导览!熊孩子们,赶紧学习去吧! 这是一个Web开发最好的时代,每天都有30000条职位信息,面向互联网,我们 ...

  7. Hadoop 面试题之Hbase

    Hadoop 面试题之九 16.Hbase 的rowkey 怎么创建比较好?列族怎么创建比较好? 答: 19.Hbase 内部是什么机制? 答: 73.hbase 写数据的原理是什么? 答: 75.h ...

  8. Window环境下搭建MyEclipse+Tomcat+MAVEN+SVN

    1.JDK的安装 首先下载JDK,这个从sun公司官网(http://www.oracle.com/)可以下载,根据自己的系统选择64位还是32位,安装过程就是next一路到底.安装完成之后当然要配置 ...

  9. Swift3.0P1 语法指南——基本操作符

    原档:https://developer.apple.com/library/prerelease/ios/documentation/Swift/Conceptual/Swift_Programmi ...

  10. C++ 传参数 拉起程序

    ShellExecute(NULL,_T("open"),_T("Update.exe"),"Own",NULL,SW_HIDE);