前端开发面试题—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 事件

    相关文章
    |
    6月前
    |
    JavaScript 前端开发 API
    |
    7月前
    |
    JSON 自然语言处理 前端开发
    【01】对APP进行语言包功能开发-APP自动识别地区ip后分配对应的语言功能复杂吗?-成熟app项目语言包功能定制开发-前端以uniapp-基于vue.js后端以laravel基于php为例项目实战-优雅草卓伊凡
    【01】对APP进行语言包功能开发-APP自动识别地区ip后分配对应的语言功能复杂吗?-成熟app项目语言包功能定制开发-前端以uniapp-基于vue.js后端以laravel基于php为例项目实战-优雅草卓伊凡
    351 72
    【01】对APP进行语言包功能开发-APP自动识别地区ip后分配对应的语言功能复杂吗?-成熟app项目语言包功能定制开发-前端以uniapp-基于vue.js后端以laravel基于php为例项目实战-优雅草卓伊凡
    |
    6月前
    |
    JavaScript 前端开发 Java
    【Java进阶】详解JavaScript事件
    总的来说,JavaScript事件是JavaScript交互设计的核心,理解和掌握JavaScript事件对于编写高效、响应式的网页应用至关重要。
    112 15
    |
    6月前
    |
    前端开发 JavaScript 数据可视化
    58K star!这个让网页动起来的JS库,前端工程师直呼真香!
    Anime.js 是一款轻量级但功能强大的JavaScript动画引擎,它能够以最简单的方式为网页元素添加令人惊艳的动效。这个项目在GitHub上已经获得58,000+星标,被广泛应用于电商页面、数据可视化、游戏开发等场景。
    253 8
    |
    7月前
    |
    资源调度 JavaScript 前端开发
    前端开发必备!Node.js 18.x LTS保姆级安装教程(附国内镜像源配置)
    本文详细介绍了Node.js的安装与配置流程,涵盖环境准备、版本选择(推荐LTS版v18.x)、安装步骤(路径设置、组件选择)、环境验证(命令测试、镜像加速)及常见问题解决方法。同时推荐开发工具链,如VS Code、Yarn等,并提供常用全局包安装指南,帮助开发者快速搭建高效稳定的JavaScript开发环境。内容基于官方正版软件,确保合规性与安全性。
    6417 25
    |
    8月前
    |
    前端开发
    【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
    【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
    227 1
    【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
    |
    9月前
    |
    JavaScript 前端开发 测试技术
    盘点原生JavaScript中直接触发事件的方式
    本文全面探讨了原生JavaScript中触发事件的多种方式,包括`dispatchEvent`、`Event`构造函数、`CustomEvent`构造器、直接调用事件处理器以及过时的`createEvent`和`initEvent`方法。通过技术案例分析,如模拟点击事件、派发自定义数据加载事件和实现提示框系统,帮助开发者掌握这些方法在实际开发中的应用,提升灵活性与兼容性。
    306 3
    |
    11月前
    |
    JavaScript 前端开发 Java
    springboot解决js前端跨域问题,javascript跨域问题解决
    本文介绍了如何在Spring Boot项目中编写Filter过滤器以处理跨域问题,并通过一个示例展示了使用JavaScript进行跨域请求的方法。首先,在Spring Boot应用中添加一个实现了`Filter`接口的类,设置响应头允许所有来源的跨域请求。接着,通过一个简单的HTML页面和jQuery发送AJAX请求到指定URL,验证跨域请求是否成功。文中还提供了请求成功的响应数据样例及请求效果截图。
    176 3
    springboot解决js前端跨域问题,javascript跨域问题解决
    |
    11月前
    |
    缓存 JavaScript 前端开发
    JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用
    本文深入讲解了 JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用。
    392 5
    |
    11月前
    |
    缓存 前端开发 JavaScript
    JavaScript前端路由的实现原理及其在单页应用中的重要性,涵盖前端路由概念、基本原理、常见实现方式
    本文深入解析了JavaScript前端路由的实现原理及其在单页应用中的重要性,涵盖前端路由概念、基本原理、常见实现方式(Hash路由和History路由)、优点及挑战,并通过实际案例分析,帮助开发者更好地理解和应用这一关键技术,提升用户体验。
    435 1