JavaScript 事件详解 🎯

什么是事件？

事件是用户或浏览器与网页交互的触发点，例如点击按钮、滚动页面、输入文本等。

常见事件类型

• 用户交互事件
  🖱️ click（点击）
  🎮 mouseover（悬停）
  📝 keydown（按键）
• 页面加载事件
  🔄 load（页面加载完成）
  📦 DOMContentLoaded（DOM加载完成）
• 表单相关事件
  ✅ submit（表单提交）
  ❌ invalid（表单验证失败）

事件处理方式

1. HTML属性绑定

   <button onclick="alert('点击了！')">点击我</button>
   

2. JavaScript方法绑定

   document.getElementById("myBtn").addEventListener("click", function() {
     console.log("事件监听器触发");
   });
   

3. 内联函数

   <input type="text" oninput="handleInput(this.value)">
   

事件对象详解

事件对象（event）包含事件详细信息，例如：

• event.target：触发事件的元素
• event.type：事件类型
• event.preventDefault()：阻止默认行为

实用案例

🔗 点击事件实战：按钮高亮效果
🔗 键盘事件应用：实时搜索框

扩展阅读

想更深入了解JavaScript基础？可以访问 JavaScript 基础语法教程 进行学习。