Monday , 20 November 2017
Home / Programming / JavaScript / Event Handlers – Advanced JavaScript Tutorial
Event Handlers
Event Handlers

Event Handlers – Advanced JavaScript Tutorial

If you’ve seen my events tutorial in my JavaScript basics tutorial series, then you already know how to use events. There’s another way of using events with event handlers.

Before we begin, let’s update the <body> tags in our document to this.

We just have a simple button in our document with the ID btn. To add an event, you use the addEventListener() method. It has 3 parameters. The event type, the function to execute, and whether or not to use capture phase or bubble phase. I’ll discuss what those are soon.

Let’s update our script to this.

In the above code, we listen for the click type. We use the addEventListener() method to add this event handler. We use an anonymous function to alert a simple message. Lastly, we set the phase to bubble.

Let’s start with the types. You don’t use the attribute names for the types in the first parameter. Instead, you use their formal name. Here’s a list of all event types available to use in the addEventListener() method.

Type

Description

click Runs when a user clicks on an element.
dblclick Runs when a user double clicks on an element.
mousedown Runs when a user presses on an element.
mouseup Runs when a user releases their mouse over an element.
mouseover Runs when a user’s mouse hovers over an element.
mousemove Runs when a user’s mouse hover’s over an element and is currently moving it around the element.
mouseout Runs when a user’s mouse moves away from the element.(must be placed on the element first before this can run.)
dragstart Runs when a drag starts.
drag Runs when a drag is occuring. This event fires right after the dragstart event.
dragenter Runs when the user drags onto an element while still dragging.
dragleave Runs when the user leaves the element it was dragging on.
dragover Runs when the user drags over an element.
drop Runs when the user dropped the drag.
dragend Runs when the dragging event is completed.
keydown Runs when any key on the keyboard is pressed.
keypress Runs when any key on the keyboard is pressed and still being pressed.
keyup Runs when a key is released from the keyboard after being pressed.
load Runs when all elements, images, and the document has finished loading. If applied to an element, then it fires when all the content inside it has been loaded.
unload Runs when any content is removed from the current document or element it’s applied to.
abort Runs when an image or object is canceled before it can be completely loaded.
error Runs when an image or object was loaded unsuccessfully.
resize Runs when the document has been resized.
scroll Runs when the document’s view was scrolled.
select Runs when the user selects text from a form field such as an input field or textarea.
change Runs when an input field has changed value after the user clicks away from the field.
submit Runs when a form is submitted.
reset Runs when a form is reset.
focus Runs when a user is currently focused on an input field or focusable elements.
blur Runs when a user loses focus on the current element or input field.

Phew! This is a handful of event types you can listen for. Let’s take a look at phase types now. There are 2 types of phases. Bubble and Capture. When an event occurs, your browser will determine the flow of events to execute.

For example, let’s update the <body> tags to this.

We simply have a div tag inside of a div tag. For visual purposes, let’s add some styles to these 2 elements. In your <head> tags, add these styles.

This just makes our div tags into boxes with different color backgrounds. The myDiv2 tag has a background of blue and the myDiv1 has a background of red. myDiv2 is inside myDiv1.

Let’s take a look at our script now. Clear your script and add this bit of code.

Alright, what’s going on here is simple. We grab our 2 div tags by their IDs and then attach a click event to each one. Each one will alert a message indicating which one you’ve clicked. As usual, we set the third parameter to false.

By setting the third parameter to false, you’re telling JavaScript you would like the bubble phase. Refresh your page and click the blue box. Since div2 is inside div1, then both messages will display. However, the order depends on the phase. A bubble phase starts from the inner element to the document element. Here’s the order in which the events are fired.

  1. Div2
  2. Div1
  3. <body>
  4. document

This is what a bubble phase is. If the element clicked has parent elements with events on them as well. Then they are executed last. A capture phase is the complete opposite. Change the third parameter in the addEventListener() methods to true. Click on the blue box and you should see the event for div1 execute first! Followed by the alert message for div2.

It is better to use bubble phase flows over capture phase flows. It really depends on your project. The popular choice is bubble phase.

Removing Event Handlers

Let’s finish this tutorial with learning how to remove event handlers. Update your script to this.

To remove the event handler, you simply use the removeEventListener() method. The parameters in this method must MATCH THE EXACT same arguments passed in the addEventListener(). If you refresh your page, you’ll see that our event still hasn’t been removed. Why?

This is one of those rare cases where anonymous functions aren’t  suitable for a situation. Anonymous functions are unique and therefore, you can’t call the same anonymous function in 2 different places. The anonymous function in one piece of code is different from another. So, how do we get around this? Simple, we just create a function and call that instead. Update your script to this.

Our second parameter calls a regular function instead of an anonymous function. You’ll notice we omit the () after the function name. You don’t need to add them. By doing this, we successfully removed the event from our element!

Advantage of using Event Handlers

There are 2 advantages to using event handlers. One, you get the option of choosing bubble phases or capture phases. Two, you get to add multiple events to the same event. For example, update your script to this.

We now have 2 click events attached to the same element. You can add as many events as you want to an element. Even if they’re the same.

Conclusion

Events in JavaScript are powerful and you should use them wisely. For more information about event handlers, then go here.

https://developer.mozilla.org/en-US/docs/Web/API/EventTarget.addEventListener

About Jasko Koyn

Check Also

Try-Catch Statement

Try-catch Statement – Advanced JavaScript Tutorial

The try-catch statement is a unique way to handle errors. When errors occur, usually it …

Leave a Reply

Your email address will not be published. Required fields are marked *

ULTIMATE WORDPRESS DEVELOPMENT COURSE
Want to learn how to create your own custom WordPress plugins and themes? Check out my course!
Get 93% off my course. You'll also learn how to integrate WooCommerce and BuddyPress into your projects. This is a limited time offer
Yes, I would like to get 93% off your course!
No Thanks!
close-link