Phases of an Event

Reflect

Thinking about nodes and how the DOM is structured, after running the code below, which event listener will fire first when the page is clicked? Write out your answer and your explanation of why it will be in that order:

document.addEventListener('click', function () {
   console.log('The document was clicked');
});

document.body.addEventListener('click', function () {
    console.log('The document body was clicked');
});

Your reflection

Second function will fire first. Because, the target of the function is more specific than the first one.

Things to think about

Thank you for your response.

Event Phases

There are three different phases during the lifecycle of an event. They are:

  • the capturing phase
  • the at target phase
  • and the bubbling phase

And they actually follow the order above; first, it'scapturing, thenat target, and then the_bubbling_phase.

Most event handlers run during theat targetphase, such as when you attach a click event handler to the button. The event arrives at the button (itstarget), and there's only a handler for it right there, so the event handler gets run.

But sometimes you have a collection of items -- such as a list -- and want to have one handler cover every item (and still have the option of individual handlers for some items.) By default, if you click on a child item and a handler doesn't intercept the click, the event will "bubble" upward to the parent, and keep bubbling until something handles it or it hits the document.

Capturing, on the other hand, lets the parent intercept an event before it reaches a child.

Let's dig into these phases to see how they affect when events fire and the order they fire in!

The three event phases of an event: capturing, at target, and bubbling.

So of the three phases in an event, which one does the.addEventListener()method actually use? And, how can we change it?

Up until this point, we've only seen the.addEventListener()method called with_two_arguments, the:

  • event type
  • and the listener
document.addEventListener('click', function () {
   console.log('The document was clicked');
});

There's actually a_third_argument to the.addEventListener()method; the_useCapture_argument. From it's name, you'd think that if this argument were left out,.addEventListener()would default to using the_capturing_phase. This is an incorrect assumption!By default, when.addEventListener()is called with only two arguments, the method defaults to using the bubbling phase.

The code below uses.addEventListener()with only two arguments, so it will invoke the listener during the bubbling phase:

document.addEventListener('click', function () {
   console.log('The document was clicked');
});

However, in this code,.addEventListener()is called withthree arguments_with the third argument beingtrue(meaning it_should invoke the listener earlier, during the capturing phase!).

document.addEventListener('click', function () {
   console.log('The document was clicked');
}, true);

QUESTION 2 OF 3

Which of the phases is the following code set up for?

const items = document.querySelector('.quizzing-quizzes');
const el = items[1];

el.addEventListener('click', function () {
    console.log('You clicked on the 2nd quizzing-quizzes item!');
}, false);

  • the capturing phase

  • the at target phase

  • the bubbling phase

SUBMIT

Now that you have a little more knowledge about the "capturing", "at target", and "bubbling" phases, we're going to go back to the question at the beginning of this section.

QUESTION 3 OF 3

After running the code below and clicking on the page, two console.log messages will display in the console. Put the messages in the correct order.

document.addEventListener('click', function () {
   console.log('The document was clicked');
});

document.body.addEventListener('click', function () {
    console.log('The body element was clicked');
});

The body element was clicked.

The document was clicked.

ORDER OF MESSAGES

CONSOLE.LOG MESSAGE

First Message

Second Message

SUBMIT: First - the body element was clicked / Second - the document was clicked

The Event Object

Now that you know that event listeners fire in a specific order_and_how to interpret and control that order, it's time to shift focus to the details of the event itself.

When an event occurs, the browser includes anevent object. This is just a regular JavaScript object that includes a ton of information about the event itself. According to MDN, the.addEventListener()'s_listener_function receives:

a notification (an object that implements the Event interface) when an event of the specified type occurs

Up until this point, I've been writing all of the_listener_functions without any parameter to store this event object. Let's add a parameter so we_can_store this important information:

document.addEventListener('click', function (event) {  // ← the `event` parameter is new!
   console.log('The document was clicked');
});

Notice the neweventparameter that's been added to the listener function. Now when the listener function is called, it is able to store the event data that's passed to it!

💡 An "event" Is an "evt" Is an "e" 💡

Remember that a function's parameter is just like a regular variable. In the following example, I'm using a parameter with the nameevent.

const items = document.querySelectorAll('.quizzing-quizzes');
const el = items[1];

el.addEventListener('keypress', function (event) {
    console.log('You clicked on the 2nd quizzing-quizzes item!');
});

Instead ofevent, the parameter's name could just as easily be:

  • evt
  • e
  • theEvent
  • horse

The nameeventorevtdoes not provide any inherent meaning or special capabilities; there is nothing special to the name...it's just the name of the parameter. Feel free to give it any name that's informative/descriptive!

The Default Action

As we just looked at, the event object stores a lot of information, and we can use this data to do all sorts of things. However, one incredibly common reason that professionals use the event object for, is to prevent the default action from happening. That sounds like an odd thing to do, but let's explore this.

Think about an anchor link on a webpage. There are probably a couple dozen links on this page! What if you wanted to run some code and display some output when you click on one of these links. If you click on the link, it will automatically navigate you to the location listed in itshrefattribute: that's what it does by default.

What about a form element? When you submit a form, by default, it will send the data to the location in itsactionattribute. What if we wanted to validate the data before sending it, though?

Without the event object, we're stuck with the default actions. However, the event object has a.preventDefault()method on it that a handler can call to prevent the default action from occurring!

const links = document.querySelector('a');
const thirdLink = links[2];

thirdLink.addEventListener('click', function (event) {
    event.preventDefault();
    console.log("Look, ma! We didn't navigate to a new page!");
});

Recap

We covered a number of important aspects of events and event listeners in this section! We looked at:

  • the phases of an event:
    • the capturing phase
    • the at target phase
    • the bubbling phase
  • the event object
  • prevent the default action with .preventDefault()

Further Research

results matching ""

    No results matching ""