Truly Evil

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