📚文章目录
今天分享一下我遇到的一个面试题,是关于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 完成过渡后触发。 其他
还有包括(比较陌生的事件)多媒体事件、剪贴板事件、打印事件、拖动事件和一些其他事件
详情请点击下方链接查阅