Event listener target is null after delay with set time out

Question

I am making a browser extension and I want to modify some things on the page but I run into this problem.

Then event listener gets triggered 'plug-stats' is not yet created by script on the page I can't control and gives me undefined so I tried to read it a little bit later but then I run into a problem.

First console log will give me a target as expected but I can't do anything with it yet because 'plug-stats' were not yet created. Second console log gives me null.

Why is this happening and any ideas on how can I fix it?

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

try this code pass the event as parameter to settimeout-

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

Answer 2

This is expected behaviour, the documentation for Event.currentTarget actually mentions this:

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.

The while the event is being handled part should essentially be read as synchronously within the event hanlder function as I understand.

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

You could still keep a reference to the current target for instance by synchronously assigning it to a local variable - and then referring to this local variable in the setTimeout() callback 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

Second Console gives you a NULL because event.currentTarget return a valid value at the time of being handled but callback runs after a 1 milliSeconds that's the reason it shows Null.

Try out this

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)
    }