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

Event Object – Advanced JavaScript Tutorial

The event object is passed into your function whenever an event occurs. This object contains information about the event and even allows you to change how the event phases flow.

We’ll be working with our previous example. Update your script to this.

Our functions have been updated so that we can reference the event object. The event parameter will contain our event object. You don’t have to do anything. JavaScript will automatically pass this in for you.

There are a couple of properties and methods you can use in the event object. In the alertMessage() function, you’ll find we’re alerting the event type. The type property contains the event type. Refresh your page and click on the div1 box.

Update your script to this.

We’re doing a couple of things here. First, we apply the second event listener to the document instead to the div1 tag. We update the alertMessage2() function to reflect these changes. Next, we update the alertMessage() function to use a method in the event object called stopPropagation().

If you refresh your page, then you should be able to click ANYWHERE in the document and get a message. However, if you click on the div1 tag, then you should see only 1 alert message. Why? Isn’t the div1 tag part of the document? Well, it is. The stopPropagation() method will stop the bubble or capture phase from occurring. Hence stopping all other events from firing.

Prevent Defaults

Update the HTML in your<body> tags to this.

We create a simple link with the ID myLink. Next, let’s update the script to this.

Like always, we grab our link and then add a click event to it. However, we use a method called preventDefault(). This method will prevent the default action of an event. Your browser also adds events to certain objects. Such as a link. You can can actually prevent the link from redirecting using this method. If you refresh your page, then you should be able to click the link without being redirected.

Conclusion

The event type object comes with a handful of properties and methods to use. In the next couple of tutorials we’ll explore different event types and learn how to use the event object more. For more information about the event object, then go here.

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

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