Events

An event is a signal that something happened on the page: the user clicked a button, typed text, pressed a key. JavaScript can subscribe to an event and run code in response. This is what makes a page interactive.

Click

The addEventListener() method takes the name of an event and a function to call when it happens. Click the button in the example:

<button>Click me</button>
 
<script>
  const button = document.querySelector('button');
 
  button.addEventListener('click', () => {
    console.log('The button was clicked');
  });
</script>

The function runs on every click. Such a function is called an event handler.

Changing the page on an event

A handler usually changes something on the page. Here it increments a counter and updates the button's text:

<button>Clicked: 0</button>
 
<script>
  const button = document.querySelector('button');
  let count = 0;
 
  button.addEventListener('click', () => {
    count++;
    button.textContent = `Clicked: ${count}`;
  });
</script>

The event object

The handler receives an object with details about the event. Its target property is the element the event happened on:

<button>Save</button>
<button>Cancel</button>
 
<script>
  for (const button of document.querySelectorAll('button')) {
    button.addEventListener('click', (event) => {
      console.log(event.target.textContent);
    });
  }
</script>

Text input

The input event fires on every change to a field. The field's current text is in its value property:

<input placeholder="Your name">
<p id="greeting"></p>
 
<script>
  const input = document.querySelector('input');
  const greeting = document.querySelector('#greeting');
 
  input.addEventListener('input', () => {
    greeting.textContent = `Hello, ${input.value}!`;
  });
</script>

Keyboard

The keydown event fires when a key is pressed. Which key it was is stored in event.key: a letter, 'Enter', 'Escape', 'ArrowUp' and so on. Click into the field and press some keys:

<input placeholder="Press Enter">
 
<script>
  const input = document.querySelector('input');
 
  input.addEventListener('keydown', (event) => {
    if (event.key === 'Enter') {
      console.log(`Sent: ${input.value}`);
    }
  });
</script>

Removing a listener

A handler can be removed with removeEventListener() — it needs the very same function, so you keep it in a variable. And if a handler is needed only once, pass the { once: true } option:

<button>Get a bonus</button>
 
<script>
  const button = document.querySelector('button');
 
  button.addEventListener('click', () => {
    console.log('Bonus received');
  }, { once: true });
</script>

However many times you click, the message appears only once.

Common mistake

addEventListener() takes the function itself, not the result of calling it. button.addEventListener('click', handle()) runs handle immediately, once, and nothing happens on click. The correct form has no parentheses: button.addEventListener('click', handle).

Thanks for reading!