Search within TutorialsPark

Javascript : Window or Frame Events


Use Events to work with Windows and Frames.


Javascript Events : Windows and Frames.

The window object has defined a lot of events, which are defined in some detail in the table below.

These events can be handled via the <body> element , but the support is a bit iffy, hence using window is the most reliable way.

Table : Window Object Events.

Name Description
onabort Id triggered when the loading of a document or resource is aborted.
onafterprint Triggered after the user has printed the document.
onbeforeprint It get triggered when the Window.print() method is called, prior to the user being presented with the print options
onerror Is triggered when there is an error loading a document or resource.
onhashchange Gets triggered when the has fragment changes
onload Triggered when the loading of a document or resource is complete
onpopstate Triggered to provide a state object associated with the browser history.
onresize Triggered when the window is resized
onunload Triggered when the document is unloaded from the browser/window

Javascript Window Events : onLoad and onUnLoad Event

The event handler onload is invoked on the occurence of a load event.

A Load event occurs when the document, its frameset, associated images have completed loading, including all execution of all scripts and functions and available forms.

The untility of this event is that it helps in synchronizing the frames, when large resources are to be loaded.

The event handler onunload gets invoked when the page is exited or reseted.

Example: Javascript Window Events : load and unload Events.

Give it a TRY! » Note: The alert box pops up when the page has finished loading its resources.


Javascript Window Events : onfocus and onblur Event Handlers

When an object on a webpage has the focus, its waiting for some user activity such as click button, link etc.

The element over which the mouse cursor hovers has the focus, when the cursor moves out the object loses the focus.i.e blurred.

The event handler onfocus is activated when the window gains the focus while the event handler onblur is activated when the window loses the cursor focus.

Example: Window Events onfocus and onblur.

Give it a TRY! » Note:The focus and blur event is used to change the style of input fieldset.


Javascript Window Events: focus() and blur() Method

The methods focus() when applied to an object causes that object to be in focus.

While the method blur() when applied to an object causes the object, it loses its input focus.

Example: Javascript Window Events:focus() and blur() Method

Give it a TRY! » Note: Click on the text to see the effects.