JavaScript 事件监听详解

最新推荐文章于 2025-09-12 00:05:50 发布

原创最新推荐文章于 2025-09-12 00:05:50 发布 · 3.1k 阅读

28 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #开发语言 #ecmascript

前端专栏收录该内容

10 篇文章

订阅专栏

JavaScript 事件监听详解

在 JavaScript 编程中，事件监听是一种非常重要的机制，它允许我们在特定的事件发生时执行特定的代码。事件监听器可以用于响应用户的操作（如点击、鼠标移动、键盘输入等），也可以用于响应浏览器的事件（如页面加载完成、窗口大小改变等）。本文将详细介绍 JavaScript 事件监听的相关知识，并通过丰富的示例帮助你更好地理解。

1. 事件监听的基本概念

事件监听器是一种函数，它在特定事件发生时被调用。事件监听器可以附加到 DOM 元素上，当该元素上发生指定的事件时，事件监听器就会被触发。

2. 事件监听的类型

JavaScript 支持多种类型的事件，常见的事件类型包括：

鼠标事件：click, dblclick, mousemove, mouseover, mouseout, mousedown, mouseup
键盘事件：keydown, keyup, keypress
表单事件：submit, reset, focus, blur, change, input
窗口事件：load, unload, resize, scroll
触摸事件：touchstart, touchend, touchmove, touchcancel

3. 添加事件监听器

在 JavaScript 中，可以使用 addEventListener 方法为 DOM 元素添加事件监听器。addEventListener 方法有三个参数：事件类型、事件处理函数和可选的选项对象。

element.addEventListener(eventType, eventHandler, options);

3.1 基本示例

以下是一个简单的示例，展示如何为一个按钮添加点击事件监听器：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Event Listener Example</title>
</head>
<body>
  <button id="myButton">Click Me</button>

  <script>
    let button = document.getElementById('myButton');

    button.addEventListener('click', function() {
      alert('Button clicked!');
    });
  </script>
</body>
</html>

3.2 使用命名函数

为了提高代码的可读性和可维护性，可以将事件处理函数定义为一个命名函数：

let button = document.getElementById('myButton');

function handleClick() {
  alert('Button clicked!');
}

button.addEventListener('click', handleClick);

3.3 选项对象

addEventListener 方法的第三个参数是一个选项对象，可以包含以下属性：

capture：布尔值，表示事件是否在捕获阶段触发（默认为 false）。
once：布尔值，表示事件处理函数是否只执行一次（默认为 false）。
passive：布尔值，表示事件处理函数是否永远不会调用 preventDefault（默认为 false）。

button.addEventListener('click', handleClick, {
  capture: true,
  once: true,
  passive: false
});

4. 移除事件监听器

可以使用 removeEventListener 方法移除事件监听器。需要注意的是，移除事件监听器时必须使用与添加时相同的函数引用。

button.removeEventListener('click', handleClick);

5. 事件对象

在事件处理函数中，可以通过参数访问事件对象。事件对象包含有关事件的详细信息，如事件类型、目标元素、鼠标位置等。

function handleClick(event) {
  console.log('Event type:', event.type);
  console.log('Target element:', event.target);
  console.log('Mouse position:', event.clientX, event.clientY);
}

button.addEventListener('click', handleClick);

6. 事件传播

事件传播分为三个阶段：捕获阶段、目标阶段和冒泡阶段。默认情况下，事件监听器在冒泡阶段触发。可以通过设置 capture 选项在捕获阶段触发事件监听器。

6.1 冒泡示例

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Event Bubbling Example</title>
  <style>
    #outer {
      padding: 20px;
      background-color: lightblue;
    }
    #inner {
      padding: 20px;
      background-color: lightgreen;
    }
  </style>
</head>
<body>
  <div id="outer">
    Outer Div
    <div id="inner">
      Inner Div
    </div>
  </div>

  <script>
    let outer = document.getElementById('outer');
    let inner = document.getElementById('inner');

    outer.addEventListener('click', function() {
      alert('Outer div clicked!');
    });

    inner.addEventListener('click', function() {
      alert('Inner div clicked!');
    });
  </script>
</body>
</html>

在这个示例中，点击内层 div 时，会先触发内层 div 的点击事件，然后触发外层 div 的点击事件（冒泡阶段）。

6.2 捕获示例

outer.addEventListener('click', function() {
  alert('Outer div clicked in capture phase!');
}, true);

inner.addEventListener('click', function() {
  alert('Inner div clicked in capture phase!');
}, true);

在这个示例中，点击内层 div 时，会先触发外层 div 的点击事件，然后触发内层 div 的点击事件（捕获阶段）。

7. 阻止事件传播

可以使用 event.stopPropagation 方法阻止事件传播。

inner.addEventListener('click', function(event) {
  alert('Inner div clicked!');
  event.stopPropagation();
});

在这个示例中，点击内层 div 时，只会触发内层 div 的点击事件，不会触发外层 div 的点击事件。

8. 阻止默认行为

某些事件具有默认行为（如链接跳转、表单提交等），可以使用 event.preventDefault 方法阻止默认行为。

<a id="myLink" href="https://www.example.com">Click Me</a>

<script>
  let link = document.getElementById('myLink');

  link.addEventListener('click', function(event) {
    event.preventDefault();
    alert('Link clicked, but default action prevented!');
  });
</script>

在这个示例中，点击链接时，不会跳转到指定的 URL，而是弹出一个警告框。

9. 事件委托

事件委托是一种优化事件处理的技术，通过将事件监听器附加到父元素上，利用事件冒泡机制来处理子元素的事件。

<ul id="myList">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

<script>
  let list = document.getElementById('myList');

  list.addEventListener('click', function(event) {
    if (event.target.tagName === 'LI') {
      alert('List item clicked: ' + event.target.textContent);
    }
  });
</script>

在这个示例中，点击列表项时，会触发父元素 ul 上的点击事件，通过检查 event.target 来确定具体点击的列表项。

10. 示例：实现一个简单的计数器

以下是一个示例，展示如何使用事件监听器实现一个简单的计数器：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Counter Example</title>
</head>
<body>
  <button id="incrementButton">Increment</button>
  <span id="counterDisplay">0</span>

  <script>
    let incrementButton = document.getElementById('incrementButton');
    let counterDisplay = document.getElementById('counterDisplay');
    let counter = 0;

    incrementButton.addEventListener('click', function() {
      counter++;
      counterDisplay.textContent = counter;
    });
  </script>
</body>
</html>