Jquery for Beginners: Events Handling Part 1

This is the second article of the Jquey for Beginners. In the first Article i give some information how you can get started with the jquery. In the second article i will give starting point how you can bind the events with your control in order to do some actions against user interaction with the web application. If you see the jquery documentation for the events , documentation categorize the events into four types 1) Page Load, 2) Event Handling also called event attachers, 3) Interaction Helpers and 4) Event Helper. In first article, we noted that $(document).ready() is the jquery way to perform the action which are need to in page load and this function is similar to the javascript function onload. So if you want to read more about ready() handler please read my first article. Here are the ways you can write the ready() event handler :

//1- one way to call the ready function.
$(document).ready(function()
{
// Our code here...
});

//2- Second way to call the ready function.
$().ready(function()
{
// Our code here...
});

//3- Third way to call the ready function.
$(function()
{
// Our code here...
});

All the above three ready handler has same functionality you can call the ready handler whichever style you like.

Event Handling (Event Attachment):

Below is the list of the event handling taken from the documentation of events from jquery site. List 1

Event Name 
Description 
bind(type,data,fn) 
Binds a handler to one or more events (like click) for each matched element. Can also bind custom events. 
one(type,data,fn) 
Binds a handler to one or more events to be executed once for each matched element. 
trigger(type,data) 
Trigger a type of event on every matched element. 
triggerHandler(type,data) 
This particular method triggers all bound event handlers on an element (for a specific event type) WITHOUT executing the browser's default actions. 
unbind(type,fn) 
This does the opposite of bind, it removes bound events from each of the matched elements. 

The return type of the above events are the jquery object. which is used for chainablility , to apply more functions on that return control object. when you call above enent handler/attachers, you can set the type of the event by one of the below list. List 2

Event Name 
Event Name 
Event Name 
blur
change 
focus 
click 
dbclick 
error 
keydown 
keypress 
keyup 
mousedown 
mousemove 
mouseout 
mouseover 
mouseup 
resize 
scroll 
select 
submit 
load 
unload 

These are the possible value of the type which is set in the event binding. Let us start with the bind event handler.

bind():

The bind() event handler is use to bind the event with the object.You can see from List 1 parameter of the bind events are the type ( which i have mentioned in the List 2), data(optional parameter) and event handler.Here is the example how you can use the bind event handler to bind the event with the object.

$(document).ready(function(){
$( "p").bind("click", function(e){
var str =  "( " + e.pageX + ", " + e.pageY + ")";
alert(str);
});

$( "p").bind("dblclick", function(){
alert("Double-click happened" );
});

$( "p").bind("mouseenter mouseleave", function(e){
$(this).toggleClass( "over");
});

});

Above code is simple one it bind the click event , dbClick and the mouse enter and mouse leave events for the paragraph tag. and you can also see how to set the type of the event in the bind event handler and also it attach anonymous callback function. The anonymous callback function which is attached with the click event is passed an event object which i will explain next. And the event handler which is attached with the dbclick didn't passed any parameter. Let me explain the event object which is passed to the event handler so you get some idea why we need to pass event object to the event handler.

The Event Object:

The callback function which is attached using the above list event handler can also take optional parameter which is used for additional information in the callback function.The additional information include such as .shiftKey (whether the shift key was held down at the time), .offsetX (the x coordinate of the mouse cursor within the element), and .type (the kind of event this is). Some of the event object's attributes and methods are not available on every platform. If the event is handled by a jQuery event handler, however, the library standardizes certain attributes so that they can be safely used on any browser. In particular:
.target:
This attribute represents the DOM element that initiated the event. It is often useful to compare event.target to this in order to determine if the event is being handled due to event bubbling.

.pageX:
This attribute contains the x coordinate of the mouse cursor relative to the left edge of the page.

.pageY:
This attribute contains the y coordinate of the mouse cursor relative to the top edge of the page.

.preventDefault():
If this method is called, the default action of the event will not be triggered. For example, clicked anchors will not take the browser to a new URL.

.stopPropagation():
This method prevents the event from bubbling up the DOM tree looking for more event handlers to trigger.

Returning false from a handler is equivalent to calling both .preventDefault() and .stopPropagation() on the event object. Note the parameter added to the anonymous function. You can omit the event object, if you need additional information regarding the event then you can pass the event object else no need to pass the event object.

Passing Event Data:
Now here is the code to bind the event with object using the bind event handler and also pass the data as well.The code below is taken from Infovore

$(document).ready(function()
{
$("#myDiv").bind("click",{myValue:'Some Value'}, handleToggleEvent);
});

function handleToggleEvent(event)
{
alert(event.data.myValue);
} 

In the above code you can see i have bind the click event for the div control , the id of the div is myDiv as you can see from the selector. and i have pass the value is key : value, which mean if i have to access the value which is passed then i need to call event.data.myValue in the event handler, which is set at third parameter in the bind event handler.

unbind():

The unbind event handler is opposite to the bind event handler as it unbind any event attached to the object. From the List 1 you can see the the it has the following form

 unbind(type,fn)

where type is one of the type i have mentioned in List 2 , e.g 'click', 'dbclick' or any of the type which is listed in the List 2.

//1- one way to call
$(document).ready(function()
{
$("#controlID").unbind();
});

//2- Second way to call
$().ready(function()
{
$("#controlID").unbind(type);
});

//3- Third way to call
$(function()
{
$("#controlID").unbind(type, callback);
});

The first call to unbind the callback will unbind all the callback from the "ControlID" , The second call is more specific as it will remove the only callback whose type is give, for example if you give the type "click" then it will remove the callback which are bind for the click event handler. and the third one is specific then the first 2 as it will unbind the event which is passed either "click" or any of the type which is listed in the List 2 and then then remove the callback which is passed as well.

one():

The next one is the one event handler. The one event handler as its name suggest is executed only once and is similar to the bind event handler except that event is fire once , mean if you for example attach event handler for a control on its click once you click the button the code is executed but if you click again the button then the code is not executed. It is similar to that you unbind the callback, once the event is fired and you don't want to execute the code again. And here is the call to the one event handler.

one(type,data,fn)

you can see that it is similar to the bind event handler , same type parameter, same optional data parameter and same callback function parameter.

trigger():

The trigger event handler is used to execute the specific callback function, which is attached using the bind event handler.

hope you will get enough to start with the event handler , if you have any question please ask me
happy programming :)

back to content