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 相关文章推荐
彻底搞懂JS无缝滚动代码
Jan 03 Javascript
asp.net下使用jquery 的ajax+WebService+json 实现无刷新取后台值的实现代码
Sep 19 Javascript
jQuery焦点图切换特效插件封装实例
Aug 18 Javascript
用jQuery实现的智能隐藏、滑动效果的返回顶部代码
Mar 18 Javascript
js插件设置innerHTML时在IE8下提示“未知运行时错误”解决方法
Apr 25 Javascript
Bootstrap每天必学之面板
Nov 30 Javascript
jquery+json实现分页效果
Mar 07 Javascript
vue.js国际化 vue-i18n插件的使用详解
Jul 07 Javascript
从vue源码解析Vue.set()和this.$set()
Aug 30 Javascript
在vue中使用v-bind:class的选项卡方法
Sep 27 Javascript
详解Vue2 添加对scss的支持
Jan 02 Javascript
vue请求数据的三种方式
Mar 04 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
Mysql数据库操作类( 1127版,提供源码下载 )
2010/12/02 PHP
PHP往XML中添加节点的方法
2015/03/12 PHP
php实现爬取和分析知乎用户数据
2016/01/26 PHP
PHP 进度条函数的简单实例
2017/09/19 PHP
Thinkphp框架使用list_to_tree 实现无限级分类列出所有节点示例
2020/04/04 PHP
使用JQuery快速实现Tab的AJAX动态载入(实例讲解)
2013/12/11 Javascript
原生javascript实现图片滚动、延时加载功能
2015/01/12 Javascript
浅谈Javascript 数组与字典
2015/01/29 Javascript
jquery实现跳到底部,回到顶部效果的简单实例(类似锚)
2016/07/10 Javascript
AngularJS ng-bind 指令简单实现
2016/07/30 Javascript
用jQuery实现可输入多选下拉组合框实例代码
2017/01/18 Javascript
Angular X中使用ngrx的方法详解(附源码)
2017/07/10 Javascript
vue-cli构建项目使用 less的方法
2017/10/04 Javascript
vue-cli的build的文件夹下没有dev-server.js文件配置mock数据的方法
2019/04/17 Javascript
Javascript生成器(Generator)的介绍与使用
2021/01/31 Javascript
js动态添加带圆圈序号列表的实例代码
2021/02/18 Javascript
React服务端渲染原理解析与实践
2021/03/04 Javascript
[01:05:00]2018国际邀请赛 表演赛 Pain vs OpenAI
2018/08/24 DOTA
python实现监控windows服务并自动启动服务示例
2014/04/17 Python
用Python实现随机森林算法的示例
2017/08/24 Python
使用Python搭建虚拟环境的配置方法
2018/02/28 Python
Python 切分数组实例解析
2019/11/07 Python
python使用pip安装SciPy、SymPy、matplotlib教程
2019/11/20 Python
Python和Sublime整合过程图示
2019/12/25 Python
pycharm新建Vue项目的方法步骤(图文)
2020/03/04 Python
详解scrapy内置中间件的顺序
2020/09/28 Python
日本网路线上商品代购服务:转送JAPAN
2016/08/05 全球购物
美国东北部户外服装和设备零售商:Eastern Mountain Sports
2016/10/05 全球购物
应届生妇产科护士求职信
2013/10/27 职场文书
学院书画协会部门岗位职责
2013/12/01 职场文书
幼儿园安全教育月活动总结
2015/05/08 职场文书
2015年乡镇民政工作总结
2015/05/13 职场文书
助学金申请书该怎么写?
2019/07/16 职场文书
Python 多线程之threading 模块的使用
2021/04/14 Python
用基于python的appium爬取b站直播消费记录
2021/04/17 Python
python字符串的多行输出的实例详解
2021/06/08 Python