Event listeners and DOM interactions in modern Javascript explained with examples

Event listeners and their interaction with DOM is a very important part of Javascript. There has been many solutions and ways to deal with them and write the code. In this article we write some simple but modern and very useful examples.

Attach event listener

We most likely write the code to add and event to an element like this:

Const Element1 = document.querySeletor(#name);
Element1.addEventListener ("click", function() {
 //this function does stuff 
 });

Basically after defining the element, we use addEventListener method to attach the “event” and the action that it should do to the element. But this code adds the event only to one element. What if we had a few similar elements to be selectee?

Add the event to multiple elements

Using a forEach loop is the best way in modern ES6 code to add event listeners to multiple elements:

let elementsArray = document.querySelectorAll(".element");
 elementsArray.forEach(function(elem) {
     elem.addEventListener("click", function() {
         //this function does stuff
     });
 });

We used querySelectorAll to select all elements and put them into an array . Then simply loop through it and attach the event to each and every one of them. Therefore we don’t need to write the code for each element and save many lines of code.

Add event listener to element with anonymous array

Also if we only have a few different elements, we could apply the method directly to an array of them:

[ Element1, Element2 ].forEach(function(element) {
    element.addEventListener("click", function() {
       //this function does stuff
    });
 });

As an example we passed the elements to the array( we should define the elements of course) and then applied the event within the loop.

Using es6 to shorten the code

Typically the code is the same. Just using arrow function to save some code like below:

let elementsArray = document.querySelectorAll(".element");
elementsArray.forEach(el => el.addEventListener('click', function(){
  //console.log(this); refers to each array element
});

But remember we should not use arrow function for the function inside the addEventListener method like the code below:

let elementsArray = document.querySelectorAll(".element");
elementsArray.forEach(el => el.addEventListener('click',() => {
  //console.log(this); refers to window
}));

Use es5 code for the event’s function

In this case we don’t want an arrow function, because we need the keyword to reference the actual array elements that got clicked. That is now even more important as we have a whole bunch of them.

Practically as we talked about them before arrow function, the value of this is not rebound inside of the function. Therefore we don’t have access to the element. We get access tot he window. So “this” in the second case gives us the DOM window and not the element we expected to. Try it out in console and understand it.

© 2019
Azadeh Faramarzi

This site is created and maintined by Azadeh Faramarzi , A passionate developer, sport and code lover who loves to share and write when she has some time.