事件侦听器目标在设置超时延迟后为空

Question

我正在做一个浏览器扩展，我想修改页面上的一些东西，但我运行遇到了这个问题。

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

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

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

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 的文档实际上提到了这一点：

The value of event.currentTarget is only available while the event is being handled. If you console.log() the event object, storing it in a variable, and then look for the currentTarget key in the console, its value will be null.

据我了解，在处理事件时 部分本质上应在事件处理函数中读作同步。

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

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

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 return 在处理时是一个有效值但是回调在 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)
    }

事件侦听器目标在设置超时延迟后为空

Event listener target is null after delay with set time out

javascript

addeventlistener