addEventListener 事件监听方式

最新推荐文章于 2024-07-01 16:22:16 发布
最新推荐文章于 2024-07-01 16:22:16 发布
阅读量1.6k 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_52372698/article/details/122774459
版权

JavaScript 事件监听 addEventListener 事件处理函数 兼容性
关键词由CSDN通过智能技术生成

语法规范：

evenTarget.addEventListener(type,listener[,useCapture])

eventTarget.addEventListener()方法将指定的监听器注册到eventTarget（目标对象）上，当该对象触发指定的事件时，就会执行事件处理函数

事件监听注册事件 ：

（1）addEventListener里面的事件类型是字符串，必定加引号，而且不带on

后面的function()处理函数也成为监听器

（2）同一个元素，同一个事件可以添加多个侦听器（事件处理程序）

该方法接收三个参数：

  1. type：事件类型字符串，比如click、mouseover，注意这里不要带on
  2. listener：事件处理函数，事件发生时，会调用该监听函数
  3. useCapture：可选参数，是一个布尔值，默认是false

案例理解：

<body>
    <button>事件1</button>
    <button>事件2</button>
    <script>
        var btns = document.querySelectorAll('button');
        btns[0].onclick = function () {
            alert('hi');
        }
        //后面的事件会覆盖掉前面的
        btns[0].onclick = function () {
            alert('hello');
        }


        btns[1].addEventListener('click', function () {
            alert(22);
        })
        btns[1].addEventListener('click', function () {
            alert(33);
        })
        //但是这种方式可以添加多个，不会有覆盖的情况
    </script>
</body>

但是这种方法存在兼容性问题

DazzlingWen.
关注
js: 添加事件监听addEventListener、移除事件监听removeEventListener
彭世瑜的博客
08-26 3520
【代码】js: 添加事件监听addEventListener、移除事件监听removeEventListener。
js学习-11（addEventListener事件监听）
qq_42760119的博客
07-24 912
事件绑定方式一： 都以点击事件为例 element.onclick = function(){ } 例如： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <button>按钮</button> <script type="text/
事件监听
前端开发-陈善强
11-30 296
1. addEventListener事件监听 语法： eventTarget.addEventListener(type, listener[, useCapture]) 注意： addEventListener()事件监听（IE9以后支持） eventTarget.addEventListener()方法将指定的监听器注册到 eventTarget（目标对象）上，当该对象触发...
【JavaScript 】- addEventListener()事件监听
m0_55960697的博客
03-31 1602
addEventListener() 方法用于向指定元素添加事件句柄(id)。 提示： 使用 removeEventListener() 方法来移除 addEventListener() 方法添加的事件句柄。 语法：element.addEventListener(event, function, useCapture) 1.参数： *event* //必须。字符串，指定事件名。 `注意: 不要使用 "on" 前缀。 例如，使用 "click" ,而不是使用 "oncli...
JavaScript 事件监听器 addEventListener() 方法 和一些基本的事件
最新发布
qq_52530691的博客
07-01 3686
addEventListener() 方法用于向指定元素添加事件句柄。当计算机属性检测到事件发生的时候，运行一些代码，通常是我们所制定的函数。
java基础(十八)----- java动态代理原理源码解析
weixin_34290390的博客
04-03 273
关于Java中的动态代理，我们首先需要了解的是一种常用的设计模式--代理模式，而对于代理，根据创建代理类的时间点，又可以分为静态代理和动态代理。 静态代理 1、静态代理 静态代理：由程序员创建或特定工具自动生成源代码，也就是在编译时就已经将接口，被代理类，代理类等确定下来。在程序运行之前，代理类的.class文件就已经生成。 2、静态代理简单实现 根据上面代理模式的类图，来写一个简单...
addEventListener() JS事件监听 方法
weixin_56893328的博客
02-13 3994
事件对象的类型取决于特定的事件。playing 事件在视频/音频（audio/video）暂停或者在缓冲后准备重新开始播放时触发。loadeddata 事件在浏览器加载视频/音频（audio/video）当前帧时触发触发。ratechange 事件在视频/音频（audio/video）的播放速度发送改变时触发。progress 事件在浏览器下载指定的视频/音频（audio/video）时触发。canplay 事件在用户可以开始播放视频/音频（audio/video）时触发。
事件监听的艺术：掌握`addEventListener`的魅力
青轩桃李能几何，流光欺人忽蹉跎
12-17 993
JavaScript 中的一个重要方法，它允许用户在特定事件发生时执行自定义的回调函数。一、基本概念二、语法三、常见事件类型四、应用场景 在各种场景下都有广泛应用，以下是其中一些：总之， 是一个强大且灵活的方法，可以用于监听各种类型的事件，从而实现丰富的交互功能。 是 JavaScript 中的一个方法，它允许开发者向事件目标添加事件监听器。事件监听器是一个回调函数，当事件发生时，该函数将被调用。事件目标是指可以触发事件的 HTML 元素或 JavaScript 对象。
JavaScript使用addEventListener添加事件监听用法实例
01-19
本文实例讲述了JavaScript使用addEventListener添加事件监听用法。分享给大家供大家参考。具体实现方法如下： <!DOCTYPE html> <html lang=en> <head> <title>This text is the title of the...
JavaScript 事件监听addEventListener
uuind的博客
03-15 676
JavaScript事件监听器 addEventListener()的工作原理是将实现EventListener的函数添加到调用它的EventTarget上的指定事件类型的事件侦听器列表中。 1、事件监听 addEventListener() 语法：ele.addEventListener(event_type , function ,布尔值(是否启用事件捕获去触发事件))  &nb...
Event事件-1:addEventListener事件监听 / 事件冒泡事件捕获 / 事件委托 / preventDefault 阻止默认行为 / cancelBubble、stopPropa...
kino2046的博客
03-17 1231
addEventListener 事件监听器 target.addEventListener(type,listener[,options|useCapture])添加事件监听 参数： type事件类型(click、mouseover等，注意这里不加on) listener事件处理函数 可选参数： options配置对象...
addEventListener( ) 方法 -- 事件监听
m0_52545254的博客
07-11 6552
事件监听/捕获/冒泡
细说addEventListener与事件捕获、事件冒泡
热门推荐
全栈启示录
06-28 1万+
这篇文章详细介绍了addEventListener绑定事件的细节以及事件冒泡和事件捕获的有关知识。作者以生动形象的例子和简单直白的语言，让读者能够快速了解和掌握JS中事件绑定和事件传播的规则和本质。
JAVA动态代理（proxy）实现和源码剖析
Howie Lee的博客
03-18 469
JDK动态代理实例（1）动态代理首先提供一个调度处理器接口（Invocationhandler），该接口实例封装了我们要代理的对象实例的数据。 public class TranceHander implements InvocationHandler{ private Object tObject; public TranceHander(Object
Java动态代理源码详解
个人博客
08-21 2212
  前言：动态代理在很多底层框架中都会用得到，比如Spring等都用到了动态代理。它的作用很简单，就是将你要使用的类，重新生成一个子类或本类。这样框架就可以利用这个新生成的类做一些事情，比如在该类的方法前后加一些代码。这样的话，你就可以不用修改任何已经编写好的代码，只要使用代理就可以灵活的加入任何东西，将来不用了，也不会影响原来的代码。   Spring的AOP中用到的两种动态代理。   AO...
EventTarget.addEventListener()事件监听
weixin_49602426的博客
09-11 776
事件监听：也叫注册事件、绑定事件。用户与网页的交互动作；比如说鼠标滑动、点击网页。是为了让计算机随时能够发现这个时间发生了，从而执行程序员下达的指令动作，也就是我们封装起来函数里面需要执行的。以on开头的传统注册方式，比如说onclick、onmousemove等。addEventListener()+不带on的事件类型的注册方式。
关于attachEvent和addEventListener事件监听
qulongjun的专栏
08-18 2618
一般在用JS给元素增加事件的时候，使用的方法为： obj.onclick=method 这种方法简单高效，但存在一个问题，如果对同一个元素同时添加同一个事件的时候，会造成前面的添加效果失败，只运行最后一个，例如： oBtn = document.getElementById('btn1'); oBtn.onclick = function() { alert('aaa'); };
js addEventListener_keydown.html
weixin_42193179的博客
01-16 2254
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>addEventListener</title> </head> <body> 价格：<span id="price"></sp...
addEventListener监听事件
05-21
addEventListener是JavaScript中用于添加事件监听器的方法。它允许开发者在DOM元素上注册特定的事件处理函数，当事件发生时，该函数将被自动调用。addEventListener接受三个参数：要监听的事件类型、要触发的函数...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值