这篇文章主要介绍了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. web开发前端学习

    bootstrap:  http://www.bootcss.com/ bootstrap:   http://bootsnipp.com/snippets/featured/single-colum ...

  2. R入门<二>-时间序列研究

    续之前那篇随笔 前天写完随笔后,很自豪的拿出来去跟带我入数据挖掘和SAS基础的大牛@八公炫耀,然后收获了一堆时间序列的材料,非常感谢大牛! ARIMA就是看图形,ACF和PACF,原理不需要知道,因为 ...

  3. js做灯泡明灭特效

    W3school中的js专讲这一块 http://www.w3school.com.cn/tiy/t.asp?f=js_lightbulb

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

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

  5. .NET Core Preview

    .NET Core Preview 这是很容易上手使用.NET Core在您选择的平台上. 你只需要一个命令行,一个文本编辑器和10分钟的时间. 原文链接:https://www.microsoft. ...

  6. Android学习笔记（五）——活动的生命周期

    //此系列博文是<第一行Android代码>的学习笔记,如有错漏,欢迎指正! 为了能写出流畅连贯的程序,我们需要了解一下活动的生命周期. 一.返回栈 Android 中的活动是可以层叠的. ...

  7. OpenGL中平移、旋转、缩放矩阵堆栈操作

    在OpenGL中,图元的几何变换均为线性变换,通过矩阵变换实现.OpenGL中的坐标用齐次坐标表示,即(x,y,z)表示成(x',y',z',h),其中x=x'/h; y=y'/h; z=z'/h. ...

  8. SPOJ 1811 Longest Common Substring

    Description 给出两个字符串,求最长公共子串. Sol SAM. 这题随便做啊...后缀数组/Hash+二分都可以. SAM就是模板啊...直接在SAM上跑就行,没有了 \(go[w]\) ...

  9. 34 网络相关函数(二)——live555源码阅读(四)网络

    34 网络相关函数(二)——live555源码阅读(四)网络 34 网络相关函数(二)——live555源码阅读(四)网络 2)socketErr 套接口错误 3)groupsockPriv函数 4) ...

  10. 7 HandlerSet 处理程序链表类——Live555源码阅读(一)基本组件类

    这是Live555源码阅读的第一部分,包括了时间类,延时队列类,处理程序描述类,哈希表类这四个大类. 本文由乌合之众 lym瞎编,欢迎转载 my.oschina.net/oloroso Handler ...