JS DOM编程笔记 - 详解鼠标事件（十六）

今天我们来学习 JavaScript 中的基本鼠标事件及其属性，包括9个鼠标事件和一些有用的事件对象的属性。

Mouse 鼠标事件介绍

当我们使用鼠标与页面上的元素进行交互时就会触发鼠标事件，DOM 3级定义了九个鼠标事件。

`mousedown`, `mouseup` 和 `click`

当我们点击一个元素时，会按照下面顺序触发至少3个鼠标事件

当我们在元素上按下鼠标时，mousedown 会触发
当我们在元素上松开鼠标时，mouseup 会触发。
当元素触发了一个mousedown 和一个mouseup ，就会触发click事件

javascript-mouse-event-click-event

如果在元素上按下鼠标并将鼠标移开该元素，然后松开鼠标，那么mousedown 事件会触发。

同样，如果按下鼠标，然后将鼠标移动到元素上，然后松开鼠标，则元素将触发唯一的 mouseup 事件。

在这两种情况下，click事件都不会触发。

`dblclick`

在实际项目中，很少会用到 dblclick 事件，dblclick 事件会在双击一个元素时触发。

触发 dblclick 事件需要两个点击事件，将按以下顺序触发事件：

mousedown
mouseup
click
mousedown
mouseup
click
dblclick

javascript-mouse-event-dblclick-event

从上面的顺序可以看到，click 事件总是在 dblclick 事件之前触发。

`mousemove`

当我们在元素周围移动鼠标光标时，mousemove 事件会重复触发。哪怕只移动一个像素，mousemove 事件仍然会触发。它会导致页面变慢，因此，仅在需要时才去监听 mousemove 事件，并在不再使用时立即删除该事件，如下：

element.onmousemove = mouseMoveEventHandler;
// ...
//  不再使用, 清除事件处理程序
element.onmousemove = null;

`mouseover` / `mouseout`

mouseover 在鼠标光标位于元素外然后移动到元素内时触发。

mouseout 在鼠标光标悬停在一个元素上然后移动另一个元素时触发。

`mouseenter` / `mouseleave`

mouseenter 在鼠标光标位于元素外部时触发，然后移动到元素内部。

mouseleave 在鼠标光标悬停在元素上时触发，然后移动到元素的外部。

mouseenter 和 mouseleave 都不会冒泡，也不会在鼠标光标移动到后代元素上时触发。

监听鼠标事件

要监听鼠标事件：

首先，使用 querySelector() 或 getElementById()方法选择元素。
然后，使用addEventListener() 方法来绑定鼠标事件。

比如为下面的按钮来绑定事件:

<button id="btn">点我点我!</button>

<script>
  let btn = document.querySelector('#btn');

  btn.addEventListener('click',(event) => {
      
      
    console.log('点击了');
  });
</script>

同样也可以使用DOM属性绑定事件处理程序

let btn = document.querySelector('#btn');

btn.onclick = (event) => {
    
    
  console.log('点击了');
};

在一些老项目中，也会直接在HTML属性上绑定事件处理程序

<button id="btn" onclick="console.log('点击了')">点我点我!</button>

最佳实践是我们要使用addEventListener()方法来绑定事件

检测鼠标按钮

鼠标事件处理程序的事件对象有一个 button 属性，它表示在鼠标上按下哪个鼠标按钮来触发事件。

鼠标按钮由一个数字表示：

0：按下鼠标左键。
1：按下中键或滚轮键。
2：按下右键。
3：按下第四个按钮，通常是浏览器返回按钮。
4：按下第五个按钮，通常是浏览器前进按钮。

javascript-mouse-event-mouse-buttons

看下面的例子：

<!DOCTYPE html>
<html>
<head>
  <title>JS Mouse事件例子</title>
</head>
<body>
  <button id="btn">用任何鼠标按钮单击我，左、中、右键。</button>
  <p id="message"></p>
  <script>
    let btn = document.querySelector('#btn');

    // 点击鼠标右键时禁用上下文菜单
    btn.addEventListener('contextmenu', (e) => {
      
      
      e.preventDefault();
    });

    // 展示鼠标事件的信息
    btn.addEventListener('mouseup', (e) => {
      
      
      let msg = document.querySelector('#message');
      switch (e.button) {
      
      
        case 0:
          msg.textContent = '左键点击.';
          break;
        case 1:
          msg.textContent = '中键点击.';
          break;
        case 2:
          msg.textContent = '右键点击.';
          break;
        default:
          msg.textContent = `未找到button代码: ${ 
        event.button}`;
      }
    });
  </script>
</body>
</html>

修饰键

当点击一个元素时，我们可以按下一个或多个修饰键：Shift、Ctrl、Alt 或 Meta。

javascript-mouse-event-modifier-keys

Meta 键是 Windows 键盘上的 Windows 键或者 Mac 键盘上的Command 键。

要检测这些修饰键是否被按下，可以使用鼠标事件处理程序的事件对象。

事件对象有四个布尔属性，如果指定键被按下，那么属性就会为 true，如果键没有被按下，则设置为 false。

看下面的例子：

<!DOCTYPE html>
<html>
<head>
  <title>JS 修饰键例子</title>
</head>
<body>
  <button id="btnKeys">按住 Alt、Shift、Ctrl 键点击我</button>
  <p id="messageKeys"></p>

  <script>
    let btnKeys = document.querySelector('#btnKeys');

    btnKeys.addEventListener('click', (e) => {
      
      
      let keys = [];

      if (e.shiftKey) keys.push('shift');
      if (e.ctrlKey) keys.push('ctrl');
      if (e.altKey) keys.push('alt');
      if (e.metaKey) keys.push('meta');

      let msg = document.querySelector('#messageKeys');
      msg.textContent = `修饰键: ${ 
        keys.join('+')}`;
    });
  </script>
</body>
</html>

获取屏幕坐标

鼠标事件的事件对象的screenX和screenY属性返回鼠标位置相对于整个屏幕的屏幕坐标。

javascript-mouse-event-screenX-screenY

clientX 和clientY 属性返回浏览器中鼠标事件发生处的水平和垂直坐标：

javascript-mouse-event-clientX-clientY

看下面的例子：

<!DOCTYPE html>
<html>
<head>
  <title>JS 获取屏幕坐标</title>
  <style>
    #track {
      
      
      background-color: goldenrod;
      height: 200px;
      width: 400px;
    }
  </style>
</head>
<body>
  <p>移动鼠标查看其位置</p>
  <div id="track"></div>
  <p id="log"></p>

  <script>
    let track = document.querySelector('#track');
    track.addEventListener('mousemove', (e) => {
      
      
      let log = document.querySelector('#log');
      log.innerText = `
        Screen X/Y: (${ 
        e.screenX}, ${ 
        e.screenY})
        Client X/Y: (${ 
        e.clientX}, ${ 
        e.clientY})`
	    });
  </script>
</body>
</html>

总结

DOM 3级定义了九个鼠标事件。
使用 addEventListener() 方法来监听鼠标事件。
event.button 表示按下哪个鼠标按钮来触发鼠标事件。
修饰键：alt、shift、ctrl 和 meta (Mac) 可以通过事件对象的属性获得。
screenX 和 screenY 属性返回鼠标指针在屏幕坐标中的水平和垂直坐标。
事件对象的 clientX和 clientY 属性返回发生鼠标事件在浏览器中的水平和垂直坐标。

一起学习更多前端知识，微信搜索【小帅的编程笔记】，每天更新