How IIFE and eventListeners work togheter?

Question

I am writing a weather app in js vanilla for exercise in functional programming.

In the home page you have a simple input tag where you put the name of the city you want to have the forecasts. When you hit the enter button the IIFE (in the snippet) gets fired and actually starts the entire app.

Now I have some questions related to that IIFE because it works but I'm not really sure of how that code actually work (and maybe it is written with a bad baaaad baaaaaaaad practice):

how does IIFE knows that a key is being un-pressed? Ok, I have registered an event on the input tag but it is written inside the IIFE. So how the IIFE knows that an event has been fired? I mean, I'm not passing any event to that function. The registration of the event shouldn't that be a step before (out of) the IIFE?

I think it's clear that I'm a little confused.

 (() => { const input = document.querySelector('.banner__input'); input.addEventListener("keyup", event => { event.preventDefault(); if (event.keyCode == 13) { console.log('The city is: ' + input.value); currentWeather(); threeHoursForecasts(); toggleForecasts(); } }); })(); 

 And this is the input tag: <input type="text" class="banner__input" value="Milan" autofocus onfocus="this.value = this.value;"> 

Answer 1

How IIFE and eventListeners work togheter?

They more or less do not.

An IIFE in this context does nothing except provide a scope for local variables and constants (in this case input ) to exist in.

The only thing the IIFE does is prevent const input from becoming a global.

---

how does IIFE knows that a key is being un-pressed?

It doesn't.

When the keyup event fires, the function that is bound as the event listener is called by the browser.

The IIFE has already run by that stage. All that is left of it is the scope.

Ok, I have registered an event on the input tag

Yes

but it is written inside the IIFE

Not really relevant.

So how the IIFE knows that an event has been fired?

It doesn't. The event handler function you passed to addEventListner is called by the browser.

I mean, I'm not passing any event to that function.

No, the browser passes the event.

Answer 2

how does IIFE knows that a key is being un-pressed? Ok, I have registered an event on the input tag but it is written inside the IIFE. So how the IIFE knows that an event has been fired? I mean, I'm not passing any event to that function. The registration of the event shouldn't that be a step before (out of) the IIFE?

The IIFE doesn't know anything about th event. It's just a function that runs immediately and then exits. So it simply runs the code in its body, and that's all.

The event handler is the only thing concerned with the event.

event => {
  event.preventDefault();
  if (event.keyCode == 13) {
    console.log('The city is: ' + input.value);
    currentWeather();
    threeHoursForecasts();
    toggleForecasts();
  } 
}

This is the function you passed to .addEventListener . Internally, it becomes associated with the input element so the event system can invoke it when that event occurs.

---

Note that you do not need an IIFE here. You can reference the input using this or event.currentTarget .

document.querySelector('.banner__input')
  .addEventListener("keyup", event => {
    event.preventDefault();
    if (event.keyCode == 13) {
      console.log('The city is: ' + this.value);
      currentWeather();
      threeHoursForecasts();
      toggleForecasts();
    }   
  });

---

Also note that even if you did want to keep a reference to input or something else, you still don't need an IIFE. You can just use a block-statement as long as you use let or const to declare the variable.

{ // The `input` is scoped to this block
  const input = document.querySelector('.banner__input');

  input.addEventListener("keyup", event => {
    event.preventDefault();
    if (event.keyCode == 13) {
      console.log('The city is: ' + input.value);
      currentWeather();
      threeHoursForecasts();
      toggleForecasts();
    }   
  });
}

Answer 3

When you hit the enter button the IIFE (in the snippet) gets fired

No. The IIFE is invoked - as its name says - immediately when the script is loaded. In fact the IIFE is not necessary at all, you could simply have written

document.querySelector('.banner__input').addEventListener("keyup", event => {
  event.preventDefault();
  if (event.keyCode == 13) {
    console.log('The city is: ' + this.value);
    currentWeather();
    threeHoursForecasts();
    toggleForecasts();
  } 
});

with exactly the same effect.

How does IIFE knows that a key is being un-pressed? Ok, I have registered an event on the input tag but it is written inside the IIFE.

The IIFE doesn't know. The callback function that you passed to addEventListener will - that is the one that will get called. addEventListener is doing the registration stuff.

I mean, I'm not passing any event to that function.

Yes, the event does come from the DOM when the event happens.