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 相关文章推荐
Prototype使用指南之form.js
Jan 10 Javascript
ext for eclipse插件安装方法
Apr 27 Javascript
js读写json文件实例代码
Oct 21 Javascript
Jquery弹出层插件ThickBox的使用方法
Dec 09 Javascript
javascript实现下雨效果
Mar 27 Javascript
手把手搭建安装基于windows的Vue.js运行环境
Jun 12 Javascript
分享19个JavaScript 有用的简写写法
Jul 07 Javascript
js HTML5 canvas绘制图片的方法
Sep 08 Javascript
vue使用代理解决请求跨域问题详解
Jul 24 Javascript
JS实现“全选”和&quot;全不选&quot;功能代码实例
Feb 06 Javascript
es6函数中的作用域实例分析
Apr 18 Javascript
wepy--用vantUI 实现上弹列表并选择相应的值操作
Nov 03 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中通过smtp发邮件的类,测试通过
2007/01/22 PHP
PHP中文分词 自动获取关键词介绍
2012/11/13 PHP
php中get_cfg_var()和ini_get()的用法及区别
2015/03/04 PHP
php使用MySQL保存session会话的方法
2015/06/26 PHP
Javascript 颜色渐变效果的实现代码
2013/10/01 Javascript
JS 实现BASE64_ENCODE和BASE64_DECODE(实例代码)
2013/11/13 Javascript
js简单实现删除记录时的提示效果
2013/12/05 Javascript
a标签click和href执行顺序探讨
2014/06/23 Javascript
Web前端新人笔记之jquery入门心得(新手必看)
2016/05/17 Javascript
jQuery插件echarts实现的循环生成图效果示例【附demo源码下载】
2017/03/04 Javascript
JS实现的透明度渐变动画效果示例
2018/04/28 Javascript
微信小程序分享功能之按钮button 边框隐藏和点击隐藏
2018/06/14 Javascript
基于rollup的组件库打包体积优化小结
2018/06/18 Javascript
JS通过识别id、value值对checkbox设置选中状态
2020/02/19 Javascript
vue+Element中table表格实现可编辑(select下拉框)
2020/05/21 Javascript
一篇超完整的Vue新手入门指导教程
2020/11/18 Vue.js
[58:09]Spirit vs NB Supermajor小组赛 A组败者组决赛 BO3 第三场 6.2
2018/06/03 DOTA
Python中表达式x += y和x = x+y 的区别详解
2017/06/20 Python
Python中asyncio模块的深入讲解
2019/06/10 Python
python3 打印输出字典中特定的某个key的方法示例
2019/07/06 Python
python爬虫 爬取超清壁纸代码实例
2019/08/16 Python
python实现根据文件格式分类
2019/10/31 Python
Python FFT合成波形的实例
2019/12/04 Python
Django ORM filter() 的运用详解
2020/05/14 Python
Pycharm及python安装详细教程(图解)
2020/07/31 Python
美国皮靴公司自1863年:The Frye Company
2016/11/30 全球购物
Habitat家居英国官方网站:沙发、家具、照明、厨房和户外
2019/12/12 全球购物
COSETTE官网:奢华,每天
2020/03/22 全球购物
大专计算机个人求职的自我评价
2013/10/21 职场文书
环境工程求职简历的自我评价范文
2013/10/24 职场文书
教师年度考核自我鉴定
2014/01/19 职场文书
节能减耗标语
2014/06/21 职场文书
党的群众路线教育实践活动对照检查材料
2014/09/22 职场文书
四风问题对照检查整改措施思想报告
2014/10/05 职场文书
会议通知格式范文
2015/04/15 职场文书
如何利用 CSS Overview 面板重构优化你的网站
2021/10/24 HTML / CSS