Friday , 21 September 2018
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

Audio

Audio – Advanced JavaScript Tutorial

The video and audio objects both have the same events, properties and methods. So, you …

Leave a Reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.

ULTIMATE NODE JS WITH SQL COURSE
Want to learn how to create web applications with Node.js and SQL? Check out my course!
Get 93% off my course. You'll also learn how to build real world applications using Node and SQL. This is a limited time offer
Yes, I would like to get 93% off your course!
No Thanks!
close-link