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

简介: 本文实例讲述了js事件监听器用法。分享给大家供大家参考。具体分析如下:1、当同一个对象使用.onclick的写法触发多个方法的时候,后一个方法会把前一个方法覆盖掉,也就是说,在对象的onclick事件发生时,只会执行最后绑定的方法。

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

4 总结:对函数进行封装后的监听事件如下,兼容各大主流浏览器。

/*
 * 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>

 

相关文章
|
6月前
|
前端开发 JavaScript Java
【Java进阶】JavaScript电灯开关实例:从理论到实践
这个例子展示了JavaScript的基本功能,包括操作HTML元素,监听事件,以及改变元素的样式。通过学习和理解这个例子,你可以了解到JavaScript在网页中的应用,以及如何使用JavaScript来创建交互式的网页。
106 13
|
7月前
|
JavaScript 前端开发 Java
详解js柯里化原理及用法,探究柯里化在Redux Selector 的场景模拟、构建复杂的数据流管道、优化深度嵌套函数中的精妙应用
柯里化是一种强大的函数式编程技术,它通过将函数分解为单参数形式,实现了灵活性与可复用性的统一。无论是参数复用、延迟执行,还是函数组合,柯里化都为现代编程提供了极大的便利。 从 Redux 的选择器优化到复杂的数据流处理,再到深度嵌套的函数优化,柯里化在实际开发中展现出了非凡的价值。如果你希望编写更简洁、更优雅的代码,柯里化无疑是一个值得深入学习和实践的工具。从简单的实现到复杂的应用,希望这篇博客能为你揭开柯里化的奥秘,助力你的开发之旅! 只有锻炼思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一
|
12月前
|
JavaScript 前端开发
JS try catch用法:异常处理
【10月更文挑战第12天】try/catch` 是 JavaScript 中非常重要的一个特性,它可以帮助我们更好地处理程序中的异常情况,提高程序的可靠性和稳定性。
506 56
|
11月前
|
JavaScript 前端开发
js中的bind,call,apply方法的区别以及用法
JavaScript中,`bind`、`call`和`apply`均可改变函数的`this`指向并传递参数。其中,`bind`返回一个新函数,不立即执行;`call`和`apply`则立即执行,且`apply`的参数以数组形式传递。三者在改变`this`指向及传参上功能相似,但在执行时机和参数传递方式上有所区别。
169 1
|
11月前
|
JavaScript 前端开发
JS中的构造函数的含义和用法
构造函数是JavaScript中用于创建新对象的特殊函数,通常首字母大写。通过`new`关键字调用构造函数,可以初始化具有相同属性和方法的对象实例,从而实现代码复用。例如,定义一个`Person`构造函数,可以通过传入不同的参数创建多个`Person`对象,每个对象都有自己的属性值。此外,构造函数还可以包含方法,使每个实例都能执行特定的操作。构造函数的静态属性仅能通过构造函数本身访问。ES6引入了`class`语法糖,简化了类的定义和实例化过程。
177 1
|
12月前
|
JavaScript 前端开发
js的math.max的用法
js的math.max的用法
348 6
|
12月前
|
JavaScript
JS中的splice的三种用法(删除,替换,插入)
JS中的splice的三种用法(删除,替换,插入)
965 4
|
12月前
|
前端开发 JavaScript
基础 JavaScript 实例
基础 JavaScript 实例
57 1
|
12月前
|
前端开发 JavaScript 开发者
深入理解JavaScript中的Promise:用法与最佳实践
【10月更文挑战第8天】深入理解JavaScript中的Promise:用法与最佳实践
821 0