编程马·菜鸟教程

Appearance

事件基础（让网页响应用户操作） ​

14.1 什么是事件？点击 / 输入 / 移动 ​

事件（Event） 是浏览器中发生的各种交互行为，如用户点击鼠标、键盘输入、页面加载完成等。JavaScript 可以通过监听这些事件来执行相应的代码，实现网页与用户的交互。

常见的事件类型：

  • 鼠标事件：点击、移动、滚轮等
  • 键盘事件：按键按下、释放等
  • 表单事件：输入、提交、焦点等
  • 页面事件：加载、 resize、滚动等

14.2 事件三要素：事件源 + 事件类型 + 事件处理函数 ​

事件三要素：

  1. 事件源（Event Source）：触发事件的元素，如按钮、输入框等
  2. 事件类型（Event Type）：事件的种类，如 click、mouseover 等
  3. 事件处理函数（Event Handler）：事件触发时执行的函数

事件监听的基本语法 ​

javascript
// 获取事件源
const button = document.getElementById("myButton");

// 添加事件监听器
button.addEventListener("click", function() {
  // 事件处理函数
  console.log("按钮被点击了！");
});

14.3 常用鼠标事件：click/mouseover/mouseout ​

click 事件 ​

当用户点击元素时触发。

javascript
const button = document.getElementById("myButton");

button.addEventListener("click", function() {
  console.log("按钮被点击了");
});

mouseover 事件 ​

当鼠标指针移动到元素上时触发。

javascript
const box = document.getElementById("myBox");

box.addEventListener("mouseover", function() {
  this.style.backgroundColor = "lightblue";
});

mouseout 事件 ​

当鼠标指针离开元素时触发。

javascript
const box = document.getElementById("myBox");

box.addEventListener("mouseout", function() {
  this.style.backgroundColor = "white";
});

其他鼠标事件 ​

  • mousedown：鼠标按下时触发
  • mouseup：鼠标释放时触发
  • mousemove：鼠标在元素上移动时触发
  • contextmenu：右键菜单显示时触发

14.4 常用键盘事件：keydown/keyup ​

keydown 事件 ​

当键盘按键被按下时触发。

javascript
const input = document.getElementById("myInput");

input.addEventListener("keydown", function(event) {
  console.log(`按下的键：${event.key}`);
  console.log(`键码：${event.keyCode}`);
});

keyup 事件 ​

当键盘按键被释放时触发。

javascript
const input = document.getElementById("myInput");

input.addEventListener("keyup", function(event) {
  console.log(`释放的键：${event.key}`);
});

keypress 事件 ​

当键盘按键被按下并释放时触发（已废弃，建议使用 keydown）。

14.5 常用表单事件：focus/blur/submit ​

focus 事件 ​

当元素获得焦点时触发。

javascript
const input = document.getElementById("myInput");

input.addEventListener("focus", function() {
  this.style.borderColor = "blue";
});

blur 事件 ​

当元素失去焦点时触发。

javascript
const input = document.getElementById("myInput");

input.addEventListener("blur", function() {
  this.style.borderColor = "gray";
});

submit 事件 ​

当表单提交时触发。

javascript
const form = document.getElementById("myForm");

form.addEventListener("submit", function(event) {
  // 阻止表单默认提交行为
  event.preventDefault();
  
  // 执行表单验证等操作
  console.log("表单提交了");
});

其他表单事件 ​

  • input：输入框内容改变时触发
  • change：元素值改变时触发（通常在失去焦点时）
  • reset：表单重置时触发

14.6 实战：点击按钮切换文字 / 鼠标悬浮变色 ​

实战 1：点击按钮切换文字 ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>点击按钮切换文字</title>
</head>
<body>
  <button id="toggleBtn">显示隐藏文本</button>
  <p id="text" style="display: none;">这是一段可以显示和隐藏的文本。</p>

  <script>
    const toggleBtn = document.getElementById("toggleBtn");
    const text = document.getElementById("text");
    let isVisible = false;

    toggleBtn.addEventListener("click", function() {
      isVisible = !isVisible;
      if (isVisible) {
        text.style.display = "block";
        toggleBtn.textContent = "隐藏文本";
      } else {
        text.style.display = "none";
        toggleBtn.textContent = "显示文本";
      }
    });
  </script>
</body>
</html>

实战 2：鼠标悬浮变色 ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>鼠标悬浮变色</title>
  <style>
    .box {
      width: 200px;
      height: 200px;
      background-color: lightgray;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 20px;
      transition: background-color 0.3s;
    }
  </style>
</head>
<body>
  <div class="box" id="box1">盒子 1</div>
  <div class="box" id="box2">盒子 2</div>
  <div class="box" id="box3">盒子 3</div>

  <script>
    const boxes = document.querySelectorAll(".box");
    const colors = ["lightblue", "lightgreen", "lightpink"];

    boxes.forEach((box, index) => {
      // 鼠标悬浮时变色
      box.addEventListener("mouseover", function() {
        this.style.backgroundColor = colors[index];
      });

      // 鼠标离开时恢复原色
      box.addEventListener("mouseout", function() {
        this.style.backgroundColor = "lightgray";
      });
    });
  </script>
</body>
</html>

实战 3：键盘事件示例 ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>键盘事件示例</title>
  <style>
    #output {
      margin: 20px 0;
      padding: 10px;
      border: 1px solid #ccc;
    }
  </style>
</head>
<body>
  <input type="text" id="myInput" placeholder="请输入内容">
  <div id="output">按下的键将显示在这里</div>

  <script>
    const input = document.getElementById("myInput");
    const output = document.getElementById("output");

    input.addEventListener("keydown", function(event) {
      output.textContent = `按下的键：${event.key} (键码：${event.keyCode})`;
    });

    input.addEventListener("keyup", function(event) {
      output.textContent += ` → 释放的键：${event.key}`;
    });
  </script>
</body>
</html>

事件对象 ​

当事件触发时，浏览器会创建一个 事件对象（Event Object），并将其作为参数传递给事件处理函数。事件对象包含了事件的详细信息。

javascript
element.addEventListener("click", function(event) {
  // event 就是事件对象
  console.log("事件类型：", event.type);
  console.log("事件目标：", event.target);
  console.log("点击位置：", event.clientX, event.clientY);
});

常用的事件对象属性：

  • event.type：事件类型
  • event.target：事件目标（触发事件的元素）
  • event.currentTarget：当前处理事件的元素
  • event.preventDefault()：阻止默认行为
  • event.stopPropagation()：阻止事件冒泡
  • event.key：键盘事件的按键名称
  • event.clientX/event.clientY：鼠标事件的坐标

事件监听的方式 ​

1. addEventListener() 方法（推荐） ​

javascript
element.addEventListener("click", function() {
  // 事件处理代码
});

2. 内联事件属性 ​

html
<button onclick="handleClick()">点击我</button>
<script>
  function handleClick() {
    console.log("按钮被点击了");
  }
</script>

3. 元素的事件属性 ​

javascript
element.onclick = function() {
  console.log("按钮被点击了");
};

注意： addEventListener() 方法是推荐的方式，因为它可以添加多个事件监听器，而不会覆盖之前的监听器。

小结 ​

  • 事件是浏览器中发生的交互行为，如点击、输入、移动等
  • 事件三要素：事件源、事件类型、事件处理函数
  • 常用鼠标事件：click、mouseover、mouseout
  • 常用键盘事件：keydown、keyup
  • 常用表单事件：focus、blur、submit
  • 使用 addEventListener() 方法添加事件监听器
  • 事件对象包含了事件的详细信息
  • 事件处理函数可以执行相应的操作，实现网页与用户的交互

© 2026 编程马·菜鸟教程 版权所有

基于 VitePress 构建