首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

js事件监听器用法实例详解

Posted in Javascript onJune 01, 2015

本文实例讲述了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>

PS：这里再为大家提供一个关于JS事件的在线工具，归纳总结了JS常用的事件类型与相关函数功能：

javascript事件与功能说明大全：

希望本文所述对大家的javascript程序设计有所帮助。

js事件监听器用法实例详解

- Author -

天使小宝

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
js汉字排序问题 支持中英文混排，兼容各浏览器，包括CHROME
Dec 20 Javascript
JavaScript实现的链表数据结构实例
Apr 02 Javascript
javascript判断变量是否有值的方法
Apr 20 Javascript
JavaScript+CSS实现的可折叠二级菜单实例
Feb 29 Javascript
js select下拉联动 更具级联性!
Apr 17 Javascript
iOS + node.js使用Socket.IO框架进行实时通信示例
Apr 14 Javascript
JavaScript获取移动设备型号的实现代码(JS获取手机型号和系统)
Mar 10 Javascript
在Mac下彻底卸载node和npm的方法
May 16 Javascript
微信小程序使用map组件实现解析经纬度功能示例
Jan 22 Javascript
详解微信小程序开发聊天室—实时聊天，支持图片预览
May 20 Javascript
Vue 开发必须知道的36个技巧(小结)
Oct 09 Javascript
使用React-Router实现前端路由鉴权的示例代码
Jul 26 Javascript
JavaScript中isPrototypeOf函数作用和使用实例
Jun 01 #Javascript
JS实现屏蔽shift，Ctrl，alt等功能键的方法
Jun 01 #Javascript
JavaScript使用addEventListener添加事件监听用法实例
Jun 01 #Javascript
JavaScript使用位运算符判断奇数和偶数的方法
Jun 01 #Javascript
JavaScript实现把rgb颜色转换成16进制颜色的方法
Jun 01 #Javascript
JavaScript实现的简单拖拽效果
Jun 01 #Javascript
一看就懂：jsonp详解
Jun 01 #Javascript
Foreign Key(1) hook(1) 腾讯云(1) 外键约束(1) expdp(1) dict(1) Vite(1) 数据备份(2) 字符画(1) 脚本(1)
You might like
PHP中文处理 中文字符串截取(mb_substr)和获取中文字符串字数
2011/11/10 PHP
iis下php mail函数的sendmail配置方法(官方推荐)
2012/04/25 PHP
hadoop常见错误以及处理方法详解
2013/06/19 PHP
PHP 函数call_user_func和call_user_func_array用法详解
2014/03/02 PHP
PHP代码判断设备是手机还是平板电脑(两种方法)
2015/10/19 PHP
PHP的Yii框架中YiiBase入口类的扩展写法示例
2016/03/17 PHP
php5.x禁用eval的操作方法
2018/10/19 PHP
PHP5.5新特性之yield理解与用法实例分析
2019/01/11 PHP
PHP Include文件实例讲解
2019/02/15 PHP
Laravel find in set排序实例
2019/10/09 PHP
JavaScript 基于原型的对象（创建、调用）
2009/10/16 Javascript
子窗口、父窗口和Silverlight之间的相互调用
2010/08/16 Javascript
奉献给JavaScript初学者的编写开发的七个细节
2011/01/11 Javascript
JavaScript中的Truthy和Falsy介绍
2015/01/01 Javascript
jquery实现可自动判断位置的弹出层效果代码
2015/10/12 Javascript
vue.js 表格分页ajax 异步加载数据
2016/10/18 Javascript
js实现倒计时及时间对象
2016/11/15 Javascript
jQuery基于xml格式数据实现模糊查询及分页功能的方法
2016/12/25 Javascript
使用vue-cli打包过程中的步骤以及问题的解决
2018/05/08 Javascript
实例详解BootStrap的动态模态框及静态模态框
2018/08/13 Javascript
vue项目每30秒刷新1次接口的实现方法
2018/12/04 Javascript
python处理中文编码和判断编码示例
2014/02/26 Python
用yum安装MySQLdb模块的步骤方法
2016/12/15 Python
Python中将两个或多个list合成一个list的方法小结
2019/05/12 Python
pandas数据处理进阶详解
2019/10/11 Python
python根据完整路径获得盘名/路径名/文件名/文件扩展名的方法
2020/04/22 Python
Python 爬取淘宝商品信息栏目的实现
2021/02/06 Python
CSS3新增布局之: flex详解
2020/06/18 HTML / CSS
HTML5 manifest离线缓存的示例代码
2018/08/08 HTML / CSS
八皇后问题，输出了所有情况，不过有些结果只是旋转了90度
2016/08/15 面试题
大学新生军训自我鉴定
2014/03/18 职场文书
领导班子四风表现材料
2014/08/23 职场文书
2014医学院领导干部四风对照检查材料思想汇报
2014/09/16 职场文书
购房协议书范本
2014/10/02 职场文书
任命通知范文
2015/04/21 职场文书
创业计划书之养殖业
2019/10/11 职场文书