JavaScript 事件教程 📚

JavaScript 是一种事件驱动的语言，事件（Events）是用户与网页互动的核心机制。无论是点击按钮、输入文本，还是页面加载，事件都在背后发挥作用。以下是关于 JavaScript 事件的基础知识和实践指南：

---

📌 事件基础

1. 事件类型
   常见事件包括：

   • 🖱️ 用户操作事件（如 click, hover, submit）
   • 📱 浏览器事件（如 load, resize, scroll）
   • 🧩 DOM 事件（如 DOMContentLoaded, input, focus）

2. 事件处理
   通过 addEventListener 方法绑定事件：

   document.getElementById("myButton").addEventListener("click", function() {
     alert("按钮被点击了！");
   });
   

   📌 提示：避免使用 on<事件名> 属性，推荐使用现代的事件委托模式。

3. 事件对象
   事件触发时会携带数据，例如：

   • event.target：事件源元素
   • event.type：事件类型
   • event.clientX：鼠标指针坐标

---

📊 事件流程图

*图示：JavaScript 的事件循环机制* *图示：事件传播的三个阶段（捕获、目标、冒泡）*

---

🧪 实践示例

1. 点击事件

   <button id="demo">点击我</button>
   <script>
     document.getElementById("demo").addEventListener("click", () => {
       console.log("点击事件触发");
     });
   </script>
   

2. 表单提交

   <form onsubmit="handleSubmit(event)">
     <input type="text" name="username" />
     <button type="submit">提交</button>
   </form>
   <script>
     function handleSubmit(event) {
       event.preventDefault(); // 阻止默认提交行为
       console.log("表单提交被阻止");
     }
   </script>
   

---

📚 扩展阅读

• JavaScript 基础语法入门
• 事件委托与性能优化
• 浏览器事件类型全解

---

📌 注意事项

• 事件监听器应尽量简洁，避免阻塞主线程
• 使用 removeEventListener 及时清理无效事件
• 对于高频事件（如 resize），建议使用防抖（debounce）技术

*图示：事件绑定与解绑的对比*