Friday , 17 November 2017
Home / Programming / JavaScript / UI Events – Advanced JavaScript Tutorial
UI Events
UI Events

UI Events – Advanced JavaScript Tutorial

UI events are events that aren’t specific to the document, but the window object. These events fire when something happens to the browser or window.

Loading Events

Loading events fire when the window has loaded all scripts, images, files and styles. There are also unloading events for when the user leaves the page. Update your document to this.

Let’s now update our script to this.

We have 3 events here. Let’s go over each one.

  • load – This event fires when all files have been loaded. You can have your script loaded before any file, but don’t have to worry about it executing until everything has been loaded.
  • beforeunload – If the user clicks a link or exits out of the site, then this event will fire. When a user does so, the browser will unload everything and delete any references created on that page. Before that happens, this event loads. This event is useful for when you need to do some cleaning.
  • unload – This event fires when everything has been completely unloaded. You should take note that almost any objects or files you had connections to are now non-existent.

You should know that most browsers will stop the alert message from running when the browser is unloading. If the alert boxes don’t come up, then don’t worry. It’s not you, it’s the browser. Even so, you can run a whole lot of operations here after the user has left.

Resize and Scroll

There are 2 other events called resize and scroll. Let’s look at the resize event first. Add this bit of code to your script.

The unfortunate thing about the resize event is that it’s not the same throughout all the browsers. Different browsers implement the resize event differently. Firefox, for example, will fire this event once the user has finished resizing the window. Other browsers will run this event while the user is resizing. A work around this is to create a time or check the width and height of the window to actually check changes.

You should also know this event sometimes fires when the browser is minimized or maximized.

Let’s check out the scroll event. This event fires whenever the user scrolls either up and down or left and right. This event fires continuously as long as the user is scrolling. Our document is pretty empty and doesn’t need to be scrolled. Go to lorem ipsum and generate some text. Copy that text and paste it into the document as many times as you need to until it exceeds the height.

http://www.lipsum.com/

Once that’s done, add this bit of code to your script.

You can try these 2 events in your browser now. You should know one thing though. Since both of these events tend to fire while the user is performing resizing and scrolling, then you must keep the code inside simple. If you’re doing complex algorithms or animations, then you’re really going to slow the performance of your site.

Conclusion

These events are pretty simple to use. They fire when changes to the window happen.

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