Why doesn’t Event exist inside the lower block?

Question

I’m having trouble accessing the event.target within the function setTimeout in the code below.

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

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

});

Answer 1

These are different events. The first is the click event, the second is the timeout; the second does not possess a target, only the first.

What you’re doing is what we call closure, where a function is defined based on the current scope of the definition.

• How Closures work in Javascript?

In order for it to work the way you want it to, you must keep a reference to the target of the click event in a variable in the same context as you set the 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>

See that target was defined as a reference to target click event and used within the closure.

Answer 2

The event is a global variable window and only gains properties within the Event Handler, like the addEventListener.

The setTimeout is a global function that does not assign to the variable event the event properties, logo, event isolated within the function of setTimeout has no value whatsoever.

But first we need to know that it is always important to pass on the function of Event Handler the first parameter, representing the triggered event:

botao.addEventListener('click', (event) => {
                                   ↑
                               parâmetro

This is because less recent versions of browsers (such as Firefox) do not have the variable event native, that is, the first console.log(event.target); would already return the error event is not defined, as explained in this other answer.

Therefore, when passing the event as a parameter of the addEventListener it becomes a variable within the function and will have value also within the function of the setTimeout:

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

<button>Clique</button>

On the other hand, if you do not pass the event as a parameter of addEventListener (which is not recommended, as explained above), you could submit the variable event for the function of setTimeout as follows, placing event after the time of 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>