事件侦听器目标是 null 延迟后设置超时

Question

我正在制作浏览器扩展程序，我想修改页面上的一些内容，但遇到了这个问题。

然后事件侦听器被触发'plug-stats'尚未由我无法控制的页面上的脚本创建并给我未定义，所以我稍后尝试阅读它，但后来我遇到了问题。

第一个控制台日志会给我一个预期的目标，但我还不能用它做任何事情，因为'plug-stats'还没有创建。 第二个控制台日志给了我 null。

为什么会发生这种情况以及如何解决它的任何想法？

let perk = document.querySelectorAll('.ItemPerksList-m_plug-O8be3')
perk.forEach(element => {
    element.addEventListener('click', add_perk_description);
});

function add_perk_description(event){
    console.log(event.currentTarget)
    setTimeout(() => {
        console.log(event.currentTarget)
        let html = event.currentTarget.getElementsByClassName('plug-stats')[0]
    }, 1)
}

Answer 1

尝试此代码将事件作为参数传递给 settimeout-

function add_perk_description(e){
    console.log(e.target)
    setTimeout(function(event) {
        console.log(event.target)
    },500, e);
}

Answer 2

这是预期的行为， Event.currentTarget的文档实际上提到了这一点：

event.currentTarget 的值仅在处理事件时可用。 如果您 console.log() 事件 object，将其存储在变量中，然后在控制台中查找 currentTarget 键，其值将是 null。

据我了解，在处理事件的同时部分本质上应该在事件处理程序 function 中同步读取。

https://developer.mozilla.org/en-US/docs/Web/API/Event/currentTarget

您仍然可以保留对当前目标的引用，例如通过将其同步分配给局部变量 - 然后在setTimeout()回调 function 中引用此局部变量。

function add_perk_description(event){
    console.log(event.currentTarget)
    let currentTarget = event.currentTarget
    setTimeout(() => {
        console.log(currentTarget)
        let html = currentTarget.getElementsByClassName('plug-stats')[0]
        }
    }, 1)
}

Answer 3

第二个控制台为您提供NULL ，因为 event.currentTarget 在处理时返回一个有效值，但回调在 1 毫秒后运行，这就是它显示 Null 的原因。

试试这个

let perk = document.querySelectorAll('.ItemPerksList-m_plug-O8be3')
    perk.forEach(element => {
        element.addEventListener('click', e => {
            add_perk_description(e)
        })
    })

    function add_perk_description(event){
        console.log(event.currentTarget);
        **let {currentTarget}=e;**
        setTimeout(() => {
            console.log(currentTarget);
            let html = e.currentTarget.getElementsByClassName('plug-stats')[0]
            }
        }, 1)
    }