Browser & Loading Events JQ Home  <<  JQ Advanced  <<  Browser & Loading Events

• <<    jQuery Advanced
• Keyboard & Mouse Events     >>

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

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.

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.

Browser Events Methods

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

The .error() Method **REMOVED**Top

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

This method was deprecated in jQuery 1.8 and removed in 3.0 and we are just showing it for completeness.

• Use .trigger( "error" ) instead of .error().
• Use .on( "error", handler ) instead of .error( handler ).

The example below no longer works from jQuery 3.0 onwards and is just shown as an example for people using earlier versions.

We use this methods .error( [eventData ,] handler(eventObject) ) signature in our example below which binds an event handler to The JavaScript error JavaScript event, optionally passing an object of data.

The second signature .error( handler(eventObject) ) signature binds an event handler to the error JavaScript event.

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

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>');
  }
});

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

The .resize() Property 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, optionally passing an object of data.

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

The third signature .resize( handler(eventObject) ) signature binds an event handler to the resize JavaScript event.

Examples of these signature are 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());
  }
});

The .scroll() Property 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, optionally passing an object of data.

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

The third signature .scroll( handler(eventObject) ) signature binds an event handler to the scroll JavaScript event.

Examples of these signature are 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);
  }
});

We will show a message here.

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 **REMOVED**Top

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

This method was deprecated in jQuery 1.8 and removed in 3.0.

• Use .trigger( "load" ) instead of .load().
• Use .on( "load", handler ) instead of .load( handler ).

• 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.

The example below no longer works from jQuery 3.0 onwards and is just shown as an example for people using earlier versions.

We use this methods .load( [eventData ,] handler(eventObject) ) signature in our example below which binds an event handler to The JavaScript load event, optionally passing an object of data.

The second signature .load( handler(eventObject) ) signature binds an event handler to the load JavaScript event.

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 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>');
  }
});

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

The .ready() Method 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 .on( events [, selector] [, data], handler(eventObject) ) 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 **REMOVED**Top

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

This method was deprecated in jQuery 1.8 and removed in 3.0.

• Use .trigger( "unload" ) instead of .unload().
• Use .on( "unload", handler ) instead of .unload( handler ).

• 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.

The example below no longer works from jQuery 3.0 onwards and is just shown as an example for people using earlier versions.

We use this methods .unload( handler(eventObject) ) signature in our example below which binds an event handler to The JavaScript unload event, optionally passing an object of data.

The second signature .unload( [ eventData], handler(eventObject) ) signature binds an event handler to the unload JavaScript event, optionally passing an object of data.

An example of this signature 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.');
});

Lesson 1 Complete

In this lesson we ventured into the dynamic world of event handlers by looking at browser and loading 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

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

• <<    jQuery Advanced
• Keyboard & Mouse Events     >>