event.target is null in Chrome on img

[dotnetCarpenter]

Version

2.5.3

Reproduction link

https://jsbin.com/jafufah/1/edit?html,js,console,output

Steps to reproduce

Only in Chrome (61.0.3163) and sometimes Safari (11.0.1).

1. Open link to jsbin
2. Click Run with JS
3. See that the console first prints a reference of event.target and then null for the same property.

What is expected?

In Firefox, Edge and IE11 the event.target is never null.

What is actually happening?

event.target is null if event is stored in variable until next tick.

---

I'm not sure if this is a bug in Vue.js or in Chrome but I thought more eyes on the matter will help to clarify.

I first saw this inside a nuxt.js application but it's easy to reproduce in just vue.js, so I guess it's either in vue core or in Chrome (blink/webkit).

I've done the same with an <object> load handler and this has never happen - it's specific to the <img> element or the size of the file to load.

[posva]

it's not a bug: you have no guarantee for the event to be valid in an asynchronous callback after it is used. So basically you have to save whatever you need, in your case, target, and use that instead of the event variable directly

[dotnetCarpenter]

@posva Do you have any documentation for that statement? I don't think you're wrong, I just have never seen or heard that before.

[posva]

I couldn't find it 🙁
But, you can see it here, with no Vue: https://jsbin.com/danuxohoga/1/edit?html,js,console,output

[dotnetCarpenter]

I was searching for somewhere that have any kind of documentation of DOM events life-span but found nothing. Your jsbin will be the crown example for thousands, to link to from SO ;)

Seriously, last time I had this issue was in a hybrid VM called Titanium, where all elements mapped to Java or Object-C counter parts and these would disappear if the VM deemed them unused. I never thought I would see it in a browser. But today was the day! 🎉 💩

[schmoove]

Solution is to use the native onload event instead, like this:

<img
    :onload="onImageLoaded"
    :onerror="onImageError"
    :src="imageUrl"
/>

[dotnetCarpenter]

@schmoove I'm not sure that is relevant to the issue here. The issue being that a reference to target on an event will disappear (is set to null) after a while (the examples use setTimeout(/* function */, 0)), in Blink browsers (Chrome, Edge, Opera etc).

ev => {
    const event = ev // ev.target : HTMLElement
    setTimeout(() => {
        console.log(ev.target) // <- null
    }, 0)
}

Regardless of how you obtain the reference (onload in HTML, addEventListener via vue or other) it will disappear. Perhaps there are ways to store the reference, probably by direct storing the reference in a variable, I do not remember as this was 4 years ago ;)

ev => {
    const t= ev.target // ev.target : HTMLElement
    setTimeout(() => {
        console.log(t) // <- HTMLElement
    }, 0)
}

[playsetler]

@schmooveЯ не уверен, что это имеет отношение к проблеме здесь. Проблема в том, что ссылка targetна событие исчезает (установлено на null) через некоторое время (в примерах используется setTimeout(/* function */, 0)) в браузерах Blink (Chrome, Edge, Opera и т. д.).

ev => {
    const event = ev // ev.target : HTMLElement
    setTimeout(() => {
        console.log(ev.target) // <- null
    }, 0)
}

Независимо от того, как вы получите ссылку ( onloadв HTML, addEventListenerчерез vue или другое), она исчезнет. Возможно, есть способы сохранить ссылку, возможно, прямым сохранением ссылки в переменной, я не помню, так как это было 4 года назад ;)

ev => {
    const t= ev.target // ev.target : HTMLElement
    setTimeout(() => {
        console.log(t) // <- HTMLElement
    }, 0)
}

did you solve this problem?