JavaScript常见DOM事件用法详解
作者：竹影时间：2026-10-30 18:50:32浏览：646
本文系统梳理JavaScript中常用的DOM事件，涵盖鼠标单击、悬停、移动、滚轮，键盘按键，以及焦点获取与失去等场景。通过按钮点击、元素变色、跟随鼠标、滚动监听及输入框交互等具体案例，展示onclick、onmouseover、onfocus、onscroll、onkeydown等事件属性的实际用法与代码实现。
一、onclick() 鼠标左键单击事件
示例：点击按钮弹出对话框
<body>
<input type="button" value="按钮" id="btn">
<script>
document.getElementById("btn").onclick = function () {
alert("点击了");
};
</script>
</body> 
二、onmouseover 鼠标移入事件与 onmouseout 鼠标移出事件
示例：鼠标移入变红，移出变蓝（悬停即可，无需点击）
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div {
width: 200px;
height: 200px;
background-color: aqua;
}
</style>
</head>
<body>
<div id="dv"></div>
<script>
document.getElementById("dv").onmouseover = function () {
document.getElementById("dv").style.backgroundColor = "red";
};
document.getElementById("dv").onmouseout = function () {
document.getElementById("dv").style.backgroundColor = "";
};
</script>
</body>
三、onfocus 获取焦点事件与 onblur 失去焦点事件
示例：文本输入框
<body>
<input type="text" value="请输入内容" id="te">
<script>
document.getElementById("te").onfocus = function () {
document.getElementById("te").value = "";
};
document.getElementById("te").onblur = function () {
document.getElementById("te").value = "请输入内容";
};
</script>
</body>
四、onmousemove 鼠标移动事件
鼠标移动时触发
示例：div 跟随鼠标移动
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div {
width: 50px;
height: 50px;
background-color: pink;
position: absolute;
}
</style>
</head>
<body>
<div id="dv"></div>
<script>
document.onmousemove = function (e) {
//鼠标相对于页面的可视区域的横坐标
var x = e.clientX;
//鼠标相对于页面的可视区域的纵坐标
var y = e.clientY;
//div对象
var dvobj = document.getElementById("dv");
//设置div的横坐标
dvobj.style.left = x + "px";
//设置div的纵坐标
dvobj.style.top = y + "px";
};
</script>
</body>五、onscroll 滚动条滚动事件
拖动滚动条时触发
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div {
width: 100px;
height: 100px;
background-color: pink;
overflow: auto;
}
</style>
</head>
<body>
<div id="dv">
码仙码仙码仙码仙码仙码仙码仙码仙码仙码仙码仙码仙码仙码仙码仙
</div>
<script>
document.getElementById("dv").onscroll = function () {
console.log("滚动条被拖动了");
};
</script>
</body> 
六、onkeydown / onkeyup 键盘按下/抬起事件
按下或抬起任意键盘按键时触发
<body>
<input type="text" id="txt">
<script>
document.getElementById("txt").onkeydown = function () {
console.log("键盘按下了");
};
document.getElementById("txt").onkeyup = function () {
console.log("键盘抬起了");
};
</script>
</body>
七、keyCode 获取按下的按键代码
<script>
//页面的任何的位置.按下键盘,获取按键的值
document.onkeydown = function (e) {
//console.log(e.keyCode);//事件参数对象
switch (e.keyCode) {
case 81:
console.log("您按下的是Q");
break;
case 87:
console.log("您按下的是W");
break;
case 69:
console.log("您按下的是E");
break;
case 82:
console.log("您按下的是R");
break;
}
};
</script>八、onmousedown / onmouseup 鼠标按下/抬起事件
鼠标左键或右键按下或抬起时触发
按下或抬起鼠标滚轮也会触发，滑动滚轮不触发
若鼠标具备其他按键，按下或抬起这些按键也会触发
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div {
width: 50px;
height: 50px;
background-color: pink;
}
</style>
</head>
<body>
<div id="dv"></div>
<script>
document.getElementById("dv").onmousedown = function () {
console.log("鼠标按下了");
};
document.getElementById("dv").onmouseup = function () {
console.log("鼠标抬起了");
};
</script>
</body>
本文内容源自传智播客视频教程总结及笔记整理，仅供学习交流，严禁用于商业用途
至此，关于JavaScript常见事件用法小结的文章介绍完毕，更多相关js事件内容请搜索本站历史文章或继续浏览下方相关文章，希望大家今后多多支持本站！
作者最新文章
JS怎么使用classList添加、删除和切换class
2026-11-05 17:26:02
网页开发三者分工：HTML结构、CSS样式与JavaScript交互怎么协作
2026-11-05 12:51:22
JS解析URL参数时怎么处理中文乱码和特殊字符
2026-11-05 12:47:23
js-cookie 存储 JSON 对象：自动序列化与反序列化技巧
2026-11-05 12:36:26
marked.js 快速上手：安装与基础 Markdown 转 HTML 示例
2026-11-05 09:32:53