Thursday, December 25, 2008

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 NameEvent 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

5 comments:

Anonymous said...

Asim, I 've been a regular reader of your articles. Although your articles are excellent but if you provide demo or screen shots of what you are explaining than I believe that will help a lot. For instance, your last article, event handling for jquery, is a good article but for a beginner like me ;-) it's not enough without demo or supporting screen shots.

Asim Sajjad said...

Muhammad Usman Arshad:Thank you usman that you read my articles regularly , in future i will provide demo projects as well, again thanks a lot for your time

Faisal said...

Asim great work done
i really like it alot specially the help you provide its excellent

May God always Bless you

aj said...

can you please edit your last posts and provide some screen shots and demo code?

Asim Sajjad said...

aj, I will try to work on it and let you know about it when the work will be completed from my side.