How to check tagName in eventTarget using Typescript?

在使用 TypeScript 时，若要在一个 eventTarget 中检查标记名（通常指的是 HTML 元素的标签名），可以通过访问事件目标的 tagName 属性来实现。标签名（tagName）是一个只读属性，返回元素的标签名称，通常返回的值都是大写的。

以下是一个具体的例子，演示了如何在一个点击事件中检查被点击元素的标签名：

typescript
// HTML 部分
<button id="myButton">点击我</button>

// TypeScript 部分
// 获取按钮元素
const button = document.getElementById('myButton');

// 添加点击事件监听器
button?.addEventListener('click', (event) => {
    // event.target 代表触发事件的元素
    // 断言 event.target 为 HTMLElement 类型，以便 TypeScript 能够识别 tagName 属性
    const target = event.target as HTMLElement;

    // 检查 tagName
    if (target.tagName === 'BUTTON') {
        console.log('点击了按钮!');
    } else {
        console.log('点击的不是按钮，而是:', target.tagName);
    }
});

在这个例子中，我们首先获取了页面中的按钮元素，并为其添加了一个点击事件监听器。当按钮被点击时，事件处理函数被触发，我们通过 event.target 获取到触发事件的元素，并将其断言为 HTMLElement 类型，这样 TypeScript 就能够识别 .tagName 属性了。之后，我们通过检查 tagName 是否为 'BUTTON' 来判断被点击的是否是按钮。如果是按钮，输出相应的信息；如果不是，输出被点击元素的标签名。

这种方法可以用于多种场景，比如你可能想要对不同类型的元素做出不同的响应，或者你需要过滤掉某些不应触发事件的元素。通过检查 tagName，你可以很灵活地控制事件处理的逻辑。