本文系统梳理了JavaScript中DOM操作的常用事件，涵盖事件三要素、焦点获取与失去、鼠标悬停与点击、页面加载、键盘按键及内容变化等核心场景。通过具体代码示例，详细演示了onfocus、onblur、onmouseover、onmouseout、onclick、onload、onkeyup及onchange等事件的触发机制与处理逻辑，帮助开发者掌握前端交互基础。
前文探讨了利用JavaScript获取页面元素的方法，其核心目的在于对元素执行特定行为，该行为由特定条件触发，在JavaScript中这一系列机制被称为事件。
基于上述分析，事件可划分为三个组成部分：
事件源头：即需要被操作的目标元素。
事件类型：指触发事件的条件，例如鼠标点击或鼠标悬停等。
事件处理：指当行为被触发后，如何执行操作以及预期的操作结果。
常用事件
接下来介绍常见的事件类型，此处并未涵盖所有事件，如需查阅完整列表请参考官方文档。
常见的事件包括：
| 事件类型 | 描述 |
|---|---|
| onblur | 对象失去焦点的时候触发 |
| onfous | 当获得焦点的时候触发 |
| onclick | 用户鼠标左键点击的时候触发 |
| ondblclick | 用户双击时候触发 |
| onchange | 当对象或者选中区内容改变的时候触发 |
| onkeyup | 当用户释放键盘按键时候触发（还有两个事件onkeydown和onkeypress） |
| onload | 浏览器加载完毕后立即触发 |
| onmouseout | 当用户将鼠标移出对象范围时触发 |
| onmouseover | 当用户数鼠标在对象上滑动的时候触发 |
| onselect | 当当前选择区改变时触发 |
| onunload | 对象卸载前理解触发 |
在后续演示中，部分示例涉及属性变化，读者可暂不关注属性细节，重点理解事件的触发机制。关于属性的修改与赋值，将在后续单独文章中详述。
演示获取焦点与失去焦点
演示如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>测试文档</title>
</head>
<body>
<!--可以在标签上直接绑定事件类型-->
<label>姓名</label> <input id="testid" type="text" onfocus="test_foncus()" value="请输入">
<script>
var element=document.getElementById("testid");
function test_foncus() {
if (element.value=="请输入"){
element.value="";
}
}
// 也可以主页绑定事件类型
element.onblur=function () {
console.log(element.value);
if (element.value==""){
element.value="请输入";
}
}
</script>
</body>
</html>
演示鼠标悬停与离开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>测试文档</title>
<style>
div {
width: 200px;
height: 200px;
background-color: blue;
}
</style>
</head>
<body>
<div id="testid" ></div>
<script>
var element=document.getElementById("testid");
element.onmouseover=function () {
element.style='background-color:pink;';
}
element.onmouseout=function () {
element.style='background-color:blue;';
}
</script>
</body>
</html>
点击事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>测试文档</title>
<style>
</style>
</head>
<body>
<button id="testid">点击按钮</button>
<script>
var element=document.getElementById("testid");
element.onclick=function () {
confirm("你确定你要点击？")
}
</script>
</body>
</html>
load页面加载事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>测试文档</title>
<style>
</style>
</head>
<body>
<div id="testid1"></div>
<hr>
<div id="testid2"></div>
<script>
var element1=document.getElementById("testid1");
var element2=document.getElementById("testid2");
// 一般onload加载是监控的是这个页面的加载所以一般都是window调用
window.onload=function () {
element1.innerText="innerText插入";
element2.innerHTML="<h1>innerHTML插入</h1>"
}
</script>
</body>
</html>
补充innerText与innerHTML的区别
- innerText用于在页面上输出纯文本内容，并直接移除标签。
- innerHTML用于在页面上输出标签效果及其包含的内容。
onkeyup键盘按键释放事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>测试文档</title>
<style>
</style>
</head>
<body>
<input id="testid" type="text">
<script>
var element=document.getElementById("testid");
element.onkeyup=function () {
alert("你在输入内容啊")
}
</script>
</body>
</html>
内容变化事件
演示如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>测试文档</title>
<style>
</style>
</head>
<body>
<input id="testid" type="text">
<script>
var element=document.getElementById("testid");
// 到鼠标离开的时候就会变得是否内容修改
element.onchange=function () {
alert("你在修改吗？")
}
</script>
</body>
</html>
选中时触发
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>测试文档</title>
<style>
</style>
</head>
<body>
<input id="testid" type="text" value="点击两次选选择">
<script>
var element=document.getElementById("testid");
element.onselect=function () {
alert(element.value);
}
</script>
</body>
</html>
至此，关于JavaScript中DOM操作常用事件的总结介绍完毕，更多JavaScript DOM事件相关内容请查阅本站往期文章或继续浏览下文，感谢大家的支持！