JavaScript:监听事件

 该方法用于向浏览器窗口注册事件监听器,当指定的事件(如单击、按键按下)被触发时,浏览器会自动调用指定的函数(回调函数)。

window.addEventListener(event, function, useCapture);

参数说明:

  • event: 要监听的事件名称,如 'click'(表示单击事件)、'keydown'(表示键盘按键按下事件)等。
  • function: 事件触发时要调用的函数(回调函数)。
  • useCapture: 可选参数,表示事件是否在捕获阶段触发,是一个布尔值,一般不用设置,默认为 false(表示在冒泡阶段触发)。

 示例:

mounted () {window.addEventListener('mousedown', this.handleMousedown)//监听鼠标按下window.addEventListener('mouseup', this.handleMouseup)//监听鼠标抬起window.addEventListener('keydown', this.handlekeydown)//监听键盘按下},methods: {// 鼠标按下事件handleMousedown (e) {if (e.button == 0) {console.log('鼠标左键按下')}if (e.button == 1) {console.log('鼠标滚动键按下')}if (e.button == 2) {console.log('鼠标右键按下')}console.log(e.pageX, e.pageY)// 坐标},// 鼠标抬起事件handleMouseup (e) {if (e.button == 0) {console.log('鼠标左键抬起')}if (e.button == 1) {console.log('鼠标滚动键抬起')}if (e.button == 2) {console.log('鼠标右键抬起')}console.log(e.pageX, e.pageY)// 坐标},// 监听键盘事件handlekeydown (e) {console.log(e)}},

常用事件:

鼠标事件

属性  描述 

click  鼠标单击某个对象时。
contextmenu  鼠标右键
dblclick  鼠标双击某个对象时。
mousedown  鼠标按钮被按下。
mouseenter  当鼠标指针移动到元素上时。
mouseleave  当鼠标指针移出元素时
mousemove 鼠标被移动。
mouseover 鼠标移到某元素之上。
mouseout 鼠标从某元素移开。
mouseup 鼠标按键被松开。

键盘事件

keydown 某个键盘按键被按下。
keypress 某个键盘按键被按下(与上一个区别就是不识别功能键,比如ctrl 箭头 tab等等)。
keyup 某个键盘按键被松开。
执行顺序:keydown ----keypress ----keyup
键盘事件里的keyCode属性可以得到相应键的ASCII码值

框架/对象(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 该事件在页面即将开始打印时触发

拖动事件

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

多媒体(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 事件在视频由于要播放下一帧而需要缓冲时触发。

动画事件

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

过渡事件

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

其他事件

message 该事件通过或者从对象(WebSocket, Web Worker, Event Source 或者子 frame 或父窗口)接收到消息时触发
online 该事件在浏览器开始在线工作时触发。
offline 该事件在浏览器开始离线工作时触发。
popstate 该事件在窗口的浏览历史(history 对象)发生改变时触发。 event occurs when the window’s history changes
show 该事件当元素在上下文菜单显示时触发
storage 该事件在 Web Storage(HTML 5 Web 存储)更新时触发
toggle 该事件在用户打开或关闭 元素时触发
wheel 该事件在鼠标滚轮在元素上下滚动时触发

总结来说,window.addEventListener() 是一种非常强大的事件监听函数,通常用于添加多个事件监听器和稳定性。

与 onclick 属性相比,在添加多个事件监听器时,window.addEventListener() 更加强大和灵活。window.addEventListener() 没有额外的依赖,因此可以更快,更可靠地添加事件监听器。

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/163455.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

洛谷题单--线性表

P3156 【深基15.例1】询问学号 链接 : 【深基15.例1】询问学号 - 洛谷 直接输入&#xff0c;然后输出a[i]即可; 代码 : #include<iostream> #include<cstring> #include<algorithm> #include<vector> using namespace std; int main(){int n, q …

请手写一个发布-订阅的模式

发布-订阅模式也是经典的设计模式之一&#xff0c;它在前端很多地方都有应用&#xff0c;比如javascript事件池&#xff0c;Vue的$on、$off&#xff0c;nodejs的events模块和socket通信等等都有应用&#xff0c;也是前端面试比较火热的考点之一&#xff0c;接下来给大家详细介绍…

cefsharp119.4.30(cef119.4.3,Chromium119.0.6045.159)版本升级体验支持H264及其他多个H264版本

Cefsharp119.4.30,cef119.4.3,Chromium119.0.6045.159 此更新包括一个高优先级安全更新 This update includes a high priority security update. 说明:此版本119.4.3支持H264视频播放(需要联系我),其他版本。.NETFramework 4.6.2 NuGet Gallery | CefSharp.WinForms 119.…

运动规划Motion-Planning随笔

online verification技术 实时安全校验技术&#xff1a;留一手 首先计算能否通过刹车这种方式得到一条安全轨迹&#xff0c;&#xff08;让速不让道&#xff09;&#xff0c;当刹车有可能碰撞到行人或其他车辆时&#xff0c;则判断变道是否会产生碰撞。如果能变道&#xff0…

深度学习之七(深度信念网络和受限玻尔兹曼机器)

概念 深度信念网络(Deep Belief Networks,DBN)和受限玻尔兹曼机器(Restricted Boltzmann Machines,RBMs)都是无监督学习的模型,通常用于特征学习、降维和生成数据。 受限玻尔兹曼机器(RBM): 结构: RBM 是一个两层神经网络,包括一个可见层和一个隐藏层。这两层之间…

qt按照不同编码格式读取文字(UTF-16LE,UTF-8,UTF-8BOM,UTF-16BE)

enum class EncodingFormat : int {ANSI 0,//GBKUTF16LE,UTF16BE,UTF8,UTF8BOM, }; EncodingFormat VideoPlayer::FileCharacterEncoding(const QString &fileName) {//假定默认编码utf8EncodingFormat code EncodingFormat::UTF8;QFile file(fileName);if (file.open(QI…

「 系统设计 」 为什么要做架构分层?

「 系统设计 」 为什么要做架构分层&#xff1f; 参考&鸣谢 3.设计模式之分层思维&#xff1a;为什么要做代码分层架构&#xff1f; 从零开始学架构&#xff08;八&#xff09;分层架构和设计模式 架构模式之分层架构总结 文章目录 「 系统设计 」 为什么要做架构分层&…

解决 IDEA下VUE项目 @符号无法识别的问题

根目录新建jsconfig.json {"compilerOptions": {"baseUrl": "./","paths": {"/*": ["src/*"]}},"exclude": ["node_modules","dist"] }

IT支持团队的绩效指标和最佳实践

一名员工在远程时因笔记本问题寻求IT支持&#xff0c;尽管他们多次尝试排除故障&#xff0c;但由于缺乏专业知识&#xff0c;最终还是无法访问工作所需的应用程序。这时&#xff0c;他们需要一名专业的 IT 技术人员来指导他们&#xff0c;但他们只能等待有人注意到并回应他们的…

海报设计必备:揭秘5款炙手可热的设计工具

1.即时设计&#xff1a;能实现在线协作的海报设计软件 即时设计作为 2020 年上线的国产设计工具&#xff0c;目前已经有了超百万的注册用户&#xff0c;获得了广大设计师的一致好评。与其他传统海报设计软件相比&#xff0c;即时设计具有这几个优点&#xff1a;一是所有功能都…

Chrome 访问不了项目?10080端口 ERR_UNSAFE_PORT:问题原因 / 解决方案

文章目录 被禁用端口列表解决方法方法一、更换端口 / 使用代理 / 使用域名方法二、对浏览器下手WindowsMac 最近有客户反馈&#xff0c;在chrome浏览器中访问不了项目&#xff0c;其他浏览器都是正常的。 &#xff1f;奇了怪了&#xff0c;难道客户对chrome做了什么操作&#x…

Docker | Docker入门安装

✅作者简介&#xff1a;大家好&#xff0c;我是Leo&#xff0c;热爱Java后端开发者&#xff0c;一个想要与大家共同进步的男人&#x1f609;&#x1f609; &#x1f34e;个人主页&#xff1a;Leo的博客 &#x1f49e;当前专栏&#xff1a;Docker系列 ✨特色专栏&#xff1a; My…

探索WebStorm 2023 Mac/win:最强大的JavaScript开发工具

在当今的软件开发领域&#xff0c;JavaScript已经成为了一种不可或缺的编程语言。而在众多的JavaScript开发工具中&#xff0c;WebStorm一直以其强大的功能和友好的用户界面脱颖而出。现在&#xff0c;我们迎来了全新的WebStorm 2023版本&#xff0c;它将带给开发者们更加出色的…

有机纺织品OCS认证

【有机纺织品OCS认证】 有机产品是指按照这种方式生产和加工的产品。产品符合国际或者国家有机产品要求标准&#xff0c;并通过国家认证机构认证的一切农副产品及其加工品&#xff0c;包括粮食、蔬菜、水果、奶制品、禽畜产品、天然纤维等。 有机纺织品认证是指在使用经过国际或…

华中科技大学李松课题组,利用机器学习预测多孔材料水吸附等温线

多孔材料的水吸附等温线是一个非常重要的参数&#xff0c;但这一参数的获得并不容易。这是因为多孔材料种类过多、结构多元&#xff0c;通过实验和计算的方式获得水吸附等温线数据成本过高&#xff0c;耗时过长。 华中科技大学的李松课题组&#xff0c;建立了一个两步机器学习模…

LeetCode [简单] 283. 移动零

给定一个数组 nums&#xff0c;编写一个函数将所有 0 移动到数组的末尾&#xff0c;同时保持非零元素的相对顺序。 请注意 &#xff0c;必须在不复制数组的情况下原地对数组进行操作。 283. 移动零 - 力扣&#xff08;LeetCode&#xff09; 思路&#xff1a; 快慢指针&…

可以在uni-app使用的类vconsole.js插件

兴致勃勃在uni-app项目引入调试工具vconsole.js结果真机调试页面空白 怎么办?! 别着急 paradox老师有方法 替代插件下载地址&#xff1a;直接下载插件并引入HbuilderXuni_modules插件 - 类Vconsole APP端调试工具 - HF调试器 - DCloud 插件市场 下载完成在main.js中引入&…

鸿蒙开发环境搭建-deveco-studio 开发工具安装问题()

从华为官网下载工具deveco-studio, 下载地址 HUAWEI DevEco Studio和SDK下载和升级 | HarmonyOS开发者 这是下载后的工具 1、一步步安装步骤 报错了&#xff0c;一般安装都会报这个错误 看似问题不小&#xff0c;其实&#xff0c; 继续下步&#xff0c;就正常了&#xff0c…

栈回溯--在栈里挑出返回地址

GNU Arm Embedded Toolchain project files : GNU Arm Embedded Toolchain arm-none-eabi-addr2line -e F103_Moduel.axf -a -f 08000350 08001d94 0800260c 汇编中&#xff1a; ;HardFault_Handler ; PROC ; EXPORT HardFault_Handler …

神命令tree的魅力你get到了吗?

背景 日常工作中&#xff0c;有时候为了明确表达自己的意思&#xff0c;往往需要输出对应的目录层级结构&#xff0c;手动一个个输入往往显得不那么高级&#xff0c;效率相对较低&#xff0c;这时候拥有可以一键输出目录结构并且可以快速转化为文本的工具就比较方便&#xff0…