addEventListener（）参数及事件汇总

原创 已于 2022-09-26 14:26:51 修改 · 7.2k 阅读 · 179 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#前端 #javascript #es6

于 2022-09-26 14:16:21 首次发布
本文详细介绍了如何使用addEventListener()方法为HTML元素添加事件监听器，包括事件的绑定、触发类型选择及各种常见事件类型，如鼠标、键盘等。

        addEventListener() 方法用于给元素添加监听事件，同一个元素可以重复添加，并且不会覆盖之前相同事件，用removeEventListener() 方法来移除事件。

使用方法：

    element.addEventListener("click",function(e)=>{
            console.log("点击事件监听");
            console.log("点击返回的参数"：e);
    })

传递参数（包含三个参数）：

1.事件名称（String类型）

例如点击事件click，鼠标按下mousedown（和元素绑定事件类似，但不需要on）

2.监听事件所需要执行的函数（void）

如function（event）{ } 或者箭头函数的形式 （event）=> {   }

 3.触发类型（boolean，选填）

  • true - 事件在捕获阶段执行
  • false - 事件在冒泡阶段执行，默认是false

监听事件种类（转载学习）

  • 鼠标事件

click                          当用户点击某个对象时调用的事件句柄
contextmenu            在用户点击鼠标右键打开上下文菜单时触发
dblclick                     当用户双击某个对象时调用的事件句柄
mousedown              鼠标按钮被按下
mouseenter              当鼠标指针移动到元素上时触发
mouseleave              当鼠标指针移出元素时触发
mousemove              鼠标被移动
mouseover                鼠标移到某元素之上
mouseout                  鼠标从某元素移开
mouseup                   鼠标按键被松开

  • 键盘事件

keydown                     某个键盘按键被按下
keypress                     某个键盘按键被按下并松开
keyup                          某个键盘按键被松开

  • 框架/对象（Frame/Object）事件 

abort                                图像的加载被中断
beforeunload                  该事件在即将离开页面（刷新或关闭）时触发
error                                 在加载文档或图像时发生错误
hashchange                    该事件在当前 URL 的锚部分发生修改时触发
load                                  一张页面或一幅图像完成加载
pageshow                        该事件在用户访问页面时触发
pagehide                          该事件在用户离开当前网页跳转到另外一个页面时触发
resize                                窗口或框架被重新调整大小
scroll                                 当文档被滚动时发生的事件
unload                               用户退出页面

  • 表单事件 

blur                     元素失去焦点时触发
change               该事件在表单元素的内容改变时触发
focus                  元素获取焦点时触发
focusin               元素即将获取焦点是触发
focusout             元素即将失去焦点是触发
input                   元素获取用户输入是触发
reset                   表单重置时触发
search                 用户向搜索域输入文本时触发

  • 剪贴板事件 

copy                    该事件在用户拷贝元素内容时触发
cut                       该事件在用户剪切元素内容时触发
paste                   该事件在用户粘贴元素内容时触发

  • 打印事件

afterprint                 该事件在页面已经开始打印，或者打印窗口已经关闭时触发
beforeprint              该事件在页面即将开始打印时触发

  • 多媒体（Media）事件 

abort                            事件在视频/音频（audio/video）终止加载时触发
canplay                        事件在用户可以开始播放视频/音频（audio/video）时触发
canplaythrough          事件在视频/音频（audio/video）可以正常播放且无需停顿和缓冲时触发
durationchange          事件在视频/音频（audio/video）的时长发生变化时触发
emptied                       当前播放列表为空时候触发
ended                          事件在视频/音频（audio/video）播放结束时触发
error                            事件在视频/音频（audio/video）数据加载期间发生错误时触发
loadeddata                  事件在浏览器加载视频/音频（audio/video）当前帧时触发触发
loadedmetadata         事件在指定视频/音频（audio/video）的元数据加载后触发
loadstart                     事件在浏览器开始寻找指定视频/音频（audio/video）触发
pause                          事件在视频/音频（audio/video）暂停时触发
play                             事件在视频/音频（audio/video）开始播放时触发
playing                       事件在视频/音频（audio/video）暂停或者在缓冲后准备重新开始播放时触发
progress                    事件在浏览器下载指定的视频/音频（audio/video）时触发
ratechange                事件在视频/音频（audio/video）的播放速度发送改变时触发
seeked                       事件在用户重新定位视频/音频（audio/video）的播放位置后触发
seeking                      事件在用户开始重新定位视频/音频（audio/video）时触发
stalled                        事件在浏览器获取媒体数据，但媒体数据不可用时触发
suspend                     事件在浏览器读取媒体数据中止时触发
timeupdate                事件在当前的播放位置发送改变时触发
volumechange          事件在音量发生改变时触发
waiting                       事件在视频由于要播放下一帧而需要缓冲时触发

  • 动画事件 

animationend                 该事件在 CSS 动画结束播放时触发
animationiteration         该事件在 CSS 动画重复播放时触发
animationstart                该事件在 CSS 动画开始播放时触发

  • 过渡事件

 transitionend                 该事件在 CSS 完成过渡后触发

  • 其他事件 

message                    该事件通过或者从对象(WebSocket, Web Worker, Event Source 或者子 frame 或父窗口)接收到消息时触发
online                         该事件在浏览器开始在线工作时触发。
offline                         该事件在浏览器开始离线工作时触发。
popstate                     该事件在窗口的浏览历史（history 对象）发生改变时触发。
show                           该事件在窗口显示时触发（onshow方法也仅仅在fireFox浏览器支持）

  • 元素在上下文菜单显示时触发 

 storage                  该事件在 Web Storage(HTML 5 Web 存储)更新时触发（仅限于在控制台里修改、新增和删除，代码里修改是监听不到的）
 toggle                    该事件在用户打开或关闭 元素时触发
 wheel                     该事件在鼠标滚轮在元素上下滚动时触发

JS事件总结超详细-思维导图
typ的blog，记录工作中的问题、学习中的笔记、生活中的感想。
06-25 1241
经过了一段时间事件学习，我又重新对事件进行了总结，废话不多说，直接上思维导图不想看思维导图的可以看下方内容，也是思维导图上的全部内容
冇内容管理系统分析 二. addEventListener
weixin_33963189的博客
12-20 299
addEventListener－开始来源： chenlulouis 前面零散地写了些关于 addEventListener 的内容，觉得比较散，有些地方可能也说得不够清楚明白，所以决定以连载的形式从头到尾再写一篇。 addEventListener 用于注册事件处理程序，IE 中为attachEvent，我们为什么讲 addEventListener 而不讲 attachEve...
详解addEventListener的三个参数之useCapture
09-03
本文主要给大家介绍的是addEventListener的三个参数之中的useCapture参数的使用及示例分享，有需要的小伙伴参考下
JavaScript addEventListener 的第三个参数
KongMing06的博客
10-12 691
addEventListener 的第三个参数有两种形式：布尔值（控制事件捕获/冒泡）或配置对象（支持 signal、once、passive 等高级功能）。配置对象必须用大括号 {} 包裹，符合 JavaScript 语法规则，并能承载多个键值对配置。常见误区包括认为大括号可选、错误分隔配置项或直接传递 signal 对象。正确使用时，布尔值参数适用于简单场景，而配置对象满足复杂需求如取消监听、单次触发和性能优化。
事件addEventListener（）参数及事件汇总
qq_46344419的博客
04-23 6683
addEventListener（）参数及事件汇总
addEventListener的第三个参数
weixin_34292924的博客
03-04 341
2019独角兽企业重金招聘Python工程师标准>>> ...
addEventListener()方法中的几个参数，以及作用
zhang20040217的博客
06-01 1621
方法是 JavaScript 中用于处理指定元素的指定事件的函数。函数只会在点击事件的捕获阶段触发，并且只触发一次。之后，该监听器将被自动移除。（可选）：一个指定有关监听器属性的布尔值或对象的选项。如果是布尔值，它表示。接口的对象，或者是一个函数，当指定的事件被触发时，该函数将被调用。的函数，该函数在点击事件触发时会显示一个警告框。（必需）：一个字符串，指定要监听的事件名。在这个例子中，我们获取了一个具有 ID。的元素，并定义了一个名为。元素的点击事件监听器。（必需）：一个实现了。
addEventListener的3个参数
YaecSakura的博客
03-21 4953
第三个参数是useCapture（变量）：用来判断是捕获还是冒泡。阶段触发事件（默认为false）(冒泡事件触发顺序是由子到父)addEventListener()，接收3个参数。第一个参数event：监听的事件。第二个参数是函数：需要执行的事。阶段触发事件 (捕获事件触发顺序是由父到子)(1)当useCapture为。(2)当useCapture为。
JS 事件汇总,js 鼠标事件，网页js大全
06-29
- `addEventListener`可以设置第三个参数来选择事件处理方式，`true`为捕获，`false`为冒泡（默认）。 5. **阻止事件默认行为** - 使用`event.preventDefault()`可以阻止事件的默认行为，如链接的跳转、表单的...
事件模型在各浏览器中存在差异
12-10
标准参考 根据 W3C DOM 2 Events 描述，EventTarget 接口被所有支持... 实现 Event 接口的对象一般作为第一个参数传入事件处理函数，以用来提供当前事件相关的一些信息。 DOM 2 事件模型允许 DOM 实现支持事件的多模块
前端JS基础知识点及常考面试题汇总
03-28
事件处理包括事件监听、事件冒泡和事件捕获，常用事件处理函数有`addEventListener`和`removeEventListener`。 **DOM操作** 文档对象模型（DOM）是HTML和XML文档的结构化表示，JavaScript可以通过DOM API来操作文档...
【JavaScript源代码】ECharts鼠标事件的处理方法详解.docx
12-28
每一个鼠标事件都会包含一个参数`params`，它是一个对象，包含了单击图形的数据信息。`params`中的基本属性及其含义如下： - **name**：触发事件的图形的名称。 - **value**：触发事件的图形的值。 - **component...
addEventListener 有三个参数
终日而思不如须臾所学。
01-01 4477
addEventListener有三个参数： 事件名称； 事件处理函数； 捕获还是冒泡。 事件处理函数不一定是函数，也可以是个JavaScript具有handleEvent方法的对象，看下例子： var o = { handleEvent: event => console.log(event) } document.body.addEventListener(“keydown”, o, false); 第三个参数不一定是bool值，也可以是个对象，它提供了更多选项。 once：只执行一次。 pass
HTML DOM 事件
akuibpt23191的博客
07-13 721
1. HTML DOM 事件 参考文档：https://www.runoob.com/jsref/dom-obj-event.html HTML DOM 事件允许Javascript在HTML文档元素中注册不同事件处理程序。 事件通常与函数结合使用，函数不会在事件发生前被执行！ (如用户点击按钮)。 提示： 在 W3C 2 级 DOM 事件中规范了事件模型。...
前端JavaScript篇之addEventListener()方法的参数和使用
星辰迷上大海的博客
02-08 4988
addEventListener() 是 JavaScript 中用于向指定元素添加事件监听器的方法。这个方法通常用于处理用户交互，比如点击、鼠标悬停等操作。
addEventListener参数和冒泡和捕获详细使用与说明
dupha的博客
04-30 6161
addEventListener第三参数冒泡和捕获详细说明 1.addEventListener参数说明 target.addEventListener(type, listener, useCapture); 参数一: type 表示监听事件类型的字符串。 参数二: listener 当所监听的事件类型触发时，会接收到一个事件通知（实现了 Event 接口的对象）对象。listener 必须是一个实现了 EventListener 接口的对象，或者是一个函数。有关回调本身的详细信息，请参阅事件监听回调
addEventListener()方法中的参数，以及作用
zhang20040217的博客
04-26 1423
方法还可以接收第三个参数，即一个布尔值，表示是否在捕获阶段处理事件。然而，大多数情况下，这个参数被设置为。方法是 JavaScript 中用于向指定元素添加事件监听器的方法。然而，这在实际开发中并不常见，因为大多数情况下，我们更关心冒泡阶段的事件处理。这个函数在按钮被点击时会被调用，并弹出一个警告框。在这个例子中，我们首先获取了一个按钮元素，然后定义了一个处理函数。如果你想在捕获阶段处理事件，你可以将第三个参数设置为。函数添加到按钮的 'click' 事件上。，表示在冒泡阶段处理事件。
10. addEventListener 参数有哪些
weixin_64684095的博客
07-20 669
el：事件对象type：事件类型listener：事件处理函数useCapture：布尔或对象，布尔时 false 为冒泡，true 为捕获。对象时，{ captrue: false, once: false, passive: false }是用于为元素绑定事件监听器的标准方法，支持更灵活的事件处理方式，包括捕获、冒泡、一次性执行等。参数名类型必填说明string✅事件类型（如'click'listenerfunction✅事件处理函数useCaptureoptions❌。
JavaScript addEventListener() 方法中传其他参数
t1074671630的博客
03-07 1549
addEventListener() 中方法传其他参数
若函数带有参数呢
最新发布
12-07
<think>我们正在讨论JavaScript中带有参数的匿名函数定义。根据引用[2]和引用[3]，匿名函数可以通过函数表达式定义，并且可以带参数。下面我将详细解释定义方法，包括传统匿名函数和箭头函数两种形式。 ### 1. 传统匿名函数（带参数） 语法结构： ```javascript function(参数1, 参数2, ..., 参数n) { // 函数体 } ``` - 参数列表放在`function`关键字后的括号内。 - 示例：定义一个匿名函数，计算两个数的和，并立即执行（IIFE）： ```javascript (function(a, b) { console.log(a + b); })(3, 5); // 输出8 ``` 这里，`(a, b)`是参数列表，`3`和`5`是传入的实际参数[^2]。 ### 2. 箭头函数（带参数） 语法结构（简化版）： ```javascript (参数1, 参数2, ..., 参数n) => { // 函数体 } ``` - 如果只有一个参数，括号可省略：`参数 => {...}` - 如果函数体只有一条返回语句，可省略大括号和`return`：`(a, b) => a + b` - 示例：将带参数的匿名箭头函数赋值给变量： ```javascript const multiply = (x, y) => { return x * y; }; console.log(multiply(4, 5)); // 输出20 ``` ### 3. 立即执行函数表达式（IIFE）带参数 引用[2]和引用[3]中提到的自调用函数（IIFE）也支持参数： ```javascript (function(参数) { // 函数体 })(实际参数); ``` 示例： ```javascript // 带一个参数 (function(message) { console.log(message); // 输出"Hello" })("Hello"); // 带多个参数 (function(a, b) { console.log(a + b); // 输出15 })(10, 5); ``` ### 关键点总结 - **参数传递**：匿名函数的参数传递方式与命名函数相同，在定义时声明形参，调用时传入实参。 - **作用域**：匿名函数内部的参数是局部变量，不会污染外部作用域。 - **灵活性**：通过参数，匿名函数可以处理不同输入，增强复用性[^1]。 ### 代码示例汇总 ```javascript // 示例1：传统匿名函数（赋值给变量） const greet = function(name) { return `Hello, ${name}!`; }; console.log(greet("Alice")); // 输出"Hello, Alice!" // 示例2：箭头函数（作为回调） const numbers = [1, 2, 3]; const squares = numbers.map(x => x * x); // [1, 4, 9] // 示例3：IIFE带参数 (function(x, y) { console.log(`乘积：${x * y}`); // 输出"乘积：50" })(10, 5); ``` ### 注意事项 - 传统匿名函数中的`this`指向调用者，箭头函数则继承外层作用域的`this`。 - 避免在循环中创建匿名函数（可能导致性能问题），可改用命名函数。 通过以上方法，可以灵活定义带参数的匿名函数，满足不同场景需求[^1]。 §§相关问题§§ 1. 如何在事件监听器中使用带参数的匿名函数？ 2. 匿名函数的参数作用域规则是什么？ 3. 箭头函数参数和传统函数参数有何异同？ </think> ### JavaScript带参数的匿名函数定义方法 在JavaScript中，定义带参数的匿名函数主要有以下几种方式： #### 1. **函数表达式（传统语法）** ```javascript const sum = function(a, b) { return a + b; }; console.log(sum(3, 5)); // 输出8 ``` - 参数定义在 `function` 后的括号中 `(a, b)` - 可通过变量名调用函数[^1] #### 2. **箭头函数（ES6语法）** ```javascript // 完整写法 const multiply = (x, y) => { return x * y; }; // 简化写法（单行可省略大括号和return） const square = n => n * n; console.log(multiply(4, 5)); // 输出20 console.log(square(3)); // 输出9 ``` - 单个参数可省略括号：`n => ...` - 无参数时需空括号：`() => ...`[^1] #### 3. **立即执行函数（IIFE）** ```javascript // 带参数的IIFE (function(message) { console.log(message); // 输出"立即执行" })("立即执行"); // 箭头函数IIFE ((a, b) => { console.log(a + b); // 输出15 })(10, 5); ``` - 定义后立即执行，参数在最后的小括号传入[^3] - 常用作独立作用域封装 #### 4. **作为回调函数使用** ```javascript // 数组遍历 [1, 2, 3].forEach(function(item) { console.log(item * 2); // 输出2,4,6 }); // 事件处理 button.addEventListener('click', (event) => { console.log(event.target); }); ``` - 参数由调用方动态传入（如 `item`/`event`） - 箭头函数避免 `this` 绑定问题 ### 关键区别总结 | **特性** | 传统匿名函数 | 箭头函数 | |------------------|--------------------------|-------------------------| | **参数括号** | 必须 `function(a,b)` | 单参数时可省略 `a =>` | | **this绑定** | 动态绑定 | 继承外部作用域 | | **arguments对象**| 支持 | 不支持 | | **构造函数** | 可做构造函数 | 不可做构造函数 | > **最佳实践**： > - 需要动态 `this`（如对象方法）时用传统函数 > - 需要词法作用域 `this` 时用箭头函数 > - 单次使用的逻辑优先考虑IIFE模式[^3]
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值