前端开发面试题—JavaScript事件

简介: 今天分享一下我遇到的一个面试题,是关于JavaScript事件的问题,简单说一下JavaScript的事件有哪些?因此我们首先要知道什么是JavaScript事件,说到JavaScript事件就离不开操作、获取DOM了,但本章主要还是介绍JavaScript事件的种类。

 今天分享一下我遇到的一个面试题,是关于JavaScript事件的问题,简单说一下JavaScript的事件有哪些?因此我们首先要知道什么是JavaScript事件,说到JavaScript事件就离不开操作、获取DOM了,但本章主要还是介绍JavaScript事件的种类。


什么是JavaScript事件❓

    • JavaScript 使我们有能力创建动态页面。事件是可以被 JavaScript 侦测到的行为,是一种“触发-响应”的机制。网页中的每个元素都可以产生某些可以触发JavaScript函数的事件。比方说,我们可以在用户点击某按钮时产生一个 onClick 事件来触发某个函数。事件在 HTML 页面中定义。
    • 当我们在某个元素上添加一个事件时,根据事件执行的前后可以把它当成一个事件流,例如在DOM事件中规定的事件流包括三个阶段:事件捕获阶段、处于目标阶段和事件冒泡阶段。首先发生的是事件捕获,然后是实际的目标接收到事件,最后是冒泡阶段,可以在这个阶段对事件做出响应。
    • 其中事件的三要素为事件源、事件类型和事件处理程序(事件处理程序可以通过返回一个适当的值、调用事件对象的某个方法或设置事件对象的某个属性来阻止默认操作的发生。),可以简单理解为“谁触发了事件”“触发了什么事件”“触发事件以后要做什么”。

    🧩JavaScript事件类别

    注意:HTML DOM 事件允许Javascript在HTML文档元素中注册不同事件处理程序。事件通常与函数结合使用,函数不会在事件发生前被执行!

    鼠标事件

    属性 描述
    onclick 当用户点击某个对象时调用的事件句柄。
    oncontextmenu 在用户点击鼠标右键打开上下文菜单时触发
    ondblclick 当用户双击某个对象时调用的事件句柄。
    onmousedown 鼠标按钮被按下。
    onmouseenter 当鼠标指针移动到元素上时触发。
    onmouseleave 当鼠标指针移出元素时触发
    onmousemove 鼠标被移动。
    onmouseover 鼠标移到某元素之上。
    onmouseout 鼠标从某元素移开。
    onmouseup 鼠标按键被松开。

    键盘事件

    属性 描述
    onkeydown 某个键盘按键被按下。
    onkeypress 某个键盘按键被按下并松开。
    onkeyup 某个键盘按键被松开。

    框架/对象(Frame/Object)事件

    属性 描述
    onabort 图像的加载被中断。 ( <object>)
    onbeforeunload 该事件在即将离开页面(刷新或关闭)时触发
    onerror 在加载文档或图像时发生错误。 ( <object>, <body>和 <frameset>)
    onhashchange 该事件在当前 URL 的锚部分发生修改时触发。
    onload 一张页面或一幅图像完成加载。
    onpageshow 该事件在用户访问页面时触发
    onpagehide 该事件在用户离开当前网页跳转到另外一个页面时触发
    onresize 窗口或框架被重新调整大小。
    onscroll 当文档被滚动时发生的事件。
    onunload 用户退出页面。 ( <body> 和 <frameset>)

    表单事件

    属性 描述
    onblur 元素失去焦点时触发
    onchange 该事件在表单元素的内容改变时触发( <input>, <keygen>, <select>, 和 <textarea>)
    onfocus 元素获取焦点时触发
    onfocusin 元素即将获取焦点时触发
    onfocusout 元素即将失去焦点时触发
    oninput 元素获取用户输入时触发
    onreset 表单重置时触发
    onsearch 用户向搜索域输入文本时触发 ( <input="search">)
    onselect 用户选取文本时触发 ( <input> 和 <textarea>)
    onsubmit 表单提交时触发

    动画事件

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

    过渡事件

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

    其他

    还有包括(比较陌生的事件)多媒体事件、剪贴板事件、打印事件、拖动事件和一些其他事件

    image.gif

    详情请点击下方链接查阅

    HTML DOM 事件

    目录
    相关文章
    |
    26天前
    |
    JavaScript 前端开发
    JavaScript 事件
    JavaScript 事件
    29 2
    |
    6天前
    |
    JavaScript 前端开发 小程序
    一小时入门Vue.js前端开发
    本文是作者关于Vue.js前端开发的快速入门教程,包括结果展示、参考链接、注意事项以及常见问题的解决方法。文章提供了Vue.js的基础使用介绍,如何安装和使用cnpm,以及如何解决命令行中遇到的一些常见问题。
    一小时入门Vue.js前端开发
    |
    6天前
    |
    Web App开发 前端开发 Linux
    「offer来了」浅谈前端面试中开发环境常考知识点
    该文章归纳了前端开发环境中常见的面试知识点,特别是围绕Git的使用进行了详细介绍,包括Git的基本概念、常用命令以及在团队协作中的最佳实践,同时还涉及了Chrome调试工具和Linux命令行的基础操作。
    「offer来了」浅谈前端面试中开发环境常考知识点
    |
    9天前
    |
    存储 前端开发 JavaScript
    前端基础(二)_JavaScript变量、JavaScript标识符、JavaScript获取元素、JavaScript的鼠标事件
    本文介绍了JavaScript变量的声明和使用、标识符的命名规则、如何获取和操作HTML元素,以及JavaScript的鼠标事件处理,通过示例代码展示了这些基础知识点在实际开发中的应用。
    23 2
    前端基础(二)_JavaScript变量、JavaScript标识符、JavaScript获取元素、JavaScript的鼠标事件
    |
    9天前
    |
    Web App开发 JavaScript 前端开发
    前端基础(一)_初识JavaScript
    本文介绍了JavaScript的起源、核心组成(ECMAScript、DOM、BOM),并解释了JavaScript的三种引入方式:行内引入、内部引入和外部引入,以及`window.onload`的使用,最后讨论了网页、网站、浏览器和兼容性的概念。
    13 2
    前端基础(一)_初识JavaScript
    |
    9天前
    |
    前端开发 JavaScript
    前端基础(八)_JavaScript循环(for循环、for-in循环、for-of循环、while、do-while 循环、break 与 continue)
    本文介绍了JavaScript中的循环语句,包括for循环、for-in循环、for-of循环、while循环、do-while循环以及break和continue的使用。
    28 1
    前端基础(八)_JavaScript循环(for循环、for-in循环、for-of循环、while、do-while 循环、break 与 continue)
    |
    8天前
    |
    JavaScript 前端开发
    JavaScript HTML DOM 事件
    JavaScript HTML DOM 事件
    14 5
    |
    9天前
    |
    监控 JavaScript 前端开发
    |
    9天前
    |
    存储 前端开发 JavaScript
    前端基础(三)_JavaScript数据类型(基本数据类型、复杂数据类型)
    本文详细介绍了JavaScript中的数据类型,包括基本数据类型(Number、String、Boolean、Undefined、Null)和复杂数据类型(Object),并解释了如何使用`typeof`操作符来识别变量的数据类型。同时,还讨论了对象、函数和数组等复杂数据类型的使用方式。
    13 2
    |
    26天前
    Nest.js 实战 (十二):优雅地使用事件发布/订阅模块 Event Emitter
    这篇文章介绍了在Nest.js构建应用时,如何通过事件/发布-订阅模式使应用程序更健壮、灵活、易于扩展,并简化服务间通信。文章主要围绕@nestjs/event-emitter模块展开,这是一个基于eventemitter2库的社区模块,提供了事件发布/订阅功能,使得实现事件驱动架构变得简单。文章还介绍了如何使用该模块,包括安装依赖、初始化模块、注册EventEmitterModule、使用装饰器简化监听等。最后总结,集成@nestjs/event-emitter模块可以提升应用程序的事件驱动能力,构建出更为松耦合、易扩展且高度灵活的系统架构,是构建现代、响应迅速且具有高度解耦特性的Nest.
    下一篇
    无影云桌面