【JavaScript 漫游】【024】鼠标事件简记

最新推荐文章于 2024-08-14 17:15:24 发布

皮皮伍同学

最新推荐文章于 2024-08-14 17:15:24 发布

阅读量1.3k

点赞数 13

CC 4.0 BY-SA版权

分类专栏： JavaScript 漫游文章标签： javascript 前端

本文链接：https://blog.csdn.net/CYW2014_HUST/article/details/136280444

本文详细介绍了鼠标事件如click、dblclick等在JavaScript中的使用，包括它们在DOM操作中的触发条件，以及MouseEvent和WheelEvent接口的特性、构造函数和实例属性。特别关注了如何避免性能问题和处理鼠标移动事件的策略。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

绿林小河

鼠标事件的种类

鼠标事件指与鼠标相关的事件，继承了 MouseEvent 接口。具体的事件主要有以下一些。

click：按下鼠标（通常是按下主按钮）时触发
dblclick：在同一个元素上双击鼠标时触发
mousedown：按下鼠标键时触发
mouseup：释放按下的鼠标键时触发
mousemove：当鼠标在一个节点内部移动时触发。当鼠标持续移动时，该事件会连续触发。为了避免性能问题，建议对该事件的监听函数做一些限定，比如限定一段时间内只能运行一次
mouseenter：鼠标进入一个节点时触发，进入子节点不会触发这个事件
mouseover：鼠标进入一个节点时触发，进入子节点会再一次触发这个事件
mouseout：鼠标离开一个节点时触发，离开父节点也会触发这个事件
mouseleave：鼠标离开一个节点时触发，离开父节点不会触发这个事件
contextmenu：按下鼠标右键时（上下文菜单出现前）触发，或者按下“上下文菜单键”时触发
wheel：滚动鼠标的滚轮时触发，该事件继承的是WheelEvent接口

/* HTML 代码如下
 <ul>
   <li>item 1</li>
   <li>item 2</li>
  <li>item 3</li>
 </ul>
*/

var ul = document.querySelector('ul');

// 先进入 ul 节点，然后在节点内部移动，不会触发 mouseleave 事件
// 只有离开 ul 节点时，触发一次 mouseleave
// event.target 是 ul 节点
ul.addEventListener('mouseleave', function (event) {
   
   
  event.target.style.color =