jQuery Events Part - I : Document loading Events and Keyboard Events

jQuery events

jQuery basically have following type of events:

.ready()

Indicates that DOM is fully loaded that mean all controls and it's hierarchy is fully loaded .This is the best place to do all event handling and jacascript/jQuery code manipulations.

Below example shows how to use .ready() in jQuery:

$(document).ready(function()
{  
  // Handler for .ready() called.
});

.load()
.load event executes code when page is rendered or a perticular element is rendered. Use this event when code is relies on loaded assests like images.

Below example show .load() in jQuery, and this triggers event when page is fully loaded with all control:

$(window).load(function()
{ 
 // Add code here
); 

You may call .load for perticular element when it loads.

<img src="something.png" id="imageDemo"/>

$("#imageDemo").load()(function(){
  // Add code here.
});

.unload()
Use this event when user navigates away from the page or window.
Below example shows how .unload() works in jQuery:



$(window).unload(function(){
alert('I am unloading.');
});

.keydown()

Event on element get triggered when user presses any key on keyboard. If you want keydown event get fired when user start typing in some text box.

Below example shows how .keydown() works in jQuery:
For textbox you can write it like




<input id="keyDownDemo" type="text" value="Hello"/>

$("#keyDownDemo").keydown(function(){ 
alert(Hello jQuery KeyDown Happened.');
});