Events seem daunting at first, but really jQuery makes them super simple. Events can be used to alter behavior or even have multiple events happen on a single state change.

We all know about events like click, onkeydown, onmousedown, onmouseover, etc. But you can fire custom events as well. First you need to understand how to fire events. You can do this by using the $().trigger() event through jQuery.

To do this, we will attach an event for the onchange to a select input. Then when the value changes we will fire a custom event called “update”.

First, the select box.

1
2
3
4
5
6
7
8
9
10
11
12
13

<select name="test" class="test">
<option value=" --- "> --- </option>
<option value=" Test 1"> Test 1</option>
<option value=" Test 2"> Test 2</option>
<option value=" Test 3"> Test 3</option>
<option value=" Test 4"> Test 4</option>
<option value=" Test 5"> Test 5</option>
<option value=" Test 6"> Test 6</option>
<option value=" Test 7"> Test 7</option>
<option value=" Test 8"> Test 8</option>
<option value=" Test 9"> Test 9</option>
<option value=" Test 10"> Test 10</option>
</select>

1
2
3

$('select.test').change( function() { 
     $('select.test').trigger('update', $(this).val()); 
});

Now we need to listen to this event, we can do this by using .bind() to listen to events triggered on a DOM element.

1
2
3

$('select.test').bind('update', function(e, data) { 
     console.log(data);
);

Thats the basic way of firing and listening to custom events in jQuery. We can attach more listeners to the “update” event by attaching them in the same way.

We can also do this in a more OO way. Lets say we have multiple objects/plugins on the page that need to update when the custom event is fired. We can do this by adding the bind code into the object, then when the event is fired we can update our objects.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

var object1 = new function() {
    var obj = this;
    this.name = "Object 1"; 
 
    $('select.test').bind('update', function(e, data) { obj.update(data); }); 
 
    this.update = function(data){
        console.log("Update from %o with %o", this, data);
    };  
 
    return this;
};  
 
var object2 = new function() { 
    var obj = this;
    this.name = "Object 2"; 
 
    $('select.test').bind('update', function(e, data) { obj.update(data); }); 
 
    this.update = function(data){
        console.log("Update from %o with %o", this, data);
    };  
 
    return this;
};

The console will log the following:
Update from Object name=Object 1 with ” Test 1″
Update from Object name=Object 2 with ” Test 1″

Currently we have just been passing the value to our update event, BUT you can actually pass more than just the value. You can pass ANY of javascript built in data types, including functions, objects and arrays. If we update the trigger to pass the jQuery object, here is what it would look like:

1

$('select.test').change( function() { $('select.test').trigger('update', $(this)); } );

And now our console would log something like the following:
Update from Object name=Object 1 with <select class=”test” name=”test”>
Update from Object name=Object 2 with <select class=”test” name=”test”>

Want to see this in action? You can view the demo here.

*Update fixed link to the demo

Recently I was tasked with writing a jQuery plugin for a carousel. I am sure at this point you are asking yourself, “Why would you write another one when there are so many out there?”. I agree. However, while there are alot of very good carousel plugins, the requirements meant that I would end up having to edit the code anywyas. And, since this would be my first shot at writing a jQuery plugin from scratch and I figured it would be a good time to learn the process and to document some best practices/design patterns.

Getting Started:

Read through jQuery Authoring Guidelines, this will get you 90% of the way to writing your first plugin.

Patterns:

If you haven’t seen it yet, you need to checkout a post on LearningJquery.com by Mike Alsup. He came up with a good base for a design pattern on writing jQuery plugins:

There are a few requirements that I feel this pattern handles nicely:

1. Claim only a single name in the jQuery namespace
2. Accept an options argument to control plugin behavior
3. Provide public access to default plugin settings
4. Provide public access to secondary functions (as applicable)
5. Keep private functions private
6. Support the Metadata Plugin

While those are a great start, lets add some new ideas to it.

1. Claim only a single name in the jQuery namespace
2. Accept an options argument to control plugin behavior
3. Provide public access to default plugin settings
4. Provide public access to secondary functions (as applicable)
5. Keep private functions private
6. Support the Metadata Plugin
7. Allow for extending the object via callbacks (either hooks or events) as applicable
   
8. scope all selectors with the ‘this’ object

Setting Up the Pattern

For this example, I am going to write a tab plugin. I know, I know… again there are already so many out there. However, we need an example that will show off the 7-9 in the list, and really its not that hard to write.

Here is a full example that meets the first 6 rules in this design. I am not going to go into detail on each of the first 6, since they are well outlined by Mike Alsup.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47

(function($){
 
    $.<span class="internal fn">fn.tabs = function(tabOptions) {
        // support mutltiple elements
        if (this.length > 1){ 
            this.each(function() { $(this).tabs(tabOptions) }); 
            return this;
        }   
 
        // SETUP private variabls;
        var pOne = ""; 
        var pTwo = ""; 
        //...
 
        // SETUP private functions;
        var findTabs = function() {
                                // do something ... 
                            }   
        var hooks = function() {
                                // do something ... 
                            }   
        // ... 
 
        // setup options
        var defaultOptions = { 
                                    debug : false
                                };  
        var options = $.extend({}, defaultOptions, tabOptions);
 
        this.intialize = function() {
                // support MetaData plugin
                if ($.meta){
                    options = $.extend({}, options, this.data());
                }   
        };  
 
        this.changeTab = function() {
            // change Tab 
        };  
 
        this.getOptions = function() {
            return options;
        };  
 
        return this.intiazlie();
    }   
})(jQuery);

#7 Extend the plugin via callbacks

Sounds complicated, but this will allow your plugin to remain flexible and not have to be redesigned each time something new and exciting comes up that you need to accomplish. Taking the code above, lets look at first the changeTab() routine.

1
2
3

this.changeTab = function() {
    // change Tab 
};

In order to make a call back we need to allow some options to be passed in. We set up the options like this:

1
2
3
4
5
6
7
8
9
10
11
12
13

var options = { 
                    tab0  : {
                                onstart : function() { }, // do something here
                                onload : function() { }, // do something here
                                onfinished : function() { } // do something here
                            },
                    tab1  : {
                                // lets chain some methods together
                                onstart : function() { }, // do something here
                                onload : [ function() { }, function() { } ], // 2 methods each will be execute
                                onfinished : [ function() { }, function() { } ] // again 2 methods
                            }
                }

Now, when each of the two tabs loads, we can check and see if there are any callbacks that need to be called in order to extend the functionality. The new changeTab code would look something like this:

1
2
3
4
5
6
7
8
9
10
11

this.changeTab = function(element) {
    // find tab clicked
    var tabIndex = findTabIndex(element);
    hooks(this, options['tab' + tabIndex].onstart);
 
    // change Tab ... 
    hooks(this, options['tab' + tabIndex].onload);
 
    // tab.show();
    hooks(this, options['tab' + tabIndex].onfinished);
};

Now that we are checking to see if the functionality has been extended. Lets look at how we can actually call this in a generic way?

1
2
3
4
5
6
7
8
9

var hooks = function(thisObject, hookList){
    if (<span class="internal typeof">typeof hookList == 'function') {
        hookList.call(thisObject);
    } else if (/object|array/.test(<span class="internal typeof">typeof hookList)) {
        for (var i = 0; i < hookList.length; i++) {
            hookList[i].call(thisObject);
        }
    }
}

What exactly is this doing? First of all the hooks function takes 2 parameters. thisObject is equal to the object that you want the callback function to have “this” set to. and a method to call back on called hookList. The reason we call it list, is that we will check to see if hookList is an array of functions or just a single function. The following call passes in the tabs object and the onstart callbacks.

1

hooks(this, options['tab' + tabIndex].onstart);

In the hooks method, we have a little magic happening.

1

hookList.call(thisObject);

We use the .call(object) method on the function. Basically this sets the “this” inside of the function to the “thisObject” being passed into the function.

Scope all selectors with the ‘this’ object

This is actually really simple, but will control the scope of the objects returned by jQuery. Without this, you may clobber another widget on the page or jump outside of the element you are working on. Inside of the findTabs function we need to find all of the tabs and compare it to the current element that was clicked.

1
2
3
4
5
6
7
8
9
10
11
12
13
14

var findTabs = function(element){
    var index = 0;
    var selected = 0;
    $('.tabs li').each(function() {
                                        if (this == element){
                                            selected = index;
                                            $(this).addClass('selected');
                                        } else {
                                            $(this).removeClass('selected');
                                        }   
                                        index++;
                                    }); 
    return selected;
};

On the surface, there is nothing wrong with this. However, what happens if we have two different tab groups on the page? Nothing? How about a DOM the size of Amazon.com? Would this slow down? Yes, actually it would and you may or may not be acting on a set of tabs that aren’t your own.

So how do we fix this?

1
2
3
4
5
6
7
8
9
10
11
12
13
14

var findTabs = function(element){
    var index = 0;
    var selected = 0;
    $('.tabs li', this).each(function() {
                                        if (this == element){
                                            selected = index;
                                            $(this).addClass('selected');
                                        } else {
                                            $(this).removeClass('selected');
                                        }   
                                        index++;
                                    }); 
    return selected;
};

Wait, that is the same code? Close, but look closer at the $(’.tabs li’) selector. Notice, we now use $(’.tabs li’, this). (You could also use this.find(’.tabs li’); which uses less function lookups however thats a topic for another day). This limits the scope of the search for the tabs. It won’t clobber any other tabs on the page and you can even nest tabs once you are using this method.

* Update – Added in new Demo page. You can get the full code to play around with.