Understanding jQuery Events

Events are actions that can be detected by your Web Application. Because jQuery is so simple to use, lots of times people don’t even want to understand what events are. As long as they can just use the functions with short names like click() or css().

Other useful jQuery articles:

If you are pursuing an interest in jQuery, you are likely to end up learning other programming languages as well. jQuery provides us with an interface to existing Javascript events. All events that there is a jQuery function for, are actually tied to some Javascript event.

Most events are assigned to empty functions from the start. We can extend the functionality of an event, by overriding that function with our own. So then, the most important thing about events is that we know what their names are and what they do. Learning what events are available to us is something that comes with the experience of writing Javascript code.

Consider the following jQuery selector and event handler function;

$(window).load( function(){ alert('Loading finished.'); } );

This function() is also known as a function closure, because this function doesn’t have a name. By using a function closure, we simply want the code to be executed as soon as we define that function. We are not concerned with that function’s name. That is why we omit it.

This function closure is the code you want to be executed when a jQuery event occurs. In this case we have chosen the load event, which is the equivalent of the window.onload event, as shown below:

<head>
<script language = "javascript">
window.onload = function() { alert('Loading finished.'); }
</script>
</head>

Can we use the code above instead? Yes, we can even use the old-school onload = “” in the body tag in the HTML of the webpage. Either way, exactly the same event will be triggered. But this is a simple example. Sometimes some events require different syntax, based on which browser you are writing your Javascript code for. jQuery saves us from thinking about those details.

Binding Event Handlers

Using the jQuery Event Model, we can establish event handlers on DOM elements with the bind() method as follows;

$('div').bind('click', function( event ){
   alert('Hello admin.');
});

This code will cause the division element to respond to the click event; when a user clicks inside this division thereafter, the alert will be shown. Try it yourself.

The full syntax of the bind() command is as follows;

selector.bind( eventType[, eventData], handler)

Following is the description of the parameters;

eventType: A string containing a JavaScript event type, such as click or submit. Refer to the next section for a complete list of event types.
eventData: This is optional parameter is a map of data that will be passed to the event handler.
handler: A function to execute each time the event is triggered.

Removing Event Handlers

jQuery provides the unbind() command to remove an exiting event handler. The syntax of unbind() is as follows:

selector.unbind(eventType, handler)

OR

selector.unbind(eventType)

Following is the description of the parameters;

eventType: A string containing a JavaScript event type, such as click or submit. Refer to the next section for a complete list of event types.
handler: If provided, identifies the specific listener that’s to be removed.

Below is a table containing some of the popular jQuery events.

.bind() – Attach a function to an arbitrary event of your choice.
.blur() – Attach focus left a selected element event.
.change() – Value of the selected input element has changed.
.click() – The selected element has been clicked.
.dblclick() – The selected element has been double clicked.
.die() – Remove all events that were attached with .live()
.error() – Bind a handler to the error Javascript event
.focus() – The selected element received cursor focus
.focusin() – Detect focus of an input element nested inside arbitrary parent element – the selection. This function expects the parent as the selection.
.focusout() – Detect loss of cursor focus of an input element nested inside a parent – the selection.
.hover() – Only during the time mouse pointer is inside an element. Fires on mouse-enter and mouse-leave. Expects two handlers, not just one like most other functions.
.toggle() – Bind two or more handlers to the matched elements, to be executed on alternate clicks.
.unbind() – Remove a previously-attached event handler from the elements.
.unload() – Bind an event handler to the “unload” JavaScript event.

In Closing

Hope you guys liked this article. If yes, remember to share it. It’s always great to get some further insight and thought’s on subjects such as these.