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

    目录
    相关文章
    |
    2月前
    |
    JavaScript 前端开发 程序员
    前端原生Js批量修改页面元素属性的2个方法
    原生 Js 的 getElementsByClassName 和 querySelectorAll 都能获取批量的页面元素,但是它们之间有些细微的差别,稍不注意,就很容易弄错!
    |
    2月前
    |
    JavaScript 前端开发 Java
    springboot解决js前端跨域问题,javascript跨域问题解决
    本文介绍了如何在Spring Boot项目中编写Filter过滤器以处理跨域问题,并通过一个示例展示了使用JavaScript进行跨域请求的方法。首先,在Spring Boot应用中添加一个实现了`Filter`接口的类,设置响应头允许所有来源的跨域请求。接着,通过一个简单的HTML页面和jQuery发送AJAX请求到指定URL,验证跨域请求是否成功。文中还提供了请求成功的响应数据样例及请求效果截图。
    springboot解决js前端跨域问题,javascript跨域问题解决
    |
    2月前
    |
    缓存 JavaScript 前端开发
    JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用
    本文深入讲解了 JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用。
    70 5
    |
    2月前
    |
    缓存 前端开发 JavaScript
    JavaScript前端路由的实现原理及其在单页应用中的重要性,涵盖前端路由概念、基本原理、常见实现方式
    本文深入解析了JavaScript前端路由的实现原理及其在单页应用中的重要性,涵盖前端路由概念、基本原理、常见实现方式(Hash路由和History路由)、优点及挑战,并通过实际案例分析,帮助开发者更好地理解和应用这一关键技术,提升用户体验。
    106 1
    |
    2月前
    |
    JSON 前端开发 JavaScript
    聊聊 Go 语言中的 JSON 序列化与 js 前端交互类型失真问题
    在Web开发中,后端与前端的数据交换常使用JSON格式,但JavaScript的数字类型仅能安全处理-2^53到2^53间的整数,超出此范围会导致精度丢失。本文通过Go语言的`encoding/json`包,介绍如何通过将大整数以字符串形式序列化和反序列化,有效解决这一问题,确保前后端数据交换的准确性。
    62 4
    |
    2月前
    |
    资源调度 前端开发 JavaScript
    vite3+vue3 实现前端部署加密混淆 javascript-obfuscator
    【11月更文挑战第10天】本文介绍了在 Vite 3 + Vue 3 项目中使用 `javascript-obfuscator` 实现前端代码加密混淆的详细步骤,包括安装依赖、创建混淆脚本、修改 `package.json` 脚本命令、构建项目并执行混淆,以及在 HTML 文件中引用混淆后的文件。通过这些步骤,可以有效提高代码的安全性。
    207 2
    |
    2月前
    |
    设计模式 前端开发 JavaScript
    揭秘!前端大牛们如何巧妙利用JavaScript,打造智能交互体验!
    【10月更文挑战第30天】前端开发领域充满了无限可能与创意,JavaScript作为核心语言,凭借强大的功能和灵活性,成为打造智能交互体验的重要工具。本文介绍前端大牛如何利用JavaScript实现平滑滚动、复杂动画、实时数据更新和智能表单验证等效果,展示了JavaScript的多样性和强大能力。
    76 4
    |
    2月前
    |
    机器学习/深度学习 自然语言处理 前端开发
    前端神经网络入门:Brain.js - 详细介绍和对比不同的实现 - CNN、RNN、DNN、FFNN -无需准备环境打开浏览器即可测试运行-支持WebGPU加速
    本文介绍了如何使用 JavaScript 神经网络库 **Brain.js** 实现不同类型的神经网络,包括前馈神经网络(FFNN)、深度神经网络(DNN)和循环神经网络(RNN)。通过简单的示例和代码,帮助前端开发者快速入门并理解神经网络的基本概念。文章还对比了各类神经网络的特点和适用场景,并简要介绍了卷积神经网络(CNN)的替代方案。
    324 1
    |
    2月前
    |
    JavaScript 前端开发 开发者
    前端框架对比:Vue.js与Angular的优劣分析与选择建议
    【10月更文挑战第27天】在前端开发领域,Vue.js和Angular是两个备受瞩目的框架。本文对比了两者的优劣,Vue.js以轻量级和易上手著称,适合快速开发小型到中型项目;Angular则由Google支持,功能全面,适合大型企业级应用。选择时需考虑项目需求、团队熟悉度和长期维护等因素。
    76 1
    |
    2月前
    |
    JavaScript 前端开发 API
    前端框架对比:Vue.js与Angular的优劣分析与选择建议
    【10月更文挑战第26天】前端技术的飞速发展让开发者在构建用户界面时有了更多选择。本文对比了Vue.js和Angular两大框架,介绍了它们的特点和优劣,并给出了在实际项目中如何选择的建议。Vue.js轻量级、易上手,适合小型项目;Angular结构化、功能强大,适合大型项目。
    78 1

    热门文章

    最新文章