js event.target|极客笔记

js event.target

1. 介绍

在 JavaScript 中，event.target 是一个常见的属性，用于获取事件的目标元素。它可以在处理事件时非常有用，因为它允许我们知道触发事件的特定元素。

本文将详细解释 event.target 的概念，如何在事件处理程序中使用它，以及一些示例代码来演示它的用法。

2. event.target 概述

在 JavaScript 中，事件冒泡是常用的事件传播机制。当一个具体元素上触发了一个事件时，事件将冒泡到该元素的父元素，再到父元素的父元素，直到冒泡到文档的根节点。

event.target 属性用于获取触发事件的最深嵌套元素，也就是事件的目标元素。无论事件经过多少个元素的冒泡，我们可以使用 event.target 确定哪个具体元素触发了事件。

3. 使用 event.target

要使用 event.target，我们需要在事件处理程序中访问它。在 JavaScript 中，我们可以使用 addEventListener() 方法来为元素添加事件监听器。当事件被触发时，该监听器中的函数将被调用，并且事件对象将作为参数传递给该函数。

以下是一个示例，演示如何在事件处理程序中使用 event.target：

// HTML
<button id="myButton">Click me!</button>

// JavaScript
const button = document.getElementById('myButton');
button.addEventListener('click', handleClick);

function handleClick(event) {
  console.log(event.target);
}

在上面的示例中，我们在按钮元素上添加了一个点击事件监听器，并将 handleClick 函数作为处理程序。当按钮被点击时，handleClick 函数将被调用，并且 event.target 将输出按钮元素。

在控制台中运行以上代码，当点击按钮时，你会在控制台中看到类似以下的输出：

<button id="myButton">Click me!</button>

4. 事件委托和 event.target

事件委托是一个很重要的概念，它与 event.target 直接相关。通过将事件处理程序绑定在父元素上，我们可以捕获子元素上的事件，并通过 event.target 来确定具体触发事件的子元素。

为了更好地理解事件委托和 event.target 的关系，我们来看一个具体的示例。

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

我们的目标是在每次点击列表项时，在控制台输出该列表项的文本内容。为了实现这个功能，我们可以将点击事件监听器添加到父元素 <ul> 上，并使用 event.target 来确定具体点击的是哪个列表项。

以下是具体代码示例：

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

// JavaScript
const list = document.getElementById('myList');
list.addEventListener('click', handleClick);

function handleClick(event) {
  if (event.target.tagName === 'LI') {
    console.log(event.target.textContent);
  }
}

在上面的示例中，我们将点击事件监听器绑定到父元素 <ul> 上，并在处理函数 handleClick 中检查触发事件的元素是否为 <li> 标签。如果是，则将该列表项的文本内容输出到控制台。

在控制台中运行以上代码，当点击列表项时，你会在控制台中看到相应列表项的文本内容。

5. event.target vs. event.currentTarget

在事件处理程序中，event.target 和 event.currentTarget 是两个常用的属性。它们看起来很相似，但其实有着不同的含义。

event.target 表示事件的目标元素，即触发事件的具体元素。
event.currentTarget 表示当前事件处理程序所绑定的元素，即处理事件的元素。

为了更好地理解这两个属性之间的差异，我们来看一个具体的示例：

// HTML
<div class="container">
  <button>Button</button>
</div>

// JavaScript
const container = document.querySelector('.container');
container.addEventListener('click', handleClick);

function handleClick(event) {
  console.log(event.target); // 输出被点击的按钮元素
  console.log(event.currentTarget); // 输出包裹按钮的容器元素
}

在上面的示例中，我们在容器元素上添加了点击事件监听器，并在处理函数 handleClick 中使用 event.target 和 event.currentTarget 来输出相应的元素。

在控制台中运行以上代码，当点击按钮时，你会在控制台中看到相应的元素输出。