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

最新推荐文章于 2024-07-16 20:08:38 发布
最新推荐文章于 2024-07-16 20:08:38 发布
阅读量1k 收藏 1
点赞数
分类专栏： JavaScript 文章标签： js事件监听器用法实例详解

本文实例讲述了js事件监听器用法。分享给大家供大家参考。具体分析如下：

1、当同一个对象使用.onclick的写法触发多个方法的时候，后一个方法会把前一个方法覆盖掉，也就是说，在对象的onclick事件发生时，只会执行最后绑定的方法。而用事件监听则不会有覆盖的现象，每个绑定的事件都会被执行。如下：

?
1
2
3
4
5
6
7
8
9
10
11
12
window.onload = function (){
   var btn = document.getElementById( "yuanEvent" );
   btn.onclick = function (){
     alert( "第一个事件" );
   }
   btn.onclick = function (){
     alert( "第二个事件" );
   }
   btn.onclick = function (){
     alert( "第三个事件" );
   }
}

最后只输出：第三个事件，因为后一个方法都把前一个方法覆盖掉了。

原生态的事件绑定函数addEventListener：

?
1
2
3
4
5
6
7
8
9
10
11
12
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、采用事件监听给对象绑定方法后，可以解除相应的绑定，写法如下：

?
1
2
3
4
5
6
7
8
9
10
11
12
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、解除绑定事件的时候一定要用函数的句柄，把整个函数写上是无法解除绑定的。

错误写法：

?
1
2
3
4
5
6
btn.addEventListener( "click" , function (){
   alert(11);
});
btn.removeEventListener( "click" , function (){
   alert(11);
});

正确写法：

?
1
2
btn.addEventListener( "click" ,eventTwo);
btn.removeEventListener( "click" ,eventOne);

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

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
/*
  * 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);
}

实例：

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
<!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>
深沉的简单
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaScript HTML DOM EventListener（事件监听器）（秒懂事件监听）
百赢出品，必属精品
04-11 5046
JavaScript HTML DOM EventListener（事件监听器）是一种用于在HTML文档中捕获和处理事件的机制。通过使用事件监听器，可以在特定的HTML元素上注册监听器函数，以便在事件发生时执行相应的操作。事件监听是在网页开发中常用的技术，用于捕获特定的用户操作或系统事件，并在事件发生时执行相应的代码。事件类型: 事件可以是用户操作，如点击、悬停、键盘输入等，也可以是系统事件，如窗口加载、滚动、大小调整等。事件目标。
JS事件的监听器的使用
somous_ly的专栏
08-06 623
1、当同一个对象使用.onclick的写法触发多个方法的时候，后一个方法会把前一个方法覆盖掉，也就是说，在对象的onclick事件发生时，只会执行最后绑定的方法。而用事件监听则不会有覆盖的现象，每个绑定的事件都会被执行。如下： [javascript] view plaincopy "font-size:18px;">window.onload = fu
JavaScript 事件监听详解
最新发布
xycxycooo的博客
07-16 1038
在 JavaScript 编程中，事件监听是一种非常重要的机制，它允许我们在特定的事件发生时执行特定的代码。在这个示例中，点击内层 div 时，会先触发内层 div 的点击事件，然后触发外层 div 的点击事件（冒泡阶段）。在这个示例中，点击内层 div 时，会先触发外层 div 的点击事件，然后触发内层 div 的点击事件（捕获阶段）。事件对象包含有关事件的详细信息，如事件类型、目标元素、鼠标位置等。在这个示例中，点击内层 div 时，只会触发内层 div 的点击事件，不会触发外层 div 的点击事件。
javascript事件监听与事件委托实例详解
10-16
事件监听与事件委托实例详解中的具体内容，提供了事件监听和事件委托的具体实现方式。通过构建一个包含多个按钮的页面结构，演示了如何通过传统的事件监听方式为每个按钮绑定事件处理器，以及如何使用事件委托技术来...
Vue程序化的事件监听器(实例方案详解)
11-29
在Vue.js中，程序化的事件监听器是一种管理组件内部或组件间交互的重要方式。当涉及到与第三方库或插件的集成，特别是在需要控制组件生命周期的特定阶段执行或清除某些操作时，程序化处理事件监听器就显得尤为重要。...
JS冒泡事件与事件捕获实例详解
10-21
在事件捕获的阶段，同样可以在事件处理函数中调用event.stopPropagation()方法来停止事件继续向下传播，但更多情况下开发者会使用event.stopImmediatePropagation()来阻止同一层级中其他事件监听器的执行。...
Java事件侦听器函数_js事件监听器用法实例详解
weixin_29801567的博客
02-24 314
本文实例讲述了js事件监听器用法。分享给大家供大家参考。具体分析如下：1、当同一个对象使用.onclick的写法触发多个方法的时候，后一个方法会把前一个方法覆盖掉，也就是说，在对象的onclick事件发生时，只会执行最后绑定的方法。而用事件监听则不会有覆盖的现象，每个绑定的事件都会被执行。如下：window.onload = function(){var btn = document.getEle...
JS 事件绑定、事件监听、事件委托详细介绍
10-21
主要介绍了JS 事件绑定、事件监听、事件委托详细介绍的相关资料,需要的朋友可以参考下
JS中的事件监听
TianXuab的博客
07-01 796
在JavaScript中，事件监听是一种用于处理用户交互的机制。它允许开发者在特定的用户动作（比如点击、鼠标移动等）发生时触发相应的JavaScript代码执行。方法实现的效果相同，但是它只能添加一个事件监听器，并且会覆盖之前已添加的同类型事件监听器。在Web开发中，DOM元素是最常见的触发事件的对象。方法，还可以使用DOM元素的属性来添加事件监听器。是一个可选参数，表示是否在捕获阶段处理事件。或省略该参数，则事件将在冒泡阶段被处理。，则事件将在捕获阶段被处理；是要监听的DOM元素，方法来添加事件监听器。
JavaScript（一）：事件侦听器
欧阳方超的专栏
06-05 670
事件侦听器错误写成函数调用的后果，并指出可以通过使用函数名来解决该问题
JavaScript事件监听器总结
Maybe_ss的博客
10-19 3795
事件监听总结，事件流，捕获阶段、目标阶段、冒泡阶段，事件代理，阻止事件冒泡，阻止默认事件。
JS事件监听方法
weixin_57726973的博客
06-09 3774
我们在学习的时候，最初接触的事件绑定方式大多是传统事件绑定方法。传统事件绑定方法。 传统事件绑定方法的特点如下： 1.事件名称之间一定要加上on，比如：onclick、onload、onmousemove。2.兼容主流的浏览器，包括低版本的IE。3.当同一个元素绑定多个事件时，只有最后一个事件会被添加，并且传播模式只能是冒泡模式。二、addEventListener()方法特点：1.element.addEventListener(event, function, useCapture)中的第三个参数可以控
js中的事件监听器addEventListener() 方法
jiachun199的博客
08-13 1387
js事件监听的理解
Ssss555123的博客
09-18 1207
事件监听就是DOM对事件进行监听，知道什么时候发生了这个事件，从而执行一些写好的程序。
JavaScript事件监听器详解：入门到精通实例
在JavaScript中，事件监听器可以应用于DOM（Document Object Model）操作、事件操作（如鼠标点击、键盘按键等）、`window`对象和`document`对象等核心功能。作者莫振杰在书中强调，为了让学习者更好地理解和掌握...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值