O event
é uma variável global window
e só ganha propriedades dentro do event handler, como o addEventListener
.
O setTimeout
é uma função global que não atribui à variável event
as propriedades do evento, logo, event
isolado dentro da função do setTimeout
não tem valor algum.
Mas antes é preciso saber que é sempre importante passar na função do event handler o primeiro parâmetro, que representa o evento disparado:
botao.addEventListener('click', (event) => {
↑
parâmetro
Isso porque versões menos recentes de navegadores (como o Firefox, por exemplo) não possuem a variável event
nativa, ou seja, o primeiro console.log(event.target);
já retornaria o erro event is not defined
, conforme explicado nesta outra resposta.
Logo, ao passar o evento como parâmetro da função do addEventListener
ela vira uma variável dentro da função e terá valor também dentro da função do setTimeout
:
const botao = document.querySelector('button');
botao.addEventListener('click', (event) => {
console.log(event.target);
setTimeout(function() {
console.log(event.target)
}, 500);
});
<button>Clique</button>
Por outro lado, se você não passar o evento como parâmetro do addEventListener
(o que não é recomendado, conforme expliquei mais acima), você poderia enviar a variável event
para a função do setTimeout
da seguinte forma, colocando event
após o tempo de 500
:
const botao = document.querySelector('button');
botao.addEventListener('click', () => {
console.log(event.target);
setTimeout(function(event) {
console.log(event.target)
}, 500, event);
});
<button>Clique</button>
this.event.target
target
of undefinedsetTimeout
não quer dizer nada ali, não tem ligação alguma com o event do botão.