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:
<html>
<head>
<title>JQuery Sample HTML Page</title>
<script src="jquery-1.4.2.min.js" type="text/javascript">
</script>
<script language="javascript" type="text/javascript">
$(document).ready(function() {
$('#myButton').bind('click',function(){$(this).css('color','red');});
// this refers to myButton.
});
$('#myButton').bind('mouseenter',function(){$(this).css('color','red');});
$('#myButton').bind('mouseleave',function(){$(this).css('color','black');});
</script>
</head>
<body>
<input type="button" value="My Button" id="myButton"/>
</body>
</html>
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.
$('#myButton').unbind();// Unbinds all events of myButton.
$('#myButton').unbind('mouseleave'); // Unbinds mouseleave event only.
$('#myButton').unbind('mouseleave',fn); // Unbinds fn function for mouseleave event.
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:
$('#myButton').toggle(function(){alert('1st click');},function(){alert('2nd click');},function(){alert('3rd click');});
On first click, it fires first function and second one on second click, and so on.
hover() provides hovering on a element. It takes two parameters. First one is the function to be executed on mouse over and second one on mouse off the element as shown below:
$('#myButton').hover(function(){$(this).css('color','red');},function(){$(this).css('color','blue');});
The above code changes color of button to red on mouse over and to blue on mouse off.
We will end up this session by looking into live() method. live() is similar to bind(), but it will cause the event to be bind to all present and future matched elements.
<html>
<head>
<title>JQuery Sample HTML Page</title>
<script src="jquery-1.4.2.min.js" type="text/javascript">
</script>
<script language="javascript" type="text/javascript">
$(document).ready(function() {
$('input').live('click',function(){alert('clicked');});
$('#myDiv').html('<input type="button" value="My Button" id="myButton"/><input type="button" value="My Button1" id="myButton1"/>');
});
</script>
</head>
<body>
<div id='myDiv'>
<input type="button" value="My Button" id="myButton"/>
</div>
</body>
</html>
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.