In previous article, we looked into traversal methods and chaining. In this article, we will cover events and its types. Earlier, we looked into page load event by using $(document).ready(). There are lot more events available on DOM elements like button, textbox etc. For example, we might need to execute a piece of code on click of button or key press in textbox. JQuery event handling mechanism provides elegant methods to make a page dynamic and responsive. Let's start with a sample button click event. We can use bind() method for binding the click event of a button with JQuery code to be executed as shown below:

bind() accepts two parameters. First parameter is event type and next one is the JQuery code to be executed on event firing. In similar way, we can unbind an event by using unbind() method as shown below for button click.

Few other event types are: mouseenter, mouseleave, dblclick etc. JQuery provides a shortcut to bind an event handler. We can bind mouse events to the button using below code in shorthand:

$('#myButton').mouseenter(function(){$(this).css('color','red');});

$('#myButton').mouseleave(function(){$(this).css('color','black');});

Up to now, we looked into events supported by JavaScript internally. JQuery supports custom events toggle() and hover(). toggle() method fires specific function based on number of clicks as shown below:

By using live(), we can make sure the click event handler will be added to all buttons created later [based on matching criteria].We can refer http://docs.jquery.com/Events for complete list of events supported by JQuery.

I am ending the things here. I hope this article will be helpful for all.