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

    目录
    相关文章
    |
    14天前
    |
    前端开发 JavaScript 网络协议
    前端最常见的JS面试题大全
    【4月更文挑战第3天】前端最常见的JS面试题大全
    33 5
    |
    16天前
    |
    JavaScript
    事件触发、事件捕获与事件冒泡(js的问题)
    事件触发、事件捕获与事件冒泡(js的问题)
    10 0
    |
    3天前
    |
    JavaScript 前端开发 测试技术
    「一劳永逸」送你21道高频JavaScript手写面试题(上)
    「一劳永逸」送你21道高频JavaScript手写面试题
    28 0
    |
    18天前
    |
    JavaScript 前端开发 流计算
    JS:oninput和onchange事件的区别
    JS:oninput和onchange事件的区别
    18 1
    |
    28天前
    |
    JavaScript 前端开发
    js开发:请解释事件冒泡和事件捕获。
    JavaScript中的事件处理有冒泡和捕获两种方式。事件冒泡是从子元素向上级元素依次触发事件,而事件捕获则从最外层元素向内层元素传递。`addEventListener`的第三个参数可设定事件模式,`false`或不设为冒泡,`true`为捕获。例如: ```javascript element.addEventListener(&#39;click&#39;, console.log, false); // 冒泡 element.addEventListener(&#39;click&#39;, console.log, true); // 捕获 ```
    15 0
    |
    1月前
    |
    JSON JavaScript 前端开发
    Node.js:前端开发的后端利器
    Node.js作为一种运行在服务器端的JavaScript环境,为前端开发者打开了后端开发的大门。它以其高效的事件驱动、非阻塞I/O模型以及强大的npm生态,使得前端开发者能够轻松构建服务器端应用,实现前后端的全栈开发。本文将探讨Node.js的核心优势、应用场景以及在前端开发中的重要性。
    |
    1月前
    |
    前端开发 JavaScript 数据可视化
    JavaScript:前端开发的灵魂与动力
    JavaScript(JS)作为前端开发的核心语言,赋予了网页交互性和动态性。通过JS,开发者可以实现复杂的用户交互、数据操作以及动画效果,为用户带来丰富而流畅的网页体验。本文将介绍JS的基本概念、应用场景以及在前端开发中的重要性。
    |
    1月前
    |
    存储 缓存 监控
    2024年春招小红书前端实习面试题分享
    春招已经拉开帷幕啦! 春招的拉开,意味着新一轮的求职大战已经打响,希望每位求职者都能充分准备,以最佳的状态迎接挑战,找到心仪的工作,开启职业生涯的新篇章。祝愿每位求职者都能收获满满,前程似锦!
    71 3
    |
    1月前
    |
    前端开发 数据可视化 安全
    2024金三银四必看前端面试题!简答版精品!
    2024金三银四必看前端面试题!2w字精品!简答版 金三银四黄金期来了 想要跳槽的小伙伴快来看啊
    82 3
    |
    1月前
    |
    JavaScript 前端开发
    JS页面加载事件
    JS页面加载事件