js mouse鼠标事件|极客笔记

js mouse鼠标事件

1. 介绍

鼠标事件是JavaScript中常用的一种交互方式，它允许我们捕捉和处理用户在网页上的鼠标操作。本文将详细介绍JavaScript中常见的鼠标事件，并提供实例代码进行演示。

2. 鼠标事件类型

在JavaScript中，常见的鼠标事件类型有以下几种：

click：当用户点击鼠标按钮时触发。
dblclick：当用户双击鼠标按钮时触发。
mousedown：当用户按下鼠标按钮时触发。
mouseup：当用户释放鼠标按钮时触发。
mousemove：当鼠标在元素上移动时触发。
mouseover：当鼠标移动到元素上方时触发。
mouseout：当鼠标移出元素时触发。

3. 事件监听

要使用鼠标事件，我们首先需要将事件监听器附加到需要进行监听的元素上。可以通过以下两种方式来实现：

3.1 在HTML标签中添加事件属性

可以直接在HTML标签中添加相应的事件属性，将其值设为需要执行的JavaScript代码块。

例如，以下代码将在按钮上添加一个点击事件监听器：

<button onclick="alert('按钮被点击了！')">点击我</button>

3.2 使用JavaScript添加事件监听器

我们也可以使用JavaScript通过DOM API动态地添加事件监听器。主要有以下两种方法：

3.2.1 `element.addEventListener(event, function, useCapture)`

此方法允许我们将事件监听器添加到指定元素，其中：

event：要监听的事件类型。
function：当事件触发时要执行的函数。
useCapture：一个可选的布尔值，指示事件是否在捕获阶段进行处理，默认为false（在冒泡阶段处理事件）。

例如，以下代码将在页面加载完成时给按钮添加点击事件监听器：

<button id="myButton">点击我</button>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        var button = document.getElementById('myButton');
        button.addEventListener('click', function() {
            alert('按钮被点击了！');
        });
    });
</script>

3.2.2 `element.onclick = function`

此方法是一种简便的方式来添加事件监听器，其功能与element.addEventListener('click', function)相同。

例如，以下代码将在按钮上添加点击事件监听器：

<button id="myButton">点击我</button>

<script>
    document.getElementById('myButton').onclick = function() {
        alert('按钮被点击了！');
    };
</script>

4. 鼠标事件处理器函数

在鼠标事件监听器中，我们需要定义处理器函数来执行具体的操作。处理器函数将自动接收一个事件对象参数，可以通过该事件对象获取关于事件的信息。

以下是常用的鼠标事件处理器函数及其参数：

4.1 `click`事件处理器函数

当用户单击鼠标时，click事件被触发，其处理器函数接收一个MouseEvent对象作为参数。

示例代码如下：

function handleClick(event) {
    console.log(event.clientX, event.clientY);
}

document.addEventListener('click', handleClick);

在上述示例中，当用户单击鼠标时，控制台将会输出鼠标相对于浏览器窗口左上角的X和Y坐标。

4.2 `mousedown`和`mouseup`事件处理器函数

mousedown事件在用户按下鼠标按钮时触发，mouseup事件在用户释放鼠标按钮时触发。它们的处理器函数同样接收一个MouseEvent对象作为参数。

示例代码如下：

function handleMouseDown(event) {
    console.log('鼠标按钮被按下');
}

function handleMouseUp(event) {
    console.log('鼠标按钮被释放');
}

document.addEventListener('mousedown', handleMouseDown);
document.addEventListener('mouseup', handleMouseUp);

在上述示例中，当用户按下或释放鼠标按钮时，将会在控制台输出相应信息。

4.3 `mousemove`事件处理器函数

当鼠标在元素上移动时，mousemove事件被触发，其处理器函数接收一个MouseEvent对象作为参数。

示例代码如下：

function handleMouseMove(event) {
    var x = event.clientX;
    var y = event.clientY;

    document.getElementById('coordinates').innerHTML = 'X坐标：' + x + '，Y坐标：' + y;
}

document.addEventListener('mousemove', handleMouseMove);

在上述示例中，当鼠标在页面上移动时，元素id为coordinates的元素将会显示鼠标相对于浏览器窗口左上角的X和Y坐标。