Jquery for Beginners: Events Handling Part 2

This is the second article of the Jquey for Beginners: Event Handling. In the first Article i give some information how you attach the event with the controls. Here is the list of the some of the event helper Table 1.

Event Name
Event Name
blur()
blur(fn)
change()
change(fn)
click()
click(fn)
dbclick()
dbclick(fn)
error() 
error(fn)
focus()
focus(fn)
keydown()
keydown(fn)
keypress()
keypress(fn)
keyup()
keyup(fn)
load(fn)
unload(fn)
mousedown(fn)
 
mousemove(fn)
  
mouseout(fn)
mouseover(fn)
resize(fn)
scroll(fn)
select()
select(fn)
submit()
submit(fn)
hover(handlerIn, handlerOut)
toggle(handlerEven, handlerOdd)
     

These are the event handler used in the jquery and also called Event helper. The events i have mentioned above in the table return jquery object by which the event is bind, as jquery support chainability so the return object is used to apply another function on that object. We can divide events in the Table 2 into three categories.

1. Events which are related to the mouse, also called mouse events which include click, mouseover , mouseout etc.
2. Events which are related to the key board, also called Keyboard event which include the keypress, keyup etc.
3. Events which are related to the form. which include the load and unload of the form.
   

Let us start with the events related to the mouse, then event related with the keyboard and the at the end the events which are related with the form.
The event listed in Table 1 are also the shorthand of the bind() event handler where you have to specify the event name and the function to be executed when the event is fired. Let us start with the most used mouse event which is click. Here is the code you can use to bind the click event with the control.

$(document).ready(function()
{
// use this to reset a single form
$("#reset").click(function()
{
alert("Button is Click")
});
});

The code above is simple one i have used the id of the button "reset" to bind the click event with it, so when the button is click alert message "Button is Click" is shown. Below is the code for both the click(fn) and click event handler. The code above is also shortcut for the .bind('click', handler)

$(document).ready(function()
{
$("#myDiv").click(ClickCalled);
$("#myDiv").click();
});

function ClickCalled()
{
alert('called');
}

you can see the from above code snip that when the page is loaded the function is called as i have call the $("#myDiv").click(); which will call the function associated with the click event or you can say in the previouse statement i have attach the ClickCalled function. This remind me the buttonName.PerformClick(); function. Which i love to use in the desktop application when i develope the desktop application, now i am happy to use it in the jquery as well and i am very happy that jquery has given this functinality.Although we can call the function but calling the click() function is really cool. Remember that you have to attach the click event handler before
calling the . click() event. The dbclick event is similar to the .click except the event is fired when mouse is double click and hope you can do yourself i will not explain it here, if you need help regarding dbclick then please tell me i will help you.

Next event which i will explain you related to the mouse is the hover() event handler , you can see in Table 1 that the .hover(handlerIn, handlerOut) takes two functions as parameter one is used when mouse enter into the control to which the hover is bind and the handlerOut is used when the mouse is leave that control. For the javascript programmer who use the mouseout and mouseover for the simple effect for example when mouse is over to over a button then the background color is change from the default to new color and when mouse is out of that control then the default color is set.

$(document).ready(function()
{
 $('#myDiv').hover(function()
         {
             $(this).css('background','pink');;
         },
         function()
         {
             $(this).css('background','#000');;
         });
});

Above is the simple code which illustrate how you can use the hover event handler to bind the two functions, the above code will change the background color of the div which to pink when the mouse is over the div and set the default color of black when mouse leave the div control.

The remain events which are related to the mouse , i will leave the reader to discover them and use them, if you need any help regarding the the mouse events please do tell l me. Events for the keyboard and the form i will discuss in next post , hope this will help you and you get some help from this post as well. If you have any question please do tell me , i will try my level best to give you answer.

back to content