本文详细解析JavaScript中的常用事件处理机制，涵盖窗口加载、调整大小、滚动等窗口事件，鼠标点击与键盘按键等交互事件，以及文本域变化。重点讲解addEventListener中事件捕获与冒泡的区别，通过代码示例演示如何绑定和处理各类DOM事件，帮助开发者掌握前端交互开发的核心技术。
JavaScript事件是指在浏览器窗口或HTML元素上发生的、能够触发JavaScript代码执行的行为。本文将深入探讨这些常见的事件类型及其处理方式。
1. 窗口事件
以onload事件为例，当页面完全加载完毕（包括图片、JavaScript文件和CSS文件等所有资源）后，该事件会被触发。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>花狗在线</title>
<script>
window.onload=function(){
var mydiv = document.getElementById("mydiv");
alert("页面加载完成，mydiv的内容是："+mydiv.innerText);
}
</script>
</head>
<body>
<div id='mydiv'>我是花狗，花狗的花，花狗的狗。</div>
</body>
</html>
此外，还有以下相关事件：
resize事件：当用户调整浏览器窗口的宽度或高度时，会触发resize事件。
scroll事件：在文档或浏览器窗口发生滚动操作时，会触发scroll事件。
焦点事件：涉及元素获取或失去焦点的状态变化，例如文本框被选中或取消选中的情况。
2. 鼠标事件
例如，当用户单击鼠标左键时，会触发onclick事件：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>花狗在线</title>
<style>
html,body{
width: 100%;
height: 100%;
}
</style>
<script>
function mouseclick(){
alert('页面被单击');
}
</script>
</head>
<body onclick="mouseclick()">
<div id='mydiv'>我是花狗，花狗的花，花狗的狗。</div>
</body>
</html>
注意：将html和body 的样式表都设置为width: 100%，height: 100%，否则onclick无效。
3. 键盘事件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>花狗在线</title>
<style>
html,body{
background-color: aquamarine;
width: 100%;
height: 100%;
}
</style>
<script>
function keydown(event){
if(event.keyCode==37){
alert(event.keyCode +'你按下了左键');
}
if(event.keyCode==38){
alert(event.keyCode +'你按下了上键');
}
if(event.keyCode==39){
alert(event.keyCode +'你按下了右键');
}
if(event.keyCode==40){
alert(event.keyCode +'你按下了下键');
}
}
</script>
</head>
<body onkeydown="keydown(event)">
</body>
</html>
4. 常用事件方法汇总（涵盖窗口、鼠标、键盘及文本事件）
| 方法 | 描述 |
| onabort | 图像加载被中断 |
| onblur | 元素失去焦点 |
| onchange | 用户改变域的内容 |
| onclick | 鼠标单击某个对象 |
| ondblclick | 鼠标双击某个对象 |
| onerror | 当加载文档或者图像时发生某个错误 |
| onfocus | 元素获得焦点 |
| onkeydown | 某个键盘的键被按下 |
| onkeypress | 某个键盘的键被按下或者按 |
| onkeyup | 某个键盘的键被松开 |
| onload | 某个页面或者图像被完成加载 |
| onmousedown | 某个鼠标按键被按下 |
| onmousemove | 鼠标被移动 |
| onmouseout | 鼠标从某元素移开 |
| onmouseover | 鼠标被移到某元素之上 |
| onmouseup | 某个鼠标按键被松开 |
| onreset | 重置按钮被单击 |
| onresize | 窗口或者框架被调整尺寸 |
| onselect | 文本被选定 |
| onsubmit | 提交按钮被单击 |
| onunload | 用户退出页面 |
5. 事件冒泡与事件捕获
事件发生时会产生事件流。当一个HTML元素触发事件时，该事件会按照特定顺序在元素节点与根节点之间传播，过程类似于递归。事件的触发方式如下：addEventListener("click", "doSomething", true)。若第三个参数为true，则表示采用事件捕获模式；若为false，则表示采用事件冒泡模式，默认值为冒泡。
捕获型事件传播流程：
冒泡型事件传播流程
至此，关于利用JavaScript处理常用事件的详解介绍完毕。如需了解更多相关JS事件处理内容，请搜索本站历史文章或继续浏览后续相关文章，感谢大家的支持！