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程序设计有所帮助。

Javascript 相关文章推荐
syntaxhighlighter 使用方法
Jul 02 Javascript
javscript对象原型的一些看法
Sep 19 Javascript
node.js中的fs.chown方法使用说明
Dec 16 Javascript
jquery插入兄弟节点的操作方法
Dec 07 Javascript
概述BootStrap中role=&quot;form&quot;及role作用角色
Dec 08 Javascript
微信小程序中使元素占满整个屏幕高度实现方法
Dec 14 Javascript
浅谈 vue 中的 watcher
Dec 04 Javascript
微信小程序动态生成二维码的实现代码
Jul 25 Javascript
浅谈vue后台管理系统权限控制思考与实践
Dec 19 Javascript
vue将data恢复到初始状态 &amp;&amp; 重新渲染组件实例
Sep 04 Javascript
JavaScript实现多球运动效果
Sep 07 Javascript
React如何使用axios请求数据并把数据渲染到组件
Aug 05 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
You might like
php调用KyotoTycoon简单实例
2015/04/02 PHP
yii2高级应用之自定义组件实现全局使用图片上传功能的方法
2016/10/08 PHP
php的PDO事务处理机制实例分析
2017/02/16 PHP
PHP文件打开关闭及读写操作示例解析
2020/08/06 PHP
用js实现计算代码行数的简单方法附代码
2007/08/13 Javascript
jquery 鼠标滑动显示详情应用示例
2014/01/24 Javascript
基于Javascript实现倒计时功能
2016/02/22 Javascript
JavaScript实现页面定时刷新(定时器,meta)
2016/10/12 Javascript
Windows下使用Nodejs运行js的方法
2017/09/02 NodeJs
angular2/ionic2 实现搜索结果中的搜索关键字高亮的示例
2018/08/17 Javascript
Vue CLI3 开启gzip压缩文件的方式
2018/09/30 Javascript
使用 Angular RouteReuseStrategy 缓存(路由)组件的实例代码
2019/11/01 Javascript
javascript设计模式 ? 访问者模式原理与用法实例分析
2020/04/26 Javascript
python连接MySQL、MongoDB、Redis、memcache等数据库的方法
2013/11/15 Python
Django ORM框架的定时任务如何使用详解
2017/10/19 Python
python实现员工管理系统
2018/01/11 Python
python实现读取大文件并逐行写入另外一个文件
2018/04/19 Python
python实现一组典型数据格式转换
2018/12/15 Python
python pickle存储、读取大数据量列表、字典数据的方法
2019/07/07 Python
Django rstful登陆认证并检查session是否过期代码实例
2019/08/13 Python
解决python Jupyter不能导入外部包问题
2020/04/15 Python
Python趣味实例,实现一个简单的抽奖刮刮卡
2020/07/18 Python
如何基于Python爬虫爬取美团酒店信息
2020/11/03 Python
CSS3+Sprite实现僵尸行走动画特效源码
2016/01/27 HTML / CSS
使用html5 canvas创建太空游戏的示例
2014/05/08 HTML / CSS
Myprotein台湾官方网站:全球领先的运动营养品牌
2018/12/10 全球购物
企业管理专业个人求职信范文
2013/09/24 职场文书
报社实习生自荐信
2014/01/24 职场文书
甜美蛋糕店创业计划书
2014/01/30 职场文书
教师职称自我鉴定
2014/02/12 职场文书
民主评议政风行风整改方案
2014/09/17 职场文书
二年级学生期末评语
2014/12/26 职场文书
停车场管理制度范本
2015/08/05 职场文书
治庸问责工作总结
2015/08/11 职场文书
MySQL8.0.18配置多主一从
2021/06/21 MySQL
微信小程序 WeUI扩展组件库的入门教程
2022/04/21 Javascript