Event Listeners in Javascript and jQuery

Intro to HMTL

Intro to CSS

CSS Layout

Slides: CSS and CSS3
The advantage of a front end language like javascript (in fact, pilule javascript is really the only browser-based language we have) is that you can respond immediately to a user’s actions. Javascript calls these “events”. An event could be a mouse move, generic a scroll, a key press, and many others. Here’s a list of the major Javascript events. Notice that not all of them are supported in all browsers.

Javascript won’t tell you automatically when events happen; you have to register an Event Listener to pay attention to that particular event — to “listen for” a mouse click, for example. When you create an event listener, you then define a function which will fire when the even happens.

jQuery also has methods that handle events, which are basically wrappers around Javascript’s procedures for handling events. In the documentation, there’s a nice list of all the jQuery event methods. One of the methods is bind() and that’s an important one. In Javascript and in jQuery,  you might conceptualize event listeners as binding a function to an event — in other words, connecting them. Take a look at the jQuery documentation for “bind” — you’ll see it’s flexible enough to handle all sorts of events, but also does the same thing as some of the more specific jQuery event handlers, like click(), which, as you might guess, only handles click events. Notice that all of the event listener methods are methods of a jQuery object, which could wrap any DOM element, often called in jQuery like: $(“#mybox”).

A tricky concept at first in Javascript and jQuery is the way that functions are used. Often event listeners will take a function as a parameter. You may be accustomed to seeing and writing functions that look like:

function addNumbers(a,b){
    sum = a + b;
    return sum;
}

In that function, the parameters are a and b, which are both integers. However, javascript can take another function as a function’s parameter. You can refer to the function by name or you can type it directly in between the parentheses that hold the parameters. For example:

function doStuff(){
// do the stuff
}

If a click event in jQuery called this function it could like this:

$("#mybox").click(doStuff);

But it would likely look like this:

$("#mybox").click(function(){

//do stuff;

});

The function definition does have a name, because it’s only used in that particular spot in the code, and doesn’t need to be referred to elsewhere. That’s called an anonymous function. Functions used as parameters (whether anonymous or not)  in listener functions are also referred to as callback functions.

More about jQuery events: http://learn.jquery.com/events/introduction-to-events/ and http://learn.jquery.com/events/event-basics/

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>