📅  最后修改于: 2023-12-03 15:35:24.664000             🧑  作者: Mango
在 TypeScript 中,我们可以使用事件对象来获取 DOM 元素的相关信息,包括获取事件目标文本。本文将介绍如何使用 TypeScript 获取事件目标文本。
在事件处理函数中,我们可以使用 event.target
来获取事件目标。该属性返回触发了该事件的元素。
function handleClick(event: Event) {
const target = event.target; // 获取事件目标
}
要获取元素的文本内容,我们可以使用 textContent
或 innerText
属性。这两个属性都返回元素的文本内容。
function handleClick(event: Event) {
const target = event.target as HTMLElement; // 将事件目标转换为 HTMLElement 类型
const textContent = target.textContent; // 获取文本内容
const innerText = target.innerText; // 获取文本内容
}
<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
属性获取元素的文本内容。