Previous | Table of Contents | Next

{ Events Continued. }

Objectives

By the end of this chapter, you should be able to:

  • Understand what the event object is
  • Utilize properties and methods in event object
  • Refactor code to minimize the amount of event listners

Data in the event object

When an event is triggered, we have access to a special object called the event object. Inside of this object we can access quite a few useful values. The event object itself is quite large, but here are two of its most important parts:

  • event.target - the target element of the event
  • event.preventDefault() - a function that prevents the default action. This is used commonly to stop a form submission from refreshing the page (which is the default action of a submit event). You don't need to worry too much about this right now.

To see just how large the event object is, save this HTML to a file, open it up in Chrome, and take a look in the console after clicking on the container:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script>
        document.addEventListener("DOMContentLoaded", function(){
            let container = document.getElementById("container");
            container.addEventListener("click", function(event){
                console.log("Let's look at the event object!", event);
            });
        });
    </script>
</head>
<body>
    <div id="container">
        Click on me!
    </div>
</body>
</html>

Capturing vs Bubbling

So far we have seen the addEventListener function take in two parameters: the name of the event and a callback function. But there is actually a third parameter we can pass in as a boolean called useCapture which determines if we use capturing or bubbling.

From MDN

Event bubbling and capturing are two ways of propagating events that occur in an element that is nested within another element, when both elements have registered a handle for that event. The event propagation mode determines the order in which elements receive the event.

It's very rare that you'll need to pass in this third parameter (in fact, it's possible you'll get through our entire curriculum without doing it!). But it's good to know that the option is there and what it does.

You can read more about capturing and bubbling here and here.

Accessing the value of whatever is clicked

When we listen for events, we sometimes want to know exactly what element triggered the event. We can do this using the target property on the event object, which is given to us when we use addEventListener.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <ul> Ingredients
        <li>Sugar</li>
        <li>Milk</li>
        <li>Eggs</li>
        <li>Flour</li>
        <li>Baking Soda</li>
    </ul>
</body>
</html>

Let's access each value using the event.target property!

let listItems = document.querySelectorAll('li');

for(let i=0; i<listItems.length; i++){
    listItems[i].addEventListener("click", function(event){
        alert("You just clicked on " + event.target.innerText);
    });
}

Adding event listeners to parent elements

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <ul> Ingredients
        <li>Sugar</li>
        <li>Milk</li>
        <li>Eggs</li>
        <li>Flour</li>
        <li>Baking Soda</li>
    </ul>
</body>
</html>

In order to alert the text of whatever element we looked for, we can either listen on the parent or listen on each child. Let's examine both options:

// OPTION 1: listening on the parent
let ul = document.querySelector("ul");

// how many event listeners?
ul.addEventListener("click", function(event){
    alert("You just clicked on " + event.target.innerText);
});

// OPTION 2: listening on the children
let listItems = document.getElementsByTagName("li");

// how many event listeners?
for(let i=0; i<listItems.length; i++){
    listItems[i].addEventListener("click", function(event){
        alert("You just clicked on " + event.target.innerText);
    });
}

So which one do you think is more efficient? If you guessed the one with fewer listeners, you are right! It's always best to have fewer event listeners, as they consume memory and are difficult to manage when there are many of them.

When you're ready, move on to Local Storage

Continue

Creative Commons License