Friday , 17 November 2017
Home / Programming / JavaScript / Event Management – Advanced JavaScript Tutorial
Event Management
Event Management

Event Management – Advanced JavaScript Tutorial

This tutorial is based around event management. Just like anything else, creating events takes up memory. Creating multiple events can really slow the performance of your website. Let’s take a look at a couple of ways to still have all the events you want while still keeping your site running in tip top shape!

Let’s update the body tags in your document to this.

We have 2 links with IDs. Let’s clear out our script and add this bit of code.

This is normally how you would do it. However, this is inefficient and takes up a lot more memory then we actually need. To keep the same effects, but use less memory, then we use something called event delegation.

Event Delegation

Event delegation is when you have 1 event for 1 type to handle all situations. Update your script to this.

First, we grab the div tag with the ID container. Then, we add an event handler with the type click. Inside the event is where the magic happens. We first need to grab the target. The target is the element that fired the event. Even though the event is assigned to the container, there can be multiple elements inside the container such as our links. Once we grab the target we then grab the ID of that target.

Next, we check if the id is equal to link-1 or link-2. Depending on which it is, then the appropriate block of code executes. Another possible target is the container itself. In this case, nothing will happen, but the event will still fire.

There’s one last thing we can do to improve the performance of our site. This is by removing events. Update your script to this.

We’re doing the same thing here. However, we’re using a real function instead of an anonymous function. This is so we can remove the event handler. Even though the user is being redirected to a new site, the event handler is still available in the browser. You should ALWAYS clean up everything. This includes objects and events. We remove the event handler in the first if statement, but not in the second condition statement. This is because the second condition prevents the redirect from happening. So, there is no need to remove the event handler just yet.

Conclusion

You should always manage your events with care. Use event delegation when possible and make sure to remove events when appropriate. With these simple techniques you can seriously optimize the performance of your site. For more information on events, 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