The Thinking Behind Simplifying Event Handlers

Events are used to respond to user clicks, keyboard focus links, and change form text. When I first started learning JavaScript, I wrote complex event listeners. Recently, I've learned how to reduce the amount of code and the number of listeners.

Let's start with a simple example: a few draggable blocks. We want to show the user the colored squares they dragged.

<div draggable="true">
    R
  </div>
  <div draggable="true">
    Y
  </div>
  <div draggable="true">
    G
  </div>
<p>Drag a block</p>

Intuitive approach

When I first started learning JavaScript events, I wrote a separate event listener function for each element. This is a common pattern because it is the easiest way to get started. We want each element to have a specific behavior, so we can use specific code for each element.

 document.querySelector('#red').addEventListener('dragstart', evt => {
  document.querySelector('#dragged').textContent = 'Dragged red';
});

document.querySelector('#yellow').addEventListener('dragstart', evt => {
  document.querySelector('#dragged').textContent = 'Dragged yellow';
});

document.querySelector('#green').addEventListener('dragstart', evt => {
  document.querySelector('#dragged').textContent = 'Dragged green';
});

Reduce duplicate code

The event listeners in this example are very similar: each function displays some text. This duplicate code can be collapsed into a helper function.

 function preview(color) {
  document.querySelector('#dragged').textContent = `Dragged ${color}`;
}

document
  .querySelector('#red')
  .addEventListener('dragstart', evt => preview('red'));
document
  .querySelector('#yellow')
  .addEventListener('dragstart', evt => preview('yellow'));
document
  .querySelector('#green')
  .addEventListener('dragstart', evt => preview('green'));

This is more concise, but still requires multiple functions and event listeners.

Leverage Event objects

Event objects are the key to simplifying listeners. When the event listener is called, it also sends the Event object as the first parameter. This object contains some data to describe the event that occurred, such as when the event occurred. To simplify our code, we can use the evt.currentTarget property, where currentTarget refers to the element that attaches the event listener. In our example, it will be one of three colored squares.

 const preview = evt => {
  const color = evt.currentTarget.id;
  document.querySelector('#dragged').textContent = `Dragged ${color}`;
};

document.querySelector('#red').addEventListener('dragstart', preview);
document.querySelector('#yellow').addEventListener('dragstart', preview);
document.querySelector('#green').addEventListener('dragstart', preview);

Now there is only one function instead of four functions. We can reuse the exact same function as an event listener, while evt.currentTarget.id will have different values ​​depending on the element that triggered the event.

Use event bubble

The last change is to reduce the number of lines in the code. Rather than attaching an event listener to each block, attach a single event listener to an element containing all the colored blocks.

When triggered, an event starts with the element (one of the squares) of the event originating. However, it won't stop there. The browser goes to each parent element of the element and calls any event listener on it. This will continue to the root element of the document (in HTML Label). This process is called "bubble", because events rise like bubbles into the document tree. Attaching an event listener to the section element will cause the focus event to bubble from the dragged colored square to the parent element. We can also take advantage of the evt.target property, which contains the element that triggers the event (one of the squares) instead of the element that attaches the event listener ( section element).

 const preview = evt => {
  const color = evt.target.id;
  document.querySelector('#dragged').textContent = `Dragged ${color}`;
};

document.querySelector('section').addEventListener('dragstart', preview);

Now we have reduced many event listeners to only one! For more complex code, it will work better. By leveraging Event objects and bubbling, we can control JavaScript events and simplify the code of event handlers.

What about click events?

evt.target is very effective with events such as dragstart and change , where only a few elements can receive focus or change input.

However, we usually want to listen for click events so that we can respond to the user clicking a button in the application. The click event is triggered for any element in the document, from a large div to a small span.

Let's change our draggable colored squares to clickable.

<div draggable="true">
    R
  </div>
  <div draggable="true">
    Y
  </div>
  <div draggable="true">
    G
  </div>
<p>Click on a square</p>

 const preview = evt => {
  const color = evt.target.id;
  document.querySelector('#clicked').textContent = `Clicked ${color}`;
};

document.querySelector('section').addEventListener('click', preview);

When testing this code, be aware that sometimes "Clicked" is not attached, not when clicking on a square. The reason it doesn't work is that each block contains a clickable<span></span> elements, not draggable<div> element. Since span does not have an ID set, the <code>evt.target.id property is an empty string. We only care about the colored squares in the code. If we click somewhere inside the square, we need to find the parent square element. We can use element.closest() to find the parent element closest to the clicked element.

 const preview = evt => {
  const element = evt.target.closest('div[draggable]');
  if (element != null) {
    const color = element.id;
    document.querySelector('#clicked').textContent = `Clicked ${color}`;
  }
};

Now we can use a single listener for click events! If element.closest() returns null, it means that the user clicks somewhere outside the colored square, and we should ignore the event.

More examples

Here are some other examples that demonstrate how to take advantage of a single event listener.

List

A common pattern is to have an interactive list of projects where new projects are dynamically inserted using JavaScript. If we attach an event listener to each project, the code must handle the event listener every time a new element is generated.

<div id="buttons-container"></div>
<button id="add">Add a new button</button>

 let buttonCounter = 0;
document.querySelector('#add').addEventListener('click', evt => {
  const newButton = document.createElement('button');
  newButton.textContent = buttonCounter;

  // Create a new event listener every time you click "Add new button" newButton.addEventListener('click', evt => {

    // When clicked, record the number of the button being clicked.
    document.querySelector('#clicked').textContent = `Clicked button #${newButton.textContent}`;
  });

  buttonCounter ;

  const container = document.querySelector('#buttons-container');
  container.appendChild(newButton);
});

By leveraging bubbles, we can use a single event listener on the container. If we create many elements in the application, this reduces the number of listeners from n to two.

 let buttonCounter = 0;
const container = document.querySelector('#buttons-container');
document.querySelector('#add').addEventListener('click', evt => {
  const newButton = document.createElement('button');
  newButton.dataset.number = buttonCounter;
  buttonCounter ;

  container.appendChild(newButton);
});
container.addEventListener('click', evt => {
  const clickedButton = evt.target.closest('button');
  if (clickedButton != null) {
    // When clicked, record the number of the button being clicked.
    document.querySelector('#clicked').textContent = `Clicked button #${clickedButton.dataset.number}`;
  }
});

Form

Maybe there is a form with many inputs and we want to collect all user responses into a single object.

Name:
Mail:
password:

let responses = {
  name: '',
  email: '',
  password: ''
};

document
  .querySelector('input[name="name"]')
  .addEventListener('change', evt => {
    const inputElement = document.querySelector('input[name="name"]');
    responses.name = inputElement.value;
    document.querySelector('#preview').textContent = JSON.stringify(responses);
  });
document
  .querySelector('input[name="email"]')
  .addEventListener('change', evt => {
    const inputElement = document.querySelector('input[name="email"]');
    responses.email = inputElement.value;
    document.querySelector('#preview').textContent = JSON.stringify(responses);
  });
document
  .querySelector('input[name="password"]')
  .addEventListener('change', evt => {
    const inputElement = document.querySelector('input[name="password"]');
    responses.password = inputElement.value;
    document.querySelector('#preview').textContent = JSON.stringify(responses);
  });

Let's use the parent instead<form></form> A single listener on the element.

 let responses = {
  name: '',
  email: '',
  password: ''
};

document.querySelector('form').addEventListener('change', evt => {
  responses[evt.target.name] = evt.target.value;
  document.querySelector('#preview').textContent = JSON.stringify(responses);
});

in conclusion

Now we know how to leverage event bubbles and event objects to simplify complex event handler chaos to several…and sometimes even reduce to one! Hope this article helps you think about event handlers from a new perspective. I know that after spending a lot of time writing duplicate code to do the same thing in my early development career, it was a revelation for me.