如何在addEventListener上键入currentTarget

Question

我使用这个代码

document.addEventListener('click', (event) => {
const { className, id, src = null, href = null } = event.currentTarget as HTMLElement;
console.log(className, id, src, href);
});

这里，currentTarget可以是任何东西，div、按钮、锚点等。我不能将currentTarget分配为HTMLElement，因为类型def(href和src(中缺少一些属性

作为一种变通方法，我目前正在像这个一样扩展HTMLElement

interface CustomHTMLElement extends HTMLElement {
target?: string;
href?: string;
src?: string;
}

我的变通方法是最好的解决方案还是应该使用枚举类型(HTMLDivElement|HTMLButtonElement|HTMLAnchorElement|…(？还是别的什么？

Codesandbox

Answer 1

由于您的事件可以是任何东西，因此您不能在这里做任何事情。

访问特定属性时，必须使用instanceof检查currentTarget。

document.addEventListener('click', (event) => {
if (event.currentTarget instanceof Element) {
const { className, id } = event.currentTarget;
const src = (event.currentTarget instanceof HTMLImageElement && event.currentTarget.src) || null;
const href = (event.currentTarget instanceof HTMLAnchorElement && event.currentTarget.href) || null;
console.log(className, id, src, href);
}
});

然而，在这里，href和src可以为null，因为它们可能不存在于其他元素上。

Answer 2

如果你的currentTarget可以是任何东西，并且你不需要访问任何属性，那么就把它设为any。

如果你需要为某些类型做一些操作，你可以这样做：

if (event.currentTarget instanceof HTMLAnchorElement) {
// You can use: event.currentTarget.href
}