摘要：在本教程中，您将学习有关 JavaScript 中的基本鼠标事件及其属性。

JavaScript 鼠标事件简介当您使用鼠标与页面上的元素进行交互时，会触发鼠标事件。DOM Level 3 事件定义了九种鼠标事件。

mousedown、mouseup 和 click 事件当您单击某个元素时，会按以下顺序触发至少三个鼠标事件。

当您在元素上按下鼠标按钮时，会触发mousedown事件。当您在元素上释放鼠标按钮时，会触发mouseup事件。当在元素上检测到一个mousedown事件和一个mouseup事件时，会触发click事件。如果您在元素上按下鼠标按钮，将鼠标光标移出元素，然后释放鼠标按钮。只有mousedown事件会在元素上触发。

同样，如果您按下鼠标按钮，将鼠标移动到元素上，然后释放鼠标按钮，只有mouseup事件会在元素上触发。

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

dblclick 事件在实践中，您很少使用dblclick事件。当您双击某个元素时，会触发dblclick事件。

触发dblclick事件需要两次单击事件。dblclick事件有四个不同的事件，按以下顺序触发：

mousedown mouseup click mousedown mouseup click dblclick图片显示click事件始终在dblclick事件之前发生。

如果您在同一个元素上注册了click和dblclick事件处理程序，您将无法知道用户是单击了元素还是双击了元素。

mousemove每当您在元素周围移动鼠标光标时，mousemove事件就会重复触发。当鼠标在元素周围移动时，即使只是移动一个像素，mousemove事件也会每秒触发很多次。如果事件处理程序函数很复杂，这可能会导致性能问题。

为了避免性能问题，最好只在需要时添加mousemove事件处理程序，并在不再需要时立即将其删除，例如：

element.onmousemove = mouseMoveEventHandler;

// ...

// later, no longer use

element.onmousemove = null;Code language: JavaScript (javascript)mouseover / mouseout当鼠标光标在元素外部，然后移动到元素边界内时，会触发mouseover事件。

当鼠标光标在元素上，然后移动到另一个元素时，会触发mouseout事件。

mouseenter / mouseleave当鼠标光标在元素外部，然后移动到元素边界内时，会触发mouseenter事件。

当鼠标光标在元素上，然后移动到元素边界外时，会触发mouseleave事件。

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

注册鼠标事件处理程序要注册鼠标事件，您可以使用以下步骤：

首先，使用querySelector()或getElementById()方法选择元素。然后，使用addEventListener()方法注册鼠标事件。例如，假设您有以下按钮：

Click Me!Code language: HTML, XML (xml)要注册鼠标单击事件处理程序，请使用以下代码：

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

btn.addEventListener('click',(event) => {

console.log('clicked');

});Code language: JavaScript (javascript)或者，您可以将鼠标事件处理程序分配给元素的属性：

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

btn.onclick = (event) => {

console.log('clicked');

};Code language: JavaScript (javascript)在传统系统中，您可能会发现事件处理程序是在元素的 HTML 属性中分配的：

Click Me!Code language: HTML, XML (xml)最好使用addEventListener()来注册鼠标事件处理程序。

检测鼠标按钮传递给鼠标事件处理程序的event对象具有一个名为button的属性，该属性指示哪个鼠标按钮在鼠标上按下以触发该事件。

鼠标按钮由数字表示：

0：按下主鼠标按钮，通常是左按钮。1：按下辅助按钮，通常是中间按钮或滚轮按钮。2：按下辅助按钮，通常是右按钮。3：按下第四个按钮，通常是“浏览器后退”按钮。4：按下第五个按钮，通常是“浏览器前进”按钮。请参见以下示例：

Click me with any mouse button: left, right, middle, ...

Code language: HTML, XML (xml)在此示例中，当您使用鼠标单击按钮（左键单击、右键单击和中键单击）时，它会在