本文目标：了解在JavaScript中使用鼠标事件的基本知识。
当监听鼠标事件时，会触发一些事件，我们可以与之交互：
- mousedown 按下鼠标按钮触发
- mouseup 鼠标按钮被释放
- click 点击事件
- dblclick 双击事件
- mousemove 当鼠标移动到元素上时，鼠标移动
- mouseover 当鼠标移动到一个元素或它的一个子元素上时，鼠标悬停。
- mouseenter 当鼠标移动到一个元素上时，鼠标进入。类似于mouseover但不冒泡。
- mouseout 当鼠标移出元素时，以及当鼠标进入子元素时。
- mouseleave 当鼠标移出一个元素时，mouseleave。类似于mouseout但不冒泡。
- contextmenu 快捷菜单当快捷菜单打开时，例如用鼠标右键点击
事件重叠。当您跟踪一个单击事件时，就像跟踪一个mousedown跟着一个mouseup事件一样。在dblclick的情况下，还会触发两次click。
mousedown、mousemove和mouseup可以结合使用来跟踪拖放事件。
小心使用mousemove，因为它在鼠标移动时多次触发。我们需要应用节流，这是我们在分析滚动时会详细讨论的东西。
在事件处理程序中，我们可以访问很多事件属性。
例如，在鼠标事件中，我们可以通过检查事件对象的button属性来检查哪个鼠标按钮被按下:
const link = document.getElementById('my-link')
link.addEventListener('mousedown', event => {
// mouse button pressed
console.log(event.button) //0=left, 2=right
})下面是所有我们可以使用的属性：
- altKey 如果事件触发时按下alt键，则altKey为真。
- button 如果有按钮，则为鼠标事件触发时按下的按钮数目(通常为0 =主按钮，1 =中按钮，2 =右按钮)。处理由单击按钮引起的事件(例如单击)。
- buttons 按钮(如果有)，表示在任何鼠标事件上按下的按钮的数字。
- clientX / clientY 无论是否滚动，鼠标指针相对于浏览器窗口的x和y坐标。
- ctrlKey 如果在事件触发时按下ctrl键，则ctrlKey为真。
- metaKey 如果事件触发时按下了meta键，则metaKey true。
- movementX / movementY movementX / movementY鼠标指针相对于最后一个mousemove事件的位置的x和y坐标。
- region Canvas API中使用的区域。
- relatedTarget relatedTarget事件的辅助目标，例如在移动时。
- screenX / screenY 屏幕坐标中鼠标指针的x和y坐标。
- shiftKey 如果在触发事件时按下shift键，则shiftKey为true。