这篇文章主要介绍了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. LINUX系统知识（转）

    原文链接:http://blog.chinaunix.net/uid-725717-id-2060377.html 在Linux上配置好svnserve,通过eclipse访问,实现版本控制.但是开启 ...

  2. .Net Core 之 图形验证码

    本文介绍.Net Core下用第三方ZKWeb.System.Drawing实现验证码功能. 通过测试的系统: Windows 8.1 64bit Ubuntu Server 16.04 LTS 64 ...

  3. EDW on Hadoop(Hadoop上的数据仓库)技术选型和实践思考

    在这篇文章中, 将讨论EDW on Hadoop 有哪些备选方案, 以及我个人的倾向性, 最后是建构方法.  欢迎转载, 但必须注明原贴(刘忠武,  http://www.cnblogs.com/ha ...

  4. 清北暑假模拟day1 爱

    /* 水题 */ #include<iostream> #include<cstdio> #include<string> #include<cstring& ...

  5. 【C语言入门教程】1.3 C语言“32个”关键字

    关键字是已被C语言标准作为命令.数据类型或者固定函数名的字母组合.关键字不能被用做变量名或函数名.下面列举了C语言的32个关键字,它们遵循C语言的语法使用,形成了C程序设计语言.  序号  关键字 说 ...

  6. cocoapods pod install 安装报错 is not used in any concrete target

    低版本的cocoa pods在编写Podfile文件时这样写就可以了 platform :ios, '8.0'pod 'AFNetworking' 高版本的cocoa pods在编写Podfile文件 ...

  7. C语言中可变参数函数实现原理

    C函数调用的栈结构 可变参数函数的实现与函数调用的栈结构密切相关,正常情况下C的函数参数入栈规则为__stdcall, 它是从右到左的,即函数中的最右边的参数最先入栈.例如,对于函数: void fu ...

  8. PHPCMS调用form类编辑器editor函数动态上传图片附件

    http://w3note.com/web/49.html phpcms v9的系统类库有一个表单类,它封装了表单的一些组件,如编辑器.图片上传.时间选择器.模板选 择器等,更详细请参考form.cl ...

  9. 关于outerWidth()属性

    在写代码的时候,获取元素的宽度通常用到这个属性.此属性具有如下特点: 1.默认情况下,它的值为所有后代元素(含此元素本身)中最大的宽度值. 2.若某后代元素的display属性为none,那么在计算的 ...

  10. mongodb的sql例子（简单版）

    插入数据 db.person.insert({"name":"zfx","age":21}) 查找所有数据 db.person.find() ...