JavaScript焦点、鼠标和滚轮事件详解及其应用实例

60 浏览量更新于2024-09-02 收藏 66KB PDF 举报

本文档深入探讨了JavaScript中的三种关键事件处理：焦点事件、鼠标事件和滚轮事件。首先，我们来了解焦点事件，这是与Web页面元素的活跃状态密切相关的。焦点事件主要包括`blur`（元素失去焦点）、`DOMFocusIn`（旧版焦点进入，推荐使用`focusin`）、`DOMFocusOut`（旧版焦点离开，推荐使用`focusout`）、`focus`（元素获得焦点）以及它们的对应冒泡和非冒泡行为。例如，通过监听`window.onfocus`和`window.onblur`事件，开发者可以跟踪页面的焦点变化。然后是鼠标事件，这是用户与页面交互的重要部分。在DOM3级事件规范中，定义了九个鼠标操作相关的事件，包括`click`、`dblclick`、`mousedown`、`mouseup`、`mousemove`、`mouseenter`、`mouseleave`、`mouseover`和`mouseout`。`mousedown`和`mouseup`用于检测鼠标的按下和释放，而`mousemove`则在鼠标移动时触发。`mouseenter`和`mouseleave`用于在光标进入或离开元素及其后代元素时通知，`mouseover`和`mouseout`则是更广义的进入和离开事件，分别在光标进入和离开任何元素时触发。滚轮事件（scroll事件）通常用于处理用户的滚动动作，例如网页内容的滚动。虽然文档未提供具体的滚轮事件代码示例，但其基本概念是当用户滚动鼠标滚轮时，浏览器会触发`onscroll`事件，开发者可以通过监听这个事件来响应用户的滚动行为。总结来说，这篇教程提供了丰富的JavaScript事件处理实践案例，对于理解和使用焦点事件、鼠标事件和滚轮事件进行网页交互具有很高的实用价值。通过学习这些事件，开发者可以提升用户体验，增强网站的交互性和动态性。

JavaScript焦点事件、鼠标事件和滚轮事件使用详解焦点事件、鼠标事件和滚轮事件使用详解

主要介绍了JavaScript焦点事件、鼠标事件和滚轮事件使用详解,通过示例给大家讲解的非常细致，有需要的小

伙伴可以参考下。

焦点事件焦点事件

一般利用这些事件与document.hasFocus()方法和document.activeElement属性配合。主要有：

blur：元素失去焦点，不会冒泡；

DOMFocusIn：同HTML事件focus，于DOM3遭废弃，选用focusin；

DOMFocusOut：同HTML事件blur，于DOM3遭废弃，选用focusout；

focus：元素获得焦点，不回冒泡；

focusin：获得焦点，与HTML事件focus等价，但会冒泡；

focusout：失去焦点，与HTML事件blur等价；

如：

window.onfocus = function () {

console.log('focus'); //focus

console.log(document.hasFocus()); //True

}

window.onblur = function () {

console.log('blur'); //blur

console.log(document.hasFocus()); //False

}

当焦点从页面中的一个元素转移到另一个元素会触发下面的事件：

focusout --> focusin --> blur --> DOMFocusOut --> focus --> DOMFocusIn

鼠标事件鼠标事件

DOM3级事件中定义了9个鼠标事件：

click

dblclick

mousedown：用户按下任意鼠标按钮时触发，不能通过键盘触发这个事件；

mouseup：用户释放鼠标按钮时触发，不能通过键盘触发这个事件；

mousemove：不能通过键盘触发这个事件；

mouseenter：不冒泡，且光标移动到后代元素上不会触发；

mouseleave：不冒泡，且光标移动到后代元素上不会触发；

mouseover：光标移动到后代元素上会触发；

mouseout：光标移动到后代元素上会触发；

举例如下：

div.onmouseover = function() {

console.log('mouseover'); //在子元素上会触发

}

div.onmouseout = function() {

console.log('mouseout'); //在子元素上会触发

}

div.onmouseenter = function() {

console.log('mouseenter'); //在子元素上不会触发

}

div.onmouseleave = function() {

console.log('mouseleave'); //在子元素上不会触发

}

只有在同一个元素上相继除法mousedown和mouseup事件，才会触发click事件；只有触发两次click事件，才会触发依次

dblclick事件。

顺序如下：

mousedown --> mouseup --> click --> mousedown --> mouseup --> click --> dblclick

IE8之前的版本中有一个bug，在双击事件中，会跳过第二个mousedown和click事件

滚轮事件滚轮事件

客户区坐标位置clientX和clientY属性

如：

window.onmousemove = function() {

下载后可阅读完整内容，剩余3页未读，立即下载

weixin_38659527

粉丝: 6
资源: 871

JavaScript焦点、鼠标和滚轮事件详解及其应用实例

支持鼠标滚轮图片自适应的焦点图代码

JavaScript事件类型中焦点、鼠标和滚轮事件详解

JavaScript焦点、鼠标与滚轮事件详解

JavaScript焦点、鼠标与滚轮事件详解及注意事项

JavaScript焦点、鼠标与滚轮事件详解：DOM事件与实例应用

JavaScript事件类型中UI事件详解

javascript 的事件

js移动端事件基础及常用事件库详解

详解swipe使用及竖屏页面滚动方法

滚轮菜单-wheelmenu

最新资源