单击事件教程
最后修改于 2023 年 8 月 24 日
单击事件教程 如何为单击事件注册事件处理程序。
单击事件
当用户单击某个元素时，会触发单击事件。它按顺序在 `mousedown` 和 `mouseup` 事件之后触发。
必须使用 addEventListener 为事件注册事件处理程序。
单击事件示例
以下示例为单击事件注册了一个事件处理程序。
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Click event</title>
<link rel="stylesheet" href="main.css">
</head>
<body>
<div id="output"></div>
<script src="main.js"></script>
</body>
</html>
在示例中，我们为 `body` 元素注册了一个单击事件处理程序。我们在输出 `div` 中显示鼠标指针的坐标。
main.css
body {
height: 100vh;
padding: 6px;
border: 1px solid steelblue;
}
这是样式。请注意，为了使示例正常工作，我们必须为 `body` 设置一个高度。
main.js
const el = document.body;
const output = document.getElementById('output');
console.log(el);
el.addEventListener('click', e => {
output.innerHTML = `x: ${e.x} y: ${e.y}`;
console.log(e.x);
});
在代码中，我们为 `body` 元素注册了一个单击事件处理程序。当用户单击文档的 `body` 时，将输出鼠标指针的 x 和 y 坐标。
output.innerHTML = `x: ${e.x} y: ${e.y}`;
为单击事件生成了一个事件对象。我们可以从事件对象中获取有关事件的一些信息。在我们的例子中，我们获取了 x 和 y 坐标。
在本文中，我们展示了如何处理单击事件。