JavaScript语法之事件监听和处理
在JavaScript中，事件是预先定义的、能够被对象识别的动作。事件定义了用户与网页交互时产生的各种操作。但并非每一种事件都会产生结果，因为JavaScript只是识别事件的发生。为了使对象能够对某一事件做出响应（respond），就必须编写事件处理函数。
在设置事件前应该先设置一个盒子，在<body>标签内添加<script>标签，在<script>标签设置JS监听鼠标事件。先为某个节点添加事件监听器
eg：
<script>
box = document.getElementById("b1");
</script>1、鼠标事件
当用户使用鼠标进行各种操作时，浏览器触发的一系列事件
常见的鼠标事件类型
（1）点击事件
-
click ：单击鼠标时触发 dblclick ：双击鼠标时触发
运行代码：
<head>
<style>
.box{
width: 60px;
height: 30px;
background-color: aliceblue;
border: 2px solid black;
text-align: center;
}
body {
height: 3000px; /* 增加浏览器页面高度以便滚动 */
}
</style>
</head>
<body>
<div class="box" id="b1">
//事件
</div>
<script>
// 为某个节点添加事件监听器
box = document.getElementById("b1");
box.addEventListener( "click",
function(){
console.log("你的鼠标单击了！");
}
);
box.addEventListener( "dblclick",
function(){
console.log("你的鼠标双击了！");
}
);
</script>
</body>运行后：
（2）按下事件mousedown
当按下鼠标按键（左右均可）时，发生mousedown事件
运行代码：
<script>
box = document.getElementById("b1");
box.addEventListener( "mousedown",
function(){
console.log("你的鼠标按下了！");
}
);
</script>运行后：
文字前面会记录点击次数
（3）松开事件 mouseup
当在元素上松开鼠标按键（左右均可）时，会发生 mouseup事件
<script>
// 为某个节点添加事件监听器
box = document.getElementById("b1");
box.addEventListener( "mouseup",
function(){
console.log("你的鼠标抬起了！");
}
);
</script>运行后：
将mousedown事件和 mouseup事件结合，会记录按下鼠标键和抬起鼠标键的顺序
（3）移动事件mousemove,mouseenter,mouseleave
mousemove在鼠标移动时触发mouseenter在鼠标进入元素时触发mouseleave在鼠标离开元素时触发
<body>
<div class="box" id="b1">
事件
</div>
<script>
box.addEventListener( "mouseenter",
function(){
console.log("你的鼠标进入目标元素了！");
}
);
box.addEventListener( "mouseleave",
function(){
console.log("你的鼠标离开目标元素了！");
}
);
</script>
</body>运行后：
（4）悬浮和离开事件mouseover，mouseout
mouseover在鼠标悬浮在元素或其子元素上时触发mouseout在鼠标离开元素时触发
运行代码：
<body>
<div class="box" id="b1">
事件
</div>
<script>
box.addEventListener( "mouseover",
function(){
console.log("你的鼠标悬浮在在元素或其子元素上了！");
}
);
box.addEventListener( "mouseout",
function(){
console.log("你的鼠标离开元素了！");
}
);
</script>
</body>
运行后：
（5）wheel事件
在浏览器窗口滚动鼠标滚轮时触发
<script>
// 为某个节点添加事件监听器
box = document.getElementById("b1");
// 为浏览器窗口对象添加事件监听器：以滚动监听为例
window.addEventListener( "wheel",
function(){
console.log("你的鼠标滚轮正在滚动...");
}
);
</script>运行后：
2、键盘事件
是指用户与网页交互时，通过键盘操作触发的一系列事件。这些事件包括keydown、和keyup和keypress，它们分别在用户按下、释放键盘按键时触发，用于执行特定的操作或功能
（1）keydown事件
在键盘上按下一个键，发生keydown事件，如果按住不放会重复触发。可以用来检测用户是否按下了某个特定的键，例如通过event.keyCode获取键码值
运行代码：
<head>
<style>
#output {
margin-top: 20px;
padding: 10px;
border: 1px solid #ccc;
width: 300px;
height: 100px;
/* 超出这个盒子的内容，以纵向滚动的方式展示 */
overflow-y: scroll;
/* 保持空白符和换行符 */
white-space: pre-wrap;
}
</style>
</head>
<body>
<div id="output"></div>
<script>
const outputDiv = document.getElementById('output');
document.addEventListener( "keydown",
function(event){
console.log(`有键盘被按下: ${event.key}`);
}
)
// 监听整个文档的keydown事件
document.addEventListener(
'keydown',
function(event) {
// 获取按键的代码（包括数字键和特殊键，如箭头键、功能键等）
const keyCode = event.key;
// 拼凑输出字符串
const message = `键盘 ${keyCode} 被按下`;
// 将拼凑好的字符串，添加到输出区域
outputDiv.textContent += message + '\n';
</script>
</body> 运行后：
（2）keyup事件
在键盘上抬起一个键，发生keyup事件，当按下键盘上的某个键后抬起时，控制台会显示抬起的按键 ，如果长按不放则不会显示
运行代码：
<body>
<div id="output"></div>
<script>
const outputDiv = document.getElementById('output');
document.addEventListener( "keyup",
function(event){
console.log(`有键盘被释放: ${event.key}`);
}
)
// 监听整个文档的keydown事件
document.addEventListener(
'keyup',
function(event) {
// 获取按键的代码（包括数字键和特殊键，如箭头键、功能键等）
const keyCode = event.key;
// 拼凑输出字符串
const message = `键盘 ${keyCode} 被释放`;
// 将拼凑好的字符串，添加到输出区域
outputDiv.textContent += message + '\n';
}
);
</script>
</body>
运行后：
3、表单事件
是指那些与表单相关的特定事件，这些事件在用户与表单交互时触发，允许开发者执行特定的操作或响应
form对象
通过form对象可以访问表单对象的属性及方法，form对象（称表单对象或窗体对象）是document对象的子对象，提供一个让客户端输入文字或选择的功能。
document.表单名称.属性
document.表单名称.方法（参数）
document.forms[索引].属性
document.forms[索引].方法（参数）
首先：
先设置一个表单，获取表单节点，添加表单提交事件监听器
<body>
<form id="myForm" >
姓名: <input type="text" id="name" value=""> <br>
邮箱: <input type="email" id="email" value=""> <br>
<input type="submit" value="提交">
<input type="reset" value="重置">
</form>
<script>
// 获取表单节点
const form = document.getElementById('myForm');
// 添加“表单提交”事件监听器
form.addEventListener('submit',
function(event) {
event.preventDefault(); // 阻止表单的“默认提交行为”
// 弹出警告框（在实际应用中，你可能会在这里进行AJAX请求或其他处理）
alert('表单提交按钮被按下! (但默认提交行为被截止了)');
// 你可以在这里添加其他代码来处理表单数据
// 例如，获取输入值：
const name = document.getElementById('name').value;
const email = document.getElementById('email').value;
console.log('Name:', name);
console.log('Email:', email);
})
</script>
</body>运行后：
然后
在原有代码添加事件监听器
form.addEventListener('reset',
function(event) {
// 弹出警告框
alert('表单已经重置! ');
}
);运行后：
4、窗口事件
是指与浏览器窗口或某个特定元素相关的事件。这些事件在用户与浏览器窗口交互时触发，例如加载页面、调整窗口大小、滚动页面等
常见的窗口事件包括：
-
load：当整个网页加载完成时触发。
-
resize：当浏览器窗口大小发生变化时触发。
-
scroll：当用户滚动页面时触发。
-
beforunload：当页面即将卸载时触发，用于执行一些清理操作。
-
unload：当页面已经卸载时触发，用于执行一些清理操作
-
error：当图片或脚本加载错误时触发
原文地址：https://blog.csdn.net/lz7_123/article/details/143893955
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！