事件偵聽器目標是 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)
    }