If you’ve spent some quality time with Javascript, then you probably already figured out it’s an event-driven language. This means that most things done with Javascript are simply reactions to what can be defined as interesting moments in your application. Arguably, the most common of these interesting moments, or events, are the ones pertaining to direct actions performed by the user, such as clicking a link or entering text in a field. Most of these user interactions are already implemented in the DOM, so all that’s left to you as a developer is to listen to those events and perform some actions when the browser triggers them.
Using jQuery, here is how you listen for a click event:
$(".button").click(function(){ //Perform some actions });
Simple, right? Every line of code inside that function() gets executed when the user clicks an element with a class value of button.
What if you need more?
All these events automatically made available by the DOM are very useful indeed, and they probably cover about 90% of your application’s needs. However, sometimes it’s just beyond useful to be able to define your own events, which are triggered on your application-specific interesting moments.
The main advantage of using custom events is that it gives you a lot more flexibility in your work, allowing you to effectively decouple all the different modules in your project. Instead of one module directly invoking some public method of another module, you can just trigger a custom event and have whatever module is listening to it react. If this is confusing to you, try to think of it like this: Normally a part of your application would have to directly tell another part to do something. With custom event listeners, all that part would have to do is shout out “Hey, it’s that time again!”, and, if the other part was listening, it could decide whether it would act on it.
So how do you implement all of this?
Luckily for you, if you’re using jQuery, implementing this custom event/listener model is rather easy to do. Firstly, you’ll need to create an Event object with whatever properties you desire:
var event = jQuery.Event("mailsent"); event.to = "foo"; event.message = "bar"; $().trigger(event);
That last line is of special importance, since it’s the code which actually triggers the event out there for listeners to listen to.
Next up, you’ll want to define a listener, using jQuery’s bind() method:
$().bind("mailsent", function(){ //Code that executes when the event is triggered goes here. });
And that’s pretty much all there is to it. Note that you can bind and trigger events to whatever selector you wish (such as $(“#myDiv”), for example). What I did in these examples was define no selector at all, because the custom event created was meant to be abstract, and as such had no relationship whatsoever to any element present in the markup.
Wrapping it up
I’m sure that by now you can begin appreciate the power of custom events in Javascript. They help keep things neatly separated, by foregoing the need for one module to know the specifics of another module (such as function names), proving that ignorance really is bliss. If you’re working in tandem with a team of Javascript developers, you’ll find using events really speeds up everyone’s productivity and provides a nice simple interface for different aspects of the application to communicate with each other.
latestcomments