addEventListener()参数及事件汇总

这篇具有很好参考价值的文章主要介绍了addEventListener()参数及事件汇总。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

        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                     该事件在鼠标滚轮在元素上下滚动时触发文章来源地址https://www.toymoban.com/news/detail-723945.html

到了这里,关于addEventListener()参数及事件汇总的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 前端笔记 js关于addEventListener

    addEventListener() 方法用于向指定元素添加监听事件。 且同一元素目标可重复添加,不会覆盖之前相同事件,配合 removeEventListener() 方法来移除事件。 使用方法: document.getElementById(元素id).addEventListener(“click”, function(){ console.log(“目标元素被点击了”); }); 参数说明:有三个参

    2024年04月17日
    浏览(43)
  • 关于window.addEventListener的小坑

    子窗口向父窗口传值,比如点击按钮弹窗打开iframe ,这时候可以使用,防止跨域。我的问题比较简单,就是监听没有删除,导致多次执行 演示代码,不分父子窗口,直接写一个页面内,仅供参考 父窗口,监听数据 子窗口,发送数据 这个时候,由于我的监听,是放在按钮事

    2024年02月04日
    浏览(38)
  • 为什么在js中需要添加addEventListener()?

    addEventListener(监听器)--- EventTarget.addEventListener() 方法将指定的监听器注册到 EventTarget 上,当该对象触发指定的事件时,指定的回调函数就会被执行。事件目标可以是一个文档上的元素 Element、Document 和 Window,也可以是任何支持事件的对象(比如 XMLHttpRequest)。 addEventListener(

    2024年02月19日
    浏览(35)
  • vue自学,window.addEventListener不生效解决方案

    vue自学,window.addEventListener不生效解决方案!最近在网上跟着别人的教程视频自学vue,在给window对象添加监听事件后,发现起初,一直没有效果。找不到原因,比较困惑。 如图,这是老师视频里面的截图代码。 我自己太马虎了。自己的代码里写的时候,多了一个小括号,导致

    2024年02月11日
    浏览(31)
  • vue中动态添加class修改div宽高无法触发addEventListener(“resize“)

    在触发事件动态修改class发现resize没有触发。 具体原因没有找到--------无语 因为不知道什么原因只能替代了,网上说resize消耗很大, MutationObserver与ResizeObserver 更节省性能。

    2024年02月12日
    浏览(42)
  • 漏刻有时百度地图API实战开发(1)华为手机无法使用addEventListener click 的兼容解决方案

    漏刻有时百度地图API实战开发(1)华为手机无法使用addEventListener click 的兼容解决方案 漏刻有时百度地图API实战开发(2)文本标签显示和隐藏的切换开关 漏刻有时百度地图API实战开发(3)自动获取地图多边形中心点坐标 漏刻有时百度地图API实战开发(4)显示指定区域在移动端异常的

    2024年01月19日
    浏览(65)
  • 微信小程序引用echart报错 ,上传代码报t.addEventListener is not a function

    最近做项目用到echart新版本,5.4.0。在微信开发工具里面可以正常运行。代码上传的时候就会报错,真机和预览也报错。 解决办法 在ec-canvas文件夹下的 wx-canvas.js文件中添加 addEventListener() {} 空函数,如下: 再上传就不会出错了

    2024年02月11日
    浏览(41)
  • vue+elementUi获取滚动条位置、判断是否存在滚动条、addEventListener、removeEventListener、document、window、scroll、client

    document方式 window方式 公共部分 document方式 window方式 1、获取指定元素的滚动条值。在 elementUi 组件中需要通过 class 获取,因为 id 是动态值。 2、使用 window 方式时,只能检测到 body 或页面窗口的滚动条。然而对于 elementUi 的弹窗等组件获取到的滚动条值为 0 。 3、 addEventListe

    2024年02月13日
    浏览(26)
  • JavaScript (五) -- JavaScript 事件(事件的绑定方式)

    目录 1.  JavaScript 事件的概述: 2.  事件的绑定(两种方式):         JavaScript事件是 指当网页中某个元素被触发时,可以执行一些JS代码来处理这个事件 ,例如鼠标单击、鼠标移动、键盘按键等。事件通常被认为是浏览器与用户交互的方式之一。       

    2024年02月03日
    浏览(51)
  • windows安全事件查看及安全事件id汇总

    Win+R打开运行,输入“eventvwr.msc”,回车运行,打开“事件查看器”;或者右键我的电脑-管理-系统工具-事件查看器。在事件查看器中右键单击系统或安全日志,选择筛选当前日志,在筛选器中输入下列事件ID即可。 日志路径:C:WindowsSystem32winevtLogs 查看日志:Security.evtx、

    2024年02月11日
    浏览(40)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包