这是我参与11月更文挑战的第1天，活动详情查看： 2021最后一次更文挑战
今天我们来学习 JavaScript 中的基本鼠标事件及其属性，包括9个鼠标事件和一些有用的事件对象的属性。
Mouse 鼠标事件介绍
当我们使用鼠标与页面上的元素进行交互时就会触发鼠标事件，DOM 3级定义了九个鼠标事件。
mousedown
,
mouseup
和
click
当我们点击一个元素时，会按照下面顺序触发至少3个鼠标事件
mousedown
会触发
mouseup
会触发。
mousedown
和一个
mouseup
，就会触发
click
事件
如果在元素上按下鼠标并将鼠标移开该元素，然后松开鼠标，那么
mousedown
事件会触发。
同样，如果按下鼠标，然后将鼠标移动到元素上，然后松开鼠标，则元素将触发唯一的
mouseup
事件。
在这两种情况下，
click
事件都不会触发。
dblclick
在实际项目中，很少会用到
dblclick
事件，
dblclick
事件会在双击一个元素时触发。
触发
dblclick
事件需要两个点击事件，将按以下顺序触发事件：
mousedown
mouseup
click
mousedown
mouseup
click
dblclick
从上面的顺序可以看到，
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：按下第五个按钮，通常是浏览器前进按钮。
看下面的例子：
<!DOCTYPE html>
<title>JS Mouse事件例子</title>
</head>
<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。
Meta 键是 Windows 键盘上的 Windows 键或者 Mac 键盘上的 Command 键。
要检测这些修饰键是否被按下，可以使用鼠标事件处理程序的事件对象。
事件对象有四个布尔属性，如果指定键被按下，那么属性就会为 true，如果键没有被按下，则设置为 false。
看下面的例子：
<!DOCTYPE html>
<title>JS 修饰键例子</title>
</head>
<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属性返回鼠标位置相对于整个屏幕的屏幕坐标。
clientX 和 clientY 属性返回浏览器中鼠标事件发生处的水平和垂直坐标：
看下面的例子：
<!DOCTYPE html>
<title>JS 获取屏幕坐标</title>
<style>
#track {
background-color: goldenrod;
height: 200px;
width: 400px;
</style>
</head>
<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 属性返回发生鼠标事件在浏览器中的水平和垂直坐标。
一起学习更多前端知识，微信搜索【小帅的编程笔记】，每天更新
