Event handlers are something that generate a kind of interrupt, talking in technical terms. They trigger some functions whenever user takes some particular action depending on the event handler. These interrupts are used to call some function or take some other action. Lets see some most useful event handlers which are used often.


Javascript uses onload event handler to check whether everything has loaded or not. However, it is triggered only after all the images and other stuffs have downloaded. However, script can run as soon as the DOM hierarchy has been fully constructed. The handler .ready() triggers as soon as the DOM is ready even if the images etc are not loaded. So, our jquery code is always going to placed within this handler

$(document).ready(function() {
  // all jQuery stuffs goes here

As the name suggests, this event handler triggers when the user clicks. General syntax format for this event handler is
.click( [eventData,] handler(eventObject) )

  • eventData - A map of data that is passed to the event handler
  • handler(eventObject) - A function which is executed every time the event is triggered.
    Click me
    $('#test').click(showAlert()); // calling a fn function showAlert(){ alert('Donot click. Let me sleep.'); } $('#test').click(function(){ // using an inline fn alert('Donot click. Let me sleep.'); });
    Lets see an interesting demo now.
    1st Box :- I will hide on click
    2nd Box :- I will hide on click
    3rd Box :- I will hide on click
    1st Box :- I will hide on click
    2nd Box :- I will hide on click
    3rd Box :- I will hide on click

    We called a function whenever an element with class hide was clicked. We added a simple action of sliding up. As a result, the element disappeared.


    This event is triggered when the value of an element is changed. As a result, it is limited to input, textboxes and select element like checkbox, radio button. Like .click(), it also calls a function, whenever it is triggered.


    Change my color :-

    Change my color :-

    The example above, changes the color of textBox div to the color selected. We used .change event handler to trigger an inline function which first obtains the color selected by selecting text of #idSelect option:selected and then sets it as the background color of the testBox.

    .blur() and .focus

    This event handler is used basically for input type elements. It is triggered when focus of the user moves from one field to another. While on the other hand, .focus() is triggered when the input field comes in focus. Both are contrary to each other.Lets see an example.

    event.pageX and event.pageY

    It returns the mouse position relative to the left and top edges of the document. Lets see an example.


    Lets see some other event handler and there uses in next chapter.

    Member Login

    Member Login

    Not a Member? Sign Up!

    Login to comment

    Be the first to comment on this topic


    <<< Wanna review

    Continue >>>