文章摘要
本文总结了JavaScript中常见的事件处理方式，包括以下主要内容：
1. **点击事件**：
- 通过`onclick`或`onmouseover`等事件处理点击按钮、鼠标的移动等操作。
2. **鼠标移动事件**：
- 使用`onmousemove`让元素随鼠标移动，例如将div元素的坐标设置为鼠标的当前位置。
3. **键盘事件**：
- 根据`keydown`和`keyup`捕捉键盘按键，例如按下字母键(Q、W、E等)或滚动键。
4. **鼠标按键事件**：
- 使用`mousedown`和`mouseup`来捕捉鼠标左键、右键的按下和抬起事件。
这些案例展示了JavaScript如何灵活应用事件处理，广泛应用于网页交互和用户操作的响应中。
案例：点击按钮弹框
<body>
<input type=”button” value=”按钮” id=”btn”>
<script>
document.getElementById(“btn”).onclick=function () {
alert(“点击了”);
};
</script>
</body>
案例：鼠标进入红色，离开蓝色（放上去就可以，不用点击）
<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>
案例：文本框
<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>
鼠标移动的时候就会触发
案例：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>
当拖动滚动条的时候就会触发
<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>
当键盘按下或者抬起任意按键的时候触发
<body>
<input type=”text” id=”txt”>
<script>
document.getElementById(“txt”).onkeydown=function () {
console.log(“键盘按下了”);
};
document.getElementById(“txt”).onkeyup=function () {
console.log(“键盘抬起了”);
};
</script>
</body>
<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>
当鼠标左键或右键按下或者抬起的时候触发
按下或抬起滚动轮也会触发，滑动滚动轮不能触发
如果鼠标比较高级，有其他按键的情况下，按下或抬起也会触发
<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中的鼠标事件有哪些（用法示例学习进阶）js常用的键盘事件有哪些(用法示例)_键码keyCode对照表JavaScript?键盘事件的处理及属性详解javascript 组合按键事件监听实现代码js捕捉键盘事件和按键键值的方法js鼠标按键事件和键盘按键事件用法实例汇总Atitit.js的键盘按键事件捆绑and事件调度JavaScript onkeypress事件入门实例(按下或按住一个键盘按键)JavaScript onkeydown事件入门实例(键盘某个按键被按下)js 事件截取enter按键页面提交事件示例代码javascript 按键事件(兼容各浏览器)js获取键盘按键响应事件(兼容各浏览器)JavaScript 监听textarea中按键事件