mouseover和mousemove

使用 JavaScript 中的 mouseover 和 mousemove 事件

当我们开发网站时，有时需要让页面元素与用户的鼠标动作产生交互。JavaScript 提供了两个事件来监视鼠标的运动：mouseover（鼠标移入）和 mousemove（鼠标移动）。

mouseover 事件

mouseover 事件在用户将鼠标光标移动到页面上的某个元素时触发。通常我们会将其与 mouseout 事件搭配使用，相当于实现一个响应鼠标移入和移出的效果。

下面是一个简单的 mouseover 示例，当鼠标光标移入按钮上时，按钮的文本颜色会变为红色，移出时则变回黑色：

const btn = document.querySelector('button');

btn.addEventListener('mouseover', function() {
  this.style.color = 'red';
});

btn.addEventListener('mouseout', function() {
  this.style.color = 'black';
});

这里使用了 addEventListener 方法来注册事件监听器。当用户将鼠标移入或移出按钮时，会触发对应的事件处理函数，从而改变按钮的样式。

mousemove 事件

另一个用户鼠标交互的事件是 mousemove，它会在鼠标光标移动到页面上的某个元素上时触发。有了 mousemove，我们可以在页面上实现一些有趣的效果，比如鼠标跟随、滑动效果等。

下面是一个简单的示例，当用户将鼠标移动到页面的任何位置时，会在页面上创建一些彩色斑点：

document.addEventListener('mousemove', function(event) {
  const dot = document.createElement('div');
  dot.classList.add('dot');
  dot.style.left = event.clientX + 'px';
  dot.style.top = event.clientY + 'px';
  document.body.appendChild(dot);
});

这里使用了 addEventListener 来监听 mousemove 事件。当事件触发时，会创建一个 div 元素，并将其添加到页面上。元素会被设置为具有 dot 类名，和一些样式，使得它变成一个小圆点。元素的位置取决于事件对象中的 clientX 和 clientY 属性，即鼠标光标的横坐标和纵坐标。

在 CSS 中，我们还需要设置 .dot 类的一些样式，例如：

.dot {
  width: 10px;
  height: 10px;
  border-radius: 5px;
  background-color: #ff00ff;
  position: absolute;
  pointer-events: none;
}

这些样式会让小圆点在页面上看起来更好看。

小结

mouseover 和 mousemove 事件都是用于实现用户鼠标交互的常用事件。前者通常用于实现一些简单的按钮 hover 效果，后者则是用于实现更为复杂的交互效果，如鼠标跟随、滑动效果等。当我们需要响应用户鼠标动作时，这两个事件都是我们的好帮手。