🎬 HoRain云小助手：个人主页
🔥 个人专栏: 《Linux 系列教程》《c语言教程》
⛺️生活的理想，就是为了理想的生活!
⛳️ 推荐
前些天发现了一个超棒的服务器购买网站，性价比超高，大内存超划算！忍不住分享一下给大家。点击跳转到网站。
专栏介绍
专栏名称 | 专栏介绍 |
《C语言》 | 本专栏主要撰写C干货内容和编程技巧，让大家从底层了解C，把更多的知识由抽象到简单通俗易懂。 |
《网络协议》 | 本专栏主要是注重从底层来给大家一步步剖析网络协议的奥秘，一起解密网络协议在运行中协议的基本运行机制！ |
《docker容器精解篇》 | 全面深入解析 docker 容器，从基础到进阶，涵盖原理、操作、实践案例，助您精通 docker。 |
《linux系列》 | 本专栏主要撰写Linux干货内容，从基础到进阶，知识由抽象到简单通俗易懂，帮你从新手小白到扫地僧。 |
《python 系列》 | 本专栏着重撰写Python相关的干货内容与编程技巧，助力大家从底层去认识Python，将更多复杂的知识由抽象转化为简单易懂的内容。 |
《试题库》 | 本专栏主要是发布一些考试和练习题库（涵盖软考、HCIE、HRCE、CCNA等） |
目录
⛳️ 推荐
专栏介绍
JavaScript 事件
事件流模型
事件处理方式
1. HTML 内联属性
2. DOM 属性绑定
3. addEventListener（推荐方案）
常见事件类型
事件委托
事件对象常用方法
事件处理最佳实践
JavaScript 事件
JavaScript 事件是 HTML 元素上可被 JavaScript 侦测并响应的用户行为或页面状态变化，通过事件处理程序实现网页动态交互功能。
事件流模型
事件执行遵循 DOM 事件流模型，包含三个阶段：
- 事件捕获阶段：从
window向下传递，直到目标元素的父级 - 目标阶段：事件到达实际触发事件的元素（
event.target） - 事件冒泡阶段：从目标元素向上冒泡，依次触发祖先元素上的监听器
默认情况下，事件处理程序在冒泡阶段执行（
addEventListener的第三个参数默认为false）
事件处理方式
1. HTML 内联属性
<button onclick="handleClick()">点击我</button>- 优点：简单直观
- 缺点：混合 HTML 和 JavaScript，难以维护
2. DOM 属性绑定
const btn = document.getElementById('myButton'); btn.onclick = function(event) { console.log('按钮被点击', event.target); };- 优点：支持动态修改和移除
- 缺点：每个事件类型只能绑定一个处理程序
3. addEventListener（推荐方案）
const btn = document.getElementById('myButton'); btn.addEventListener('click', function(event) { console.log('按钮被点击', event.target); }, { capture: false, once: false, passive: false });- 优点：支持同时绑定多个处理程序，精确控制事件阶段
常见事件类型
| 事件类型 | 说明 | 示例 |
|---|---|---|
| 用户界面事件 | 页面加载、卸载和调整大小 | load,unload,resize,scroll |
| 焦点事件 | 元素获得或失去焦点 | blur,focus,focusin,focusout |
| 鼠标事件 | 鼠标交互 | click,mouseover,mouseout,mousedown,mouseup |
| 键盘事件 | 键盘输入 | keydown,keyup,keypress |
| 输入事件 | 输入框内容变化 | input,change |
| 表单事件 | 表单操作 | submit,reset |
| 触摸事件 | 触摸屏交互 | touchstart,touchmove,touchend |
事件委托
事件委托是利用事件冒泡特性，将事件监听器添加到父元素上，而不是每个子元素上：
document.querySelector('#list').addEventListener('click', function(event) { if(event.target.tagName === 'LI') { event.target.classList.toggle('selected'); } });优点：
- 减少内存占用（监听器数量减少）
- 自动支持动态添加的元素
- 提高代码可维护性
事件对象常用方法
| 方法 | 说明 |
|---|---|
event.preventDefault() | 阻止事件的默认行为（如表单提交） |
event.stopPropagation() | 阻止事件继续传播（阻止冒泡） |
event.target | 真正触发事件的元素 |
event.currentTarget | 绑定监听器的元素（与this相同） |
事件处理最佳实践
- 优先使用
addEventListener而非内联属性或 DOM 属性绑定 - 为动态元素使用事件委托
- 使用
event.target.matches()进行精确目标匹配 - 对频繁触发的事件（如
scroll、resize）使用节流（throttle）优化性能
理解 JavaScript 事件机制是构建交互式 Web 应用的基础，合理运用这些机制可以大大提高应用的性能和可维护性。
❤️❤️❤️本人水平有限，如有纰漏，欢迎各位大佬评论批评指正！😄😄😄
💘💘💘如果觉得这篇文对你有帮助的话，也请给个点赞、收藏下吧，非常感谢!👍 👍 👍
🔥🔥🔥Stay Hungry Stay Foolish 道阻且长,行则将至,让我们一起加油吧！🌙🌙🌙
