这篇文章主要介绍了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. 7 天玩转 ASP.NET MVC — 第 1 天

    0. 前言正如标题「7 天玩儿转 ASP.NET MVC」所言,这是个系列文章,所以将会向大家陆续推出 7 篇.设想一下,一天一篇,你将从一个愉快的周一开始阅读,然后在周末成为一个 ASP.NET M ...

  2. 字符编码-UNICODE,GBK,UTF-8区别【转转】

    字符编码介绍及不同编码区别 今天看到这篇关于字符编码的文章,抑制不住喜悦(总结的好详细)所以转到这里来.转自:祥龙之子http://www.cnblogs.com/cy163/archive/2007 ...

  3. 字符编码详解及由来(UNICODE,UTF-8,GBK)

        一直对字符的各种编码方式懵懵懂懂,什么ANSI.UNICODE.UTF-8.GB2312.GBK.DBCS.UCS--是不是看的很晕,假如您细细的阅读本文你一定可以清晰的理解他们.Let's ...

  4. Excel 使用宏批量修改单元格内指定文字为红字

    -> step 1:新建宏,进入编辑,使用如下代码: Sub Ss()Dim c As RangeFor Each c In ActiveSheet.UsedRange i = 1 While ...

  5. Shanghai Regional Online Contest 1004

    Shanghai Regional Online Contest 1004 In the ACM International Collegiate Programming Contest, each ...

  6. html 补充

    替换文本属性(Alt)alt 属性用来为图像定义一串预备的可替换的文本.替换文本属性的值是用户定义的.<img src="boat.gif" alt="Big Bo ...

  7. STM32F10xx CAN BUS相关库文件"stm32f10x_can.c"内的库函数解析

    一.背景: 还是继续CAN通信,要节省开发时间,使用库函数可大大降低开发周期,并且还能确保寄存器的配置几 乎是万无一失,所以,在此就STM32F10xx的CAN操作库函数的使用做个简析. STM32有 ...

  8. ajax之get、post

    异步获取数据: <script type="text/javascript"> /** * [showstatus 获取数据] * @return {[type]} [ ...

  9. [Android分享] 【转帖】Android ListView的A-Z字母排序和过滤搜索功能

      感谢eoe社区的分享   最近看关于Android实现ListView的功能问题,一直都是小伙伴们关心探讨的Android开发问题之一,今天看到有关ListView实现A-Z字母排序和过滤搜索功能 ...

  10. git clone

    raw text for ssh: git@github.com:TommyU/avbot_config.git git command on linux: git clone git://githu ...