以下是使用 HTML DOM 事件监听器的基本语法：
// 获取元素
var myElement = document.getElementById("myElement");
// 添加事件监听器
myElement.addEventListener("click", function() {
// 在这里执行希望在点击事件发生时执行的代码
});
在上述示例中，addEventListener 方法用于向指定的元素（在这里是ID为 "myElement" 的元素）添加一个事件监听器。第一个参数是事件的类型（比如 "click"、"mouseover" 等），第二个参数是一个函数，这个函数将在事件发生时执行。
示例：
1. 点击事件：
<!DOCTYPE html>
<html>
<head>
<title>Click Event Listener</title>
</head>
<body>
<button id="myButton">Click me</button>
<script>
// 获取按钮元素
var button = document.getElementById("myButton");
// 添加点击事件监听器
button.addEventListener("click", function() {
alert("Button clicked!");
});
</script>
</body>
</html>
2. 输入事件：
<!DOCTYPE html>
<html>
<head>
<title>Input Event Listener</title>
</head>
<body>
<input type="text" id="myInput" placeholder="Type something">
<script>
// 获取输入框元素
var input = document.getElementById("myInput");
// 添加输入事件监听器
input.addEventListener("input", function() {
console.log("Input value changed:", input.value);
});
</script>
</body>
</html>
3. 鼠标移入和移出事件：
<!DOCTYPE html>
<html>
<head>
<title>Mouseover and Mouseout Event Listeners</title>
</head>
<body>
<div id="myDiv" style="width: 100px; height: 100px; background-color: lightblue;"></div>
<script>
// 获取元素
var myDiv = document.getElementById("myDiv");
// 添加鼠标移入事件监听器
myDiv.addEventListener("mouseover", function() {
myDiv.style.backgroundColor = "lightgreen";
});
// 添加鼠标移出事件监听器
myDiv.addEventListener("mouseout", function() {
myDiv.style.backgroundColor = "lightblue";
});
</script>
</body>
</html>
在这些示例中，addEventListener 方法用于为不同类型的事件（点击事件、输入事件、鼠标事件）注册相应的监听器。通过监听器，可以执行特定事件发生时所需的操作。
转载请注明出处：http://www.pingtaimeng.com/article/detail/3550/JavaScript