addeventlistener 事件监听

最新推荐文章于 2024-07-01 16:22:16 发布
原创 最新推荐文章于 2024-07-01 16:22:16 发布 · 1.1k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#事件监听  #addEventListener

本文深入讲解了元素事件监听器的使用方法，包括如何指定事件名、执行函数以及控制事件捕获或冒泡阶段的参数设置。通过实例说明，帮助读者理解不同事件类型的对象及其在事件处理过程中的作用。

语法


element.addEventListener(event, function, useCapture)；


event 为必须参数，类型为字符串，用于指定事件名。

注意: 不要使用 "on" 前缀。 例如，使用 "click" ,而不是使用 "onclick"。 


function 也为必须参数。指定要事件触发时执行的函数。 

事件对象会作为第一个参数传入函数。 事件对象的类型取决于特定的事件。例如， "click" 事件属于 MouseEvent(鼠标事件) 对象。


useCapture    可选。布尔值，指定事件是否在捕获或冒泡阶段执行。

可能值:
true - 事件句柄在捕获阶段执行
false- false- 默认。事件句柄在冒泡阶段执行

精选资源
JavaScript使用addEventListener添加事件监听用法实例
01-19
本文实例讲述了JavaScript使用addEventListener添加事件监听用法。分享给大家供大家参考。具体实现方法如下： <!DOCTYPE html> <html lang=en> <head> <title>This text is the title of the...
js事件监听机制(事件捕获)总结
10-25
使用addEventListener方法为元素添加事件监听是推荐的方式，因为它允许为同一个元素的同一个事件添加多个监听器，而且不会覆盖之前添加的监听器。而直接在对象上赋值事件处理器的方式则有限制，通常只能绑定一个函数...
addEventListener(）方法，事件监听
AnitaSun的博客
04-25 426
addEventListener() 方法，事件监听 removeEventListener()，移除事件的监听 语法 addEventListener() element.addEventListener(event, function, useCapture); 第一个参数是事件的类型 (如 “click” 或 “mousedown”). 第二个参数是事件触发后调用的函数。 第三个参数是个布尔值用于描述事件是冒泡还是捕获。该参数是可选的。 将 <p> 元素插入到 <div&gt.
addEventListener( )-事件监听
chengyu12138的博客
10-01 1779
()方法，即为；且同一元素目标可重复添加，不会覆盖之前相同事件；可以使用removeEventListener()方法来移除事件的监听。对象.addEventListener('事件', 函数)例如当我点击按钮时：事件类型：1.鼠标事件：click 鼠标点击 mouseenter 鼠标经过 mouseleave 鼠标离开2.焦点事件 focus获得焦点 blur 失去焦点3.键盘触发：keydown 键盘按下触发 keyup键盘松开触发文本事件： input 用户输入事件。
addEventListener 事件监听方式
qq_35488990的博客
01-16 667
注册事件(绑定事件） addEventListener 事件监听方式 eventTarget.addEventListener(type, listener[, user Capture]) eventTarget.addEventListener()方法将指定的监听器注册到eventTarget（目标对象）上，当该对象出发指定的事件时，就会执行事件处理函数。 该方法接收三个参数： type: 事件类型字符串，比如click，mouseover，这里不带on listener：事件处理函数，事
js事件 -- addEventListener事件
banni6813的博客
05-08 526
百度上很多篇文章讲解addEventListener DOM0级事件的时候讲解的都是覆盖，概念如下： 同一个元素的同一种事件只能绑定一个函数，否则后面的函数会覆盖之前的函数 其实不然，官网讲解 添加的事件不会覆盖已存在的事件。 <!DOCTYPE html> <html> <head> <meta charset="utf-8"...
HTML DOM 事件
akuibpt23191的博客
07-13 718
1. HTML DOM 事件 参考文档：https://www.runoob.com/jsref/dom-obj-event.html HTML DOM 事件允许Javascript在HTML文档元素中注册不同事件处理程序。 事件通常与函数结合使用，函数不会在事件发生前被执行！ (如用户点击按钮)。 提示： 在 W3C 2 级 DOM 事件中规范了事件模型。...
Event事件-1:addEventListener事件监听 / 事件冒泡事件捕获 / 事件委托 / preventDefault 阻止默认行为 / cancelBubble、stopPropa...
kino2046的博客
03-17 1351
addEventListener 事件监听器 target.addEventListener(type,listener[,options|useCapture])添加事件监听 参数： type事件类型(click、mouseover等，注意这里不加on) listener事件处理函数 可选参数： options配置对象...
js: 添加事件监听addEventListener、移除事件监听removeEventListener
彭世瑜的博客
08-26 3914
【代码】js: 添加事件监听addEventListener、移除事件监听removeEventListener。
javascript事件监听与事件委托实例详解
12-29
在js中，常用到element.addEventListener()来进行事件的监听。但是当页面中存在大量需要绑定事件的元素时，这种方式可能会带来性能影响。此时，我们可以用事件委托的方式来进行事件的监听。 每个事件都经历三个阶段 ...
JavaScript 事件监听器 addEventListener() 方法 和一些基本的事件
好好吃饭，好好睡觉
07-01 6199
addEventListener() 方法用于向指定元素添加事件句柄。当计算机属性检测到事件发生的时候，运行一些代码，通常是我们所制定的函数。
EventTarget.addEventListener()事件监听
weixin_49602426的博客
09-11 949
事件监听：也叫注册事件、绑定事件。用户与网页的交互动作；比如说鼠标滑动、点击网页。是为了让计算机随时能够发现这个时间发生了，从而执行程序员下达的指令动作，也就是我们封装起来函数里面需要执行的。以on开头的传统注册方式，比如说onclick、onmousemove等。addEventListener()+不带on的事件类型的注册方式。
【JavaScript 】- addEventListener()事件监听
m0_55960697的博客
03-31 1831
addEventListener() 方法用于向指定元素添加事件句柄(id)。 提示： 使用 removeEventListener() 方法来移除 addEventListener() 方法添加的事件句柄。 语法：element.addEventListener(event, function, useCapture) 1.参数： *event* //必须。字符串，指定事件名。 `注意: 不要使用 "on" 前缀。 例如，使用 "click" ,而不是使用 "oncli...
js addeventlistener
Charles1938229的博客
02-17 5992
JavaScript是一种广泛应用于网页开发的脚本语言，具有灵活的语法和强大的功能。在网页中，我们经常需要处理用户的交互操作，例如点击按钮、输入文本等，而addEventListener方法就是用来处理这些事件的。
addEventListener事件
血色残阳的专栏
03-30 1135
addEventListener(type:String ,listener:Function,useCapture:Boolean=false,priority:int=0,useWeakReference:Boolean=false)       useCapture  表示是否打开捕获事件，默认为false       priority    表示监听器的优先级，默认为0，优
关于attachEvent和addEventListener事件监听
qulongjun的专栏
08-18 2705
一般在用JS给元素增加事件的时候，使用的方法为： obj.onclick=method 这种方法简单高效，但存在一个问题，如果对同一个元素同时添加同一个事件的时候，会造成前面的添加效果失败，只运行最后一个，例如： oBtn = document.getElementById('btn1'); oBtn.onclick = function() { alert('aaa'); };
addEventListener( ) 方法 -- 事件监听
m0_52545254的博客
07-11 7031
事件监听/捕获/冒泡
addEventListener事件委托
weixin_30240349的博客
05-10 1081
什么是事件委托：通俗的讲，事件就是onclick，onmouseover，onmouseout，等就是事件，委托呢，就是让别人来做，这个事件本来是加在某些元素上的，然而你却加到别人身上来做，完成这个事件。 也就是：利用冒泡的原理，把事件加到父级上，触发执行效果。 好处1，提高性能。 好处2，新添加的元素还会有之前的事件。 基本格式：元素.addEventListener（type, fn ...
addEventListener 函数监听哪些事件
最新发布
07-25
`addEventListener` 函数是用于在 JavaScript 中监听网页元素或全局窗口事件的一种常用方法。它可以接收三个参数：事件名称、事件处理函数以及一个可选的第三个参数，用来设置事件捕获阶段的行为（仅适用于某些浏览器）。这里列出了 `addEventListener` 可以监听的一些常见事件类型及其用途： ### 一、鼠标事件 1. **`click`**: 当用户单击一个元素时触发。 2. **`dblclick`**: 当用户双击一个元素时触发。 3. **`mousedown`**: 鼠标按键按下时触发。 4. **`mouseup`**: 鼠标按键释放时触发。 5. **`mousemove`**: 鼠标移动时触发。 6. **`mouseover`** 和 **`mouseout`**: 分别表示光标进入和离开元素时触发。 ### 二、键盘事件 1. **`keydown`**: 键盘上的键按下时触发。 2. **`keyup`**: 键盘上的键释放时触发。 3. **`keypress`**: 用户在键盘上输入字符时触发（在一些浏览器中，这个事件并不总是比 `keydown` 更快）。 ### 三、页面加载及文档事件 1. **`load`**: 页面完全加载完成后触发。 2. **`unload`**: 浏览器窗口正在关闭前触发。 3. **`beforeunload`**: 浏览器窗口即将关闭前触发，允许开发者阻止浏览器的默认行为（例如，阻止页面退出前未保存数据）。 4. **`DOMContentLoaded`**: 当文档结构完全加载并解析完成时触发，但不会等待所有的资源加载完毕（如图片、样式表等）。 5. **`readystatechange`**: XMLHttpRequest 请求的状态发生变化时触发。 6. **`resize`**: 用户调整浏览器窗口大小时触发。 7. **`scroll`**: 当滚动条位置发生改变时触发。 ### 四、其他全局事件 1. **`focus`** 和 **`blur`**: 分别表示元素获得焦点和失去焦点时触发。 2. **`contextmenu`**: 用户右键点击元素时触发，通常用于打开上下文菜单。 使用 `addEventListener` 功能强大且灵活，可以根据具体的交互需求为网站或网页应用添加各种动态行为。请注意，为了兼容旧版浏览器，建议在实际项目中结合使用 `removeEventListener` 函数来清除不必要的事件监听器，避免内存泄漏等问题。同时，合理选择合适的事件类型和时机加入监听器，可以提高应用性能并优化用户体验。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值