TypeScript获取事件目标文本

在 TypeScript 中，我们可以使用事件对象来获取 DOM 元素的相关信息，包括获取事件目标文本。本文将介绍如何使用 TypeScript 获取事件目标文本。

1. 获取事件目标

在事件处理函数中，我们可以使用 event.target 来获取事件目标。该属性返回触发了该事件的元素。

function handleClick(event: Event) {
  const target = event.target; // 获取事件目标
}

2. 获取文本内容

要获取元素的文本内容，我们可以使用 textContent 或 innerText 属性。这两个属性都返回元素的文本内容。

function handleClick(event: Event) {
  const target = event.target as HTMLElement; // 将事件目标转换为 HTMLElement 类型
  const textContent = target.textContent; // 获取文本内容
  const innerText = target.innerText; // 获取文本内容
}

3. 示例

<div id="example">示例文本</div>

const example = document.getElementById('example');

if (example) {
  example.addEventListener('click', handleClick);
}

function handleClick(event: Event) {
  const target = event.target as HTMLElement;
  const textContent = target.textContent;
  console.log(textContent); // 输出：示例文本
}

在上面的示例中，我们通过 getElementById 方法获取了一个具有 id 属性为 example 的元素，然后添加了一个 click 事件处理程序。在事件处理程序中，我们可以使用 textContent 属性获取该元素的文本，并将其输出到控制台中。

总结

在 TypeScript 中，我们可以使用事件对象来获取 DOM 元素的相关信息，包括获取元素文本内容。使用 event.target 属性获取事件目标，然后使用 textContent 或 innerText 属性获取元素的文本内容。