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 相关文章推荐
Jquery 滑入滑出效果实现代码
Mar 27 Javascript
关于Ext中form移除textfield方法:hide(),setVisible(false),remove()
Dec 02 Javascript
登陆成功后自动计算秒数执行跳转
Jan 23 Javascript
JS下载文件|无刷新下载文件示例代码
Apr 17 Javascript
jQuery Ajax()方法使用指南
Nov 19 Javascript
全面解析Bootstrap中tab(选项卡)的使用方法
Jun 06 Javascript
jQuery 添加样式属性的优先级别方法(推荐)
Jun 08 jQuery
vue刷新和tab切换实例
Feb 11 Javascript
微信小程序导航栏滑动定位功能示例(实现CSS3的positionsticky效果)
Jan 24 Javascript
vue+egg+jwt实现登录验证的示例代码
May 18 Javascript
简单了解Javscript中兄弟ifream的方法调用
Jun 17 Javascript
JS绘图Flot如何实现动态可刷新曲线图
Oct 16 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爆绝对路径方法收集整理
2012/09/17 PHP
smarty内置函数foreach用法实例
2015/01/22 PHP
PHP递归调用数组值并用其执行指定函数的方法
2015/04/01 PHP
微信第三方登录(原生)demo【必看篇】
2017/05/26 PHP
php使用scandir()函数扫描指定目录下所有文件示例
2019/06/08 PHP
tp5.1 框架数据库常见操作详解【添加、删除、更新、查询】
2020/05/26 PHP
可实现多表单提交的javascript函数
2007/08/01 Javascript
获取dom元素那些讨厌的位置封装代码
2010/06/23 Javascript
广泛收集的jQuery拖放插件集合
2012/04/09 Javascript
jquery sortable的拖动方法示例详解
2014/01/16 Javascript
JavaScript验证Email(3种方法)
2015/09/21 Javascript
jQuery使用$.ajax提交表单完整实例
2015/12/11 Javascript
理解js对象继承的N种模式
2016/01/25 Javascript
浅谈node.js 命令行工具(cli)
2018/05/10 Javascript
小程序实现左右来回滚动字幕效果
2018/12/28 Javascript
JavaScript面向对象程序设计中对象的定义和继承详解
2019/07/29 Javascript
Vue实现多标签选择器
2019/11/28 Javascript
Node.js控制台彩色输出的方法与原理实例详解
2019/12/01 Javascript
vue-resource post数据时碰到Django csrf问题的解决
2020/03/13 Javascript
js+canvas实现五子棋小游戏
2020/08/02 Javascript
Python help()函数用法详解
2014/03/11 Python
python的dict,set,list,tuple应用详解
2014/07/24 Python
Python中的包和模块实例
2014/11/22 Python
深入理解python中的atexit模块
2017/03/07 Python
Python的matplotlib绘图如何修改背景颜色的实现
2019/07/16 Python
利用python-pypcap抓取带VLAN标签的数据包方法
2019/07/23 Python
Python分析微信好友性别比例和省份城市分布比例的方法示例【基于itchat模块】
2020/05/29 Python
Python使用cn2an实现中文数字与阿拉伯数字的相互转换
2021/03/02 Python
荷兰包包购物网站:The Little Green Bag
2018/03/17 全球购物
Nike加拿大官网:Nike.com (CA)
2019/04/09 全球购物
给同事的道歉信
2014/01/11 职场文书
大学学生个人总结
2015/02/15 职场文书
护理培训心得体会
2016/01/22 职场文书
微信小程序实现拍照和相册选取图片
2021/05/09 Javascript
生命的关键成分来自太空?陨石说是的
2022/04/29 数码科技
vue递归实现树形组件
2022/07/15 Vue.js