3

Não estou conseguindo acessar o event.target dentro da função setTimeout no código abaixo.

const botao = document.querySelector('button');

botao.addEventListener('click', () => {
  console.log(event.target);
  setTimeout(function(event) {
        console.log(event.target)        
    }, 500);

});

4
  • Tente this.event.target 24/06/2019 às 13:43
  • Ainda retorna como cannot get target of undefined 24/06/2019 às 13:44
  • Pq o event dentro do setTimeout não quer dizer nada ali, não tem ligação alguma com o event do botão.
    – LeAndrade
    24/06/2019 às 14:06
  • addEventListener('click', (event) => {o seu código...}) Faltou colocar como parâmetro do callback o event para o poder usar. 24/06/2019 às 14:09

2 Respostas 2

4

São eventos diferentes. O primeiro é o evento de clique, o segundo é evento do timeout; o segundo não possui um target, apenas o primeiro.

O que você está fazendo é o que chamamos de closure, onde uma função é definida com base no escopo atual da definição.

Para que funcione da maneira que você deseja, você deverá manter uma referência ao alvo do evento do clique em uma variável no mesmo contexto em que define a closure:

const botao = document.querySelector('button');

botao.addEventListener('click', event => {
  // Aqui, event refere-se ao evento do clique
  const target = event.target;
  
  setTimeout(function(event) {
      // Aqui, event refere-se ao evento do timeout
      console.log(target)        
  }, 500);
});
<button>Pressione-me</button>

Veja que target foi definido como referência ao target do evento do clique e utilizado dentro da closure.

2

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>

4
  • Eu entendo que ele tenha que ser passado como parâmetro da função para existir dentro do setTimeout, mas mesmo sem passar, ele é mostrado na linha superior então porque ele não é mostrado dentro do setTimeout? 24/06/2019 às 14:12
  • 1
    @Sam Não entendi sua resposta, se der console.log(e) dentro do setTimeout retorna undefined, ou seja, não está fazendo nada ali
    – LeAndrade
    24/06/2019 às 14:15
  • 1
    Rsrs.. peraí que vou corrigir
    – Meu ovo
    24/06/2019 às 14:17
  • sim, no setTimeout é uma função sem parâmetros rsrsrs 24/06/2019 às 14:17

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .