JavaScript & jQuery Tutorials

JQ Home Right Arrow JQ Advanced Right Arrow Loading & Browser Events

Loading & Browser Events

In this lesson we venture into the dynamic world of event handlers by looking at loading and browser event methods.

The jQuery loading event methods in this suite allow us to bind event handlers to the load and unload JavaScript events as well as specifying a function to execute when the DOM has fully loaded.

The jQuery browser event methods in this suite allow us to bind event handlers to the error, resize and scroll JavaScript events or trigger that event on the specified element.


Loading & Browser Events Methods Description
Loading
.load() **DEPRECATED**Bind an event handler to the load JavaScript event, optionally passing a map of data.
.ready()Specify a function to execute when the DOM has fully loaded.
.unload() **DEPRECATED**Bind an event handler to the unload JavaScript event, optionally passing a map of data.
Browser
.error **DEPRECATED**Bind an event handler to The JavaScript error event or trigger that event on the specified element.
.resizeBind an event handler to The JavaScript resize event or trigger that event on the specified element.
.scroll()Bind an event handler to The JavaScript scroll event or trigger that event on the specified element.

Loading Events Methods

Bind event handlers to the load and unload JavaScript events and specify a function to execute when the DOM has fully loaded.

The .load() Method **DEPRECATED**go to top of page Top

Bind an event handler to the load JavaScript event, optionally passing a map of data.

  • The load() event is passed to an element when it and any sub-elements attached to it have been completely loaded. This event can be sent to any element associated with frames, iframes, images, scripts, URLs and the window object. Whenever possible when using the .load() method with images, it is preferable to use the jQuery .ready() method unless you need all images to be fully loaded before executing some code. There are also some known issues when using the .load() method with images:
    1. The .load() method doesn't work consistently across browsers.
    2. The .load() method doesn't bubble up the DOM tree correctly.
    3. The .load() method may not fire if the images in question are already stored in the cache of the browser being used.
    4. The .load() method doesn't work correctly in WebKit browsers if the image src is set to the same src as previously.
  • There is also a jQuery Ajax method named .load() and the method that is fired depends on the set of arguments passed.

We use this methods only signature .load( [eventData], handler(eventObject) ) in our example below.

In the example below we show a new message under the 'div' element with the image of chicken korma in it. As soon as the image is completely loaded the load JavaScript event occurs. This then fires off the $('#curry1').load({ param1: '#loadspan1', param2: 'load', param3: '**JavaScript event triggered** ' }, addText2); code. What we are doing here is passing across the event object to the function addText2(event). The map we specify, in our case { param1: '#loadspan1', param2: 'load', param3: '**JavaScript event triggered** ' } gets tagged onto the event.data property. We then access these parameters in the function via event.data.paramN and use the passed parameters for our appended data. As mentioned in the description above the code working depends on the browser being used when the .load() method is applied to image elements.


$(function(){
  $('#curry1').load({ param1: '#loadspan1', param2: 'load', 
               param3: '**JavaScript event triggered**  ' }, addText2);
  function addText2(event) {
    $(event.data.param1).append(event.data.param2 + '<code>' + event.data.param3 + '</code>');
  }
});

a picture of curry


We will show a message here when the load JavaScript event fires.

The .ready() Method go to top of page Top

Specify a function to execute when the DOM has fully loaded.

  • The .ready() method is similar to the window.onload handler, but whereas the latter waits until all resources are loaded including all external resources, the .ready() method is fired after the document is fully parsed and converted into the DOM tree. This can lead to significantly faster loading of our behaviour and therefore a richer experience for our users.
  • The other advantage that the .ready() method has over the window.onload handler, is that it can be used multiple times within the same HTML document and the functions are executed in the order they are declared.
  • Any scripts placed in the .ready() method, that rely on the value of CSS style properties, should be placed in external stylesheets or embedded style elements ensuring their values are present before referencing the scripts.
  • The .ready() method is generally incompatible with the <body onload=""> attribute so either do not use the .ready() method or use the .load() method to attach load event handlers to the window or to more specific elements, like images when loaded assets are required.
  • The .ready() method can only be called on a jQuery object matching the current document, so selectors can be omitted.

We use this methods only signature .ready( handler ) in our example below.

In the example below we change all paragraph text to indigo once the DOM has fully loaded. So in this case when you see the page all paragraph text will be coloured indigo.


$(function(){
  $('p').css('color', 'indigo');
});

The .unload() Method **DEPRECATED**go to top of page Top

Bind an event handler to the unload JavaScript event, optionally passing a map of data.

  • The unload event is passed to the window object whenever a user navigates away from a page for any of the following reasons:
    1. The user has clicked on an external link.
    2. The user has pressed the page reload button.
    3. The user has pressed the forward or back navigation buttons.
    4. The user has typed a new URL in the address bar.
    5. The user has closed the browser window.

We use this methods only signature .unload( [eventData], handler(eventObject) ) in our example below.

An example of using this method with the default 'fx' queue is available in the reference section.

As soon as we navigate away from the page the unload JavaScript event occurs. In the example below we show an alert message when this happens.


$(window).unload(function() {
  alert('The JavaScript unload event has been triggered.');
});

Browser Events Methods

Bind event handlers to the error, resize and scroll JavaScript events or trigger that event on the specified element.

The .error() **DEPRECATED**Method go to top of page Top

Bind an event handler to the error JavaScript event, optionally passing a map of data.

We use this methods only signature .error( [eventData], handler(eventObject) ) in our example below.

In the example below we show a new message under the 'div' element when the image of chicken masala cannot be found. We are pointing to an invalid Url so the image will never load and the error JavaScript event occurs. This then fires off the $('#curry2').error({ param1: '#scrollspan3', param2: 'error ', param3: '**JavaScript event triggered** ' }, addText2); code.

What we are doing here is passing across the event object to the function addText2(event). The map we specify, in our case { param1: '#scrollspan3', param2: 'error ', param3: '**JavaScript event triggered** ' } gets tagged onto the event.data property.

We then access these parameters in the function via event.data.paramN and use the passed parameters for our appended data.


<img id="curry2"  src="badurl"  alt="a picture of curry" 
     title="Chicken Masala"  width="130"  height="100" />

$(function(){
  $('#curry2').error({ param1: '#scrollspan3', param2: 'error ', 
               param3: '**JavaScript event triggered**  ' }, addText2);
  function addText2(event) {
    $(event.data.param1).append(event.data.param2 + '<code>' + event.data.param3+ '</code>');
  }
});

a picture of curry


We will show a message here when the error JavaScript event fires.

The .resize() Property go to top of page Top

Bind an event handler to The JavaScript resize event or trigger that event on the specified element.

We use this methods .resize( [eventData], handler(eventObject) ) signature in our example below which binds an event handler to The JavaScript resize event.

The second signature .resize( ) triggers The JavaScript resize event on the specified element.

An example of this signature is available in the reference section.

In the example below we show a new message in the 'div' element with an id of 'div3' when the div below is clicked on the first time. When the div is clicked on we run the function aResizeFunction() which triggers off the resize JavaScript event on 'div3'. This then fires off the $('#div3').resize({ param: '**JavaScript event triggered**' }, addText); code. What we are doing here is passing across the event object to the function addText(event). The map we specify, in our case { param: '**JavaScript event triggered**' } gets tagged onto the event.data property. We then access this parameter in the function via event.data.param and use it as part of the appended data.


$(function(){
  $('#div3').resize({ param: '**JavaScript event triggered**' }, addText);
  $('#div3').one('click', function(){
    aResizeFunction('A new line of text. ', this);
  });
  function aResizeFunction(ourText, ourDiv) {
    $(ourDiv).html(ourText);
    $(ourDiv).resize();
  }
  function addText(event) {
    $('#div3').append('resize ' + event.data.param + '. New window dimensions 
      are: Height: ' + $(this).height() + ' Width: ' + $(this).width());
  }
});

div3.


The .scroll() Property go to top of page Top

Bind an event handler to The JavaScript scroll event or trigger that event on the specified element.

We use this methods .scroll( [eventData], handler(eventObject) ) signature in our example below which binds an event handler to The JavaScript scroll event.

The second signature .scroll( ) triggers The JavaScript scroll event on the specified element.

An example of this signature is available in the reference section.

In the example below we show a new message under the 'div' element with an id of 'scrolldiv2' every time the scoll bar is moved with the mouse or the scroll window is dragged up or down or moved with the keyboard. The scrolling triggers off the scroll JavaScript event on 'scrolldiv2'. This then fires off the $('#scrolldiv2').scroll({ param1: '#scrollspan2', param2: 'scroll', param3: '**JavaScript event triggered** ' }, addText); code. What we are doing here is passing across the event object to the function addText2(event). The map we specify, in our case { param1: '#scrollspan2', param2: 'scroll', param3: '**JavaScript event triggered** ' } gets tagged onto the event.data property. We then access these parameters in the function via event.data.paramN and use the passed parameters for our appended data.


$(function(){
  $('#scrolldiv2').scroll({ param1: '#scrollspan2', param2: 'scroll', 
                            param3: '**JavaScript event triggered**  ' }, addText2);
  function addText2(event) {
    $(event.data.param1).append('<code>' + event.data.param2 + '</code> ' + event.data.param3);
  }
});

scrolldiv2. Lorem ipsum dolor sit amet, lorem ipsum dolor sit amet, lorem ipsum dolor sit amet, lorem ipsum dolor sit amet, lorem ipsum dolor sit amet, lorem ipsum dolor sit amet, lorem ipsum dolor sit amet, lorem ipsum dolor sit amet.

We will show a message here.

Lesson 1 Complete

In this lesson we ventured into the dynamic world of event handlers by looking at loading and browser event methods.

Related Tutorials

jQuery Advanced - Lesson 2: Keyboard & Mouse Events
jQuery Advanced - Lesson 3: Form Events
jQuery Advanced - Lesson 4: Event Handler Attachments
jQuery Advanced - Lesson 5: The Event Object

What's Next?

In the next lesson we look at keyboard and mouse events.

Reference

Methods

Attributes and Properties - .css() method
Attributes and Properties - .html() method
Events - .click() method
Events - .error() method
Events - .load() method
Events - .ready() method
Events - .resize() method
Events - .scroll() method
Events - .unload() method
Event Handler Attachment - .one() method
Manipulation - .append() method

Event Object Property

Event Object - event.data property



 

go to jQuery home page jQuery Home go to top of page Top