Element.addEventListener用法记录

最新推荐文章于 2024-07-01 16:22:16 发布
最新推荐文章于 2024-07-01 16:22:16 发布
阅读量654 收藏
点赞数 1
分类专栏： 前端学习笔记 文章标签： 前端 html javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_52989046/article/details/128450776
版权

用法

Element.addEventListener(eventName, handler, options)
  • eventName 事件名称
  • handler回调函数
  • options配置对象

event

  1. 鼠标事件

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

  2. 键盘事件

    • keydown 某个键盘按键被按下。
    • keypress 某个键盘按键被按下并松开。
    • keyup 某个键盘按键被松开。
    • 框架/对象（Frame/Object）事件
    • abort 图像的加载被中断。 ( )
    • beforeunload 该事件在即将离开页面（刷新或关闭）时触发
    • error 在加载文档或图像时发生错误。 ( , 和 )
    • hashchange 该事件在当前 URL 的锚部分发生修改时触发。
    • load 一张页面或一幅图像完成加载。
    • pageshow 该事件在用户访问页面时触发
    • pagehide 该事件在用户离开当前网页跳转到另外一个页面时触发
    • resize 窗口或框架被重新调整大小。
    • scroll 当文档被滚动时发生的事件。
    • unload 用户退出页面。 ( 和 )

  3. 表单事件

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

  4. 剪贴板事件

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

  5. 打印事件

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

  6. 拖动事件

    • drag 该事件在元素正在拖动时触发
    • dragend 该事件在用户完成元素的拖动时触发
    • dragenter 该事件在拖动的元素进入放置目标时触发
    • dragleave 该事件在拖动元素离开放置目标时触发
    • dragover 该事件在拖动元素在放置目标上时触发
    • dragstart 该事件在用户开始拖动元素时触发
    • drop 该事件在拖动元素放置在目标区域时触发

  7. 多媒体（Media）事件

    • abort 事件在视频/音频（audio/video）终止加载时触发。
    • canplay 事件在用户可以开始播放视频/音频（audio/video）时触发。
    • canplaythrough 事件在视频/音频（audio/video）可以正常播放且无需停顿和缓冲时触发。
    • durationchange 事件在视频/音频（audio/video）的时长发生变化时触发。
    • emptied The event occurs when the current playlist is empty
    • 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 事件在视频由于要播放下一帧而需要缓冲时触发。

  8. 动画事件

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

  9. 过渡事件

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

  10. 其他事件

    • message 该事件通过或者从对象(WebSocket, Web Worker, Event Source 或者子 frame 或父窗口)接收到消息时触发
    • online 该事件在浏览器开始在线工作时触发。
    • offline 该事件在浏览器开始离线工作时触发。
    • popstate 该事件在窗口的浏览历史（history 对象）发生改变时触发。 event occurs when the window’s history changes
    • show 该事件当

options

  1. once:Boolean 用来决定事件回调是否只被触发一次

    • true: 只会触发一次

    • false:无限制

  2. capture:Boolean 用来决定事件是在冒泡阶段触发还是捕获阶段触发

    • true: 捕获阶段触发
    • false:冒泡阶段触发

  3. passive:Boolean 用来决定默认捕获器是否也被触发

    • true: 阻止默认捕获器
    • false:不阻止

用法举例

    leftItem.addEventListener("click",() => {
        selectList.classList.toggle("he")
    },{once:true,capture:true})
LasterCN
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
element.addEventListener() 方法 详细解析与代码示例
猿码互联
05-31 692
为 "myButton" 的元素，并为它添加了两个事件监听器。当按钮被点击或者鼠标悬停在按钮上时，对应的函数就会被触发，分别输出相应的信息。方法用于向指定的元素添加事件监听器。在上面的示例中，我们获取了一个具有。
vue实现鼠标移入移出事件代码实例
10-17
在例子中，`@mouseenter`和`@mouseleave`是Vue简写的事件绑定，分别对应JavaScript中的`addEventListener('mouseenter')`和`addEventListener('mouseleave')`。 2. **数据绑定**： Vue使用双括号`{{ }}`进行数据...
addEventListener 的用法示例介绍
09-04
主要介绍了addEventListener 的用法,需要的朋友可以参考下
HTML DOM 事件
akuibpt23191的博客
07-13 586
1. HTML DOM 事件 参考文档：https://www.runoob.com/jsref/dom-obj-event.html HTML DOM 事件允许Javascript在HTML文档元素中注册不同事件处理程序。 事件通常与函数结合使用，函数不会在事件发生前被执行！ (如用户点击按钮)。 提示： 在 W3C 2 级 DOM 事件中规范了事件模型。...
addEventListener 和attachEvent用法
寂寞的时光
07-23 354
对于IE的attachEvent方法可能大家都比较熟，现在说说FireFox的addEventListener的用法。 addEventListener的参数一共有三个，语法为： element.addEventListener(type,listener,useCapture) 下面是详解 其中element是要绑定函数的对象。 type是事件名称，要注意的是"onclick"要...
JavaScript 事件监听器 addEventListener() 方法 和一些基本的事件
最新发布
qq_52530691的博客
07-01 2458
addEventListener() 方法用于向指定元素添加事件句柄。当计算机属性检测到事件发生的时候，运行一些代码，通常是我们所制定的函数。
addEventListener() 方法
qq_39355295的博客
10-11 283
1、定义 addEventListener() 方法用于向指定元素添加事件句柄。 提示： 使用 removeEventListener() 方法来移除 addEventListener() 方法添加的事件句柄。 2、语法 element.addEventListener(event, function, useCapture) 3、参数值 (1) event 必须。字符串，指定事件名。 注意: ...
js按住鼠标左键选中元素框代码.zip_JS holds_The Element_mouse
09-15
1. **事件监听器**：在HTML元素上添加事件监听器，我们可以使用`addEventListener`方法。例如，假设我们要对一个特定的元素`element`添加事件监听器： ```javascript const element = document.getElementById('...
纯js仿element图片预览
04-23
我们可以使用`addEventListener`方法来实现： ```javascript document.querySelectorAll('.preview-image').forEach(img => { img.addEventListener('click', e => { e.preventDefault(); // 阻止默认的链接跳转 ...
rotate.rar
08-14
在JavaScript中，我们可以使用`document.getElementById`或`querySelector`等方法获取DOM元素，然后通过`.style`属性修改元素的CSS样式。 对于元素大小的控制，我们需要监听鼠标事件，如`mousedown`（鼠标按下）、`...
addEventListener事件
血色残阳的专栏
03-30 1050
addEventListener(type:String ,listener:Function,useCapture:Boolean=false,priority:int=0,useWeakReference:Boolean=false)       useCapture  表示是否打开捕获事件，默认为false       priority    表示监听器的优先级，默认为0，优
js事件 -- addEventListener事件
banni6813的博客
05-08 427
百度上很多篇文章讲解addEventListener DOM0级事件的时候讲解的都是覆盖，概念如下： 同一个元素的同一种事件只能绑定一个函数，否则后面的函数会覆盖之前的函数 其实不然，官网讲解 添加的事件不会覆盖已存在的事件。 <!DOCTYPE html> <html> <head> <meta charset="utf-8"...
关于JS中addEventListener的使用
小火车况且况且况且的博客
03-10 4081
关于JS中addEventListener的使用 MDN中addEventListener()说明 主要用来实现事件的绑定 存在三个参数 target.addEventListener(type, listener, useCapture); type: 表示监听事件类型的字符串。类似于click,mouseover... listener: 用来监听处理的函数方法 useCapture: 默认是false,事件冒泡,可以设置为true为事件捕获 这里需要了解一下基本的事件流(事件捕获->事件目标
addEventListener()使用方法
热门推荐
搏·梦的博客
04-10 2万+
document.addEventListener() 方法用于向文档添加事件句柄，即事件监听。先看下面代码，稍后进行讲解。 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body>...
js addeventlistener
Charles1938229的博客
02-17 2935
JavaScript是一种广泛应用于网页开发的脚本语言，具有灵活的语法和强大的功能。在网页中，我们经常需要处理用户的交互操作，例如点击按钮、输入文本等，而addEventListener方法就是用来处理这些事件的。
addEventListener使用方法
qq_40712151的博客
04-19 352
target.addEventListener(type, listener, useCapture); 加油，别放弃。啊啊啊啊啊，太难了，aaaa https://www.cnblogs.com/laonanren/archive/2013/03/13/2958474.html
js事件-笔记
qq_43563512的博客
10-26 793
这里写目录标题js事件常见事件事件的注册方式事件处理分级1.DOM0级事件处理程序：2. DOM2级事件处理程序：3. DOM3级事件事件流三个阶段 js事件 常见事件 onload 加载完成事件 页面加载之后，常用于页面js代码初始化动作 onclick 单击事件 常用于按钮的点击响应操作 onblur 失去焦点事件 常用于输入框失去焦点后验证其输入内容是否合法 onchange 内容发生改变事件 常用于下拉列表和输入框发生改变后操作 insubmit 表单提交事件 常用于表单提交前
vue+element实现dialog拖拽
03-31
2. 在 startDrag 方法中记录鼠标按下的位置和对话框的位置。 ```js export default { data() { return { dialogVisible: false, dragging: false, // 是否正在拖拽 dragX: 0, // 鼠标按下时的位置 dragY: 0, ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值