跳到主要内容

事件基础

事件的本质​

  • 事件是用户或浏览器在页面上触发的动作，例如点击、键盘输入、页面加载。
  • 事件发生时，浏览器会生成一个 事件对象 (event)，并把它交给监听器函数处理。

下面是一些常见的 HTML 事件的列表:

事件描述
onchangeHTML 元素改变
onclick用户点击 HTML 元素
onmouseover鼠标指针移动到指定的元素上时发生
onmouseout用户从一个 HTML 元素上移开鼠标时发生
onkeydown用户按下键盘按键
onload浏览器已完成页面的加载

更多事件列表: JavaScript 参考手册 - HTML DOM 事件。

事件绑定方式​

js
// 1. 内联方式（不推荐）
<button onclick="alert('Hello')">点我</button>;

// 2. DOM 属性方式（后绑定的会覆盖前一个）
element.onclick = function () {
  console.log("点击了");
};

// 3. addEventListener（推荐）
element.addEventListener("click", handler);
element.removeEventListener("click", handler);

优势：可绑定多个处理函数，可控制捕获/冒泡阶段。

note

几乎所有元素都可以使用 onclick 属性。代码块的【点击复制】功能就使用了元素的 onclick 属性。

Demo截图
Demo截图

html
<!-- index.html -->
<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <!-- 设置网页字符集为 UTF-8 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <!-- 适配移动端 -->
    <title>代码块复制示例</title>
    <link rel="stylesheet" href="style.css" />
    <!-- 引入外部样式 -->
  </head>

  <body>
    <h2>C语言 Hello World 示例</h2>

    <!-- 代码块容器 -->
    <div class="code-container">
      <!-- 代码展示区域 -->
      <pre><code id="code-block">
#include &lt;stdio.h&gt;

int main() {
    printf("Hello, World!\n");
    return 0;
}
        </code></pre>

      <!-- 复制按钮 -->
      <button class="copy-btn">复制</button>

      <!-- 复制提示 -->
      <span class="copy-tip">复制成功</span>
    </div>

    <!-- 引入复制功能的脚本 -->
    <script src="script.js"></script>
  </body>
</html>

事件对象​

事件处理函数默认会接收一个参数 event：

js
element.addEventListener("click", (e) => {
  console.log(e.type); // 事件类型，如 "click"
  console.log(e.target); // 实际触发事件的元素
  console.log(e.currentTarget); // 绑定事件的元素
});

事件流​

浏览器事件传播的三个阶段：

  1. 捕获阶段：从 window → 目标元素
  2. 目标阶段：在目标元素上触发
  3. 冒泡阶段：从目标元素 → window
js
element.addEventListener("click", handler, true); // 捕获阶段
element.addEventListener("click", handler, false); // 冒泡阶段（默认）

阻止默认行为与冒泡​

js
link.addEventListener("click", (e) => {
  e.preventDefault(); // 阻止默认行为（如超链接跳转）
  e.stopPropagation(); // 阻止冒泡
});

常见事件类型​

  • 鼠标事件：click、dblclick、mousedown、mouseup、mousemove、mouseover、mouseout、mouseenter、mouseleave
  • 键盘事件：keydown、keyup、keypress（已废弃，少用）
  • 表单事件：input、change、submit、focus、blur
  • 窗口事件：load、resize、scroll、beforeunload

事件委托​

利用 冒泡机制，把子元素的事件绑定在父元素上，减少监听器：

js
let list = document.querySelector("ul");
list.addEventListener("click", (e) => {
  if (e.target.tagName === "LI") {
    console.log("点击了：", e.target.innerText);
  }
});

this 与事件​

  • 普通函数：this 指向绑定事件的元素（即 e.currentTarget）
  • 箭头函数：没有自己的 this，继承外层作用域
js
element.addEventListener("click", function () {
  console.log(this); // element
});

element.addEventListener("click", () => {
  console.log(this); // 外层作用域的 this
});

自定义事件​

可以通过 CustomEvent 创建和触发自定义事件：

js
let event = new CustomEvent("hello", { detail: { msg: "你好" } });
element.dispatchEvent(event);

element.addEventListener("hello", (e) => {
  console.log(e.detail.msg); // 你好
});

思维导图

mindmap
事件 (Event)
│
├── 本质
│   ├── 用户/浏览器动作
│   └── 生成事件对象 event
│
├── 事件绑定
│   ├── 内联方式（不推荐）
│   ├── DOM 属性方式 (element.onclick)
│   └── addEventListener / removeEventListener
│
├── 事件对象 event
│   ├── type (事件类型)
│   ├── target (触发元素)
│   ├── currentTarget (绑定元素)
│   ├── 阻止默认行为 e.preventDefault()
│   └── 阻止冒泡 e.stopPropagation()
│
├── 事件流
│   ├── 捕获阶段 (window → 目标)
│   ├── 目标阶段
│   └── 冒泡阶段 (目标 → window)
│
├── 常见事件类型
│   ├── 鼠标事件 (click, dblclick, mousemove, ...)
│   ├── 键盘事件 (keydown, keyup)
│   ├── 表单事件 (input, change, submit, focus, blur)
│   └── 窗口事件 (load, resize, scroll)
│
├── this 与事件
│   ├── 普通函数：this = 绑定元素
│   └── 箭头函数：继承外层作用域
│
├── 事件委托
│   └── 原理：冒泡，把子元素事件交给父元素
│
└── 自定义事件
    ├── CustomEvent("name", { detail: {...} })
    └── element.dispatchEvent(event)