JavaScript 提供了许多事件监听功能，使你可以对浏览器中的元素进行操作。下面将演示如何在 HTML 元素上添加一些常见的事件监听器，如点击（click）、鼠标移动（mousemove）和键盘按键（keydown）。
1. 点击事件（Click Event）
html<!DOCTYPE html> <html> <body> <p id="demo">点击这里！</p> <script> // 获取元素 var p = document.getElementById("demo"); // 添加点击事件监听器 p.addEventListener("click", function() { alert("你点击了元素！"); }); </script> </body> </html>
2. 鼠标移动事件（Mousemove Event）
html<!DOCTYPE html> <html> <body> <p id="demo">移动鼠标到这里！</p> <script> // 获取元素 var p = document.getElementById("demo"); // 添加鼠标移动事件监听器 p.addEventListener("mousemove", function(event) { // 获取鼠标的 x 和 y 坐标 var x = event.clientX; var y = event.clientY; // 显示坐标 alert("鼠标的 x 坐标: " + x + ", y 坐标: " + y); }); </script> </body> </html>
3. 键盘按键事件（Keydown Event）
html<!DOCTYPE html> <html> <body> <p id="demo">按下一个键！</p> <script> // 获取元素 var p = document.getElementById("demo"); // 添加键盘按键事件监听器 document.addEventListener("keydown", function(event) { // 获取按下的键的字符编码 var key = event.keyCode; // 显示字符编码 alert("你按下了键: " + key); }); </script> </body> </html>
4. 移除事件监听器
如果你想要移除之前添加的事件监听器，你可以使用 removeEventListener 方法：
html<!DOCTYPE html> <html> <body> <p id="demo">点击这里！</p> <button onclick="removeClick()">移除监听器</button> <script> // 获取元素 var p = document.getElementById("demo"); // 添加点击事件监听器 p.addEventListener("click", function() { alert("你点击了元素！"); }); // 定义移除监听器的函数 function removeClick() { p.removeEventListener("click", function() { alert("你点击了元素！"); }); } </script> </body> </html>
注意：在移除监听器时，你需要传递与添加监听器时相同的函数。如果传递了不同的函数，即使函数体相同，它也不会移除任何监听器。这是因为 JavaScript 中函数的比较基于引用，而不是基于函数体的内容。
