📜  typescript 获取事件目标文本 - TypeScript (1)

📅  最后修改于: 2023-12-03 15:35:24.664000             🧑  作者: Mango

TypeScript获取事件目标文本

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

1. 获取事件目标

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

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

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

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 属性获取事件目标,然后使用 textContentinnerText 属性获取元素的文本内容。