以下是一些常见的 HTML DOM 事件：
1. 点击事件：
<!DOCTYPE html>
<html>
<head>
<title>Click Event</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>
在这个例子中，当按钮被点击时，通过 addEventListener 方法注册的回调函数将被调用，显示一个弹出框。
2. 输入事件：
<!DOCTYPE html>
<html>
<head>
<title>Input Event</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>
在这个例子中，当输入框的值发生变化时，通过 addEventListener 方法注册的回调函数将被调用，将变化的值输出到控制台。
3. 鼠标移入和移出事件：
<!DOCTYPE html>
<html>
<head>
<title>Mouseover and Mouseout Events</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>
在这个例子中，当鼠标移入或移出 <div> 元素时，通过 addEventListener 方法注册的回调函数将改变元素的背景颜色。
4. 表单提交事件：
<!DOCTYPE html>
<html>
<head>
<title>Form Submission Event</title>
</head>
<body>
<form id="myForm">
<input type="text" name="username" placeholder="Username">
<input type="password" name="password" placeholder="Password">
<button type="submit">Submit</button>
</form>
<script>
// 获取表单元素
var form = document.getElementById("myForm");
// 添加表单提交事件监听器
form.addEventListener("submit", function(event) {
event.preventDefault(); // 阻止默认的表单提交行为
// 处理表单提交逻辑
alert("Form submitted!");
});
</script>
</body>
</html>
在这个例子中，当表单提交时，通过 addEventListener 方法注册的回调函数将被调用，使用 event.preventDefault() 阻止默认的表单提交行为，并显示一个弹出框。
这些示例展示了如何使用 HTML DOM 事件来响应用户的操作和处理页面的交互。事件处理是构建交互式网页的关键部分。
转载请注明出处：http://www.pingtaimeng.com/article/detail/3549/JavaScript