Implement MooTools’ Elements.addEvent in jQuery
One thing that I've always disliked about the jQuery JavaScript framework is its syntax for adding event listeners to elements. The way to add a click event to an element using jQuery is:
$('#myElement').click(function() {
//do work
});
I love OOP so the above code tells me that a click is being triggered, not that it's going to add a listener to the element. There's nothing wrong with jQuery using that syntax; I simply don't prefer it. What I do when I need to work with jQuery is Moo-ify its syntax when I can. Here's how you can implement MooTools' "addEvent" syntax in MooTools.
The jQuery JavaScript
jQuery.fn.addEvent = jQuery.fn.bind; //updated
We add the "addEvent" function to the jQuery.fn object. Pretty simple.
The Usage
$(document).ready(function() {
$('#myElement').addEvent('click',function(){ alert('w00t'); });
});
Looks a lot like MooTools, no? If you like jQuery's syntax of .click() type events, read my post: Implementing jQuery-Like Event Syntax in MooTools
![Create a CSS Cube]()
CSS cubes really showcase what CSS has become over the years, evolving from simple color and dimension directives to a language capable of creating deep, creative visuals. Add animation and you've got something really neat. Unfortunately each CSS cube tutorial I've read is a bit...
![Responsive Images: The Ultimate Guide]()
Chances are that any Web designers using our Ghostlab browser testing app, which allows seamless testing across all devices simultaneously, will have worked with responsive design in some shape or form. And as today's websites and devices become ever more varied, a plethora of responsive images...
![MooTools ASCII Art]()
I didn't realize that I truly was a nerd until I could admit to myself that ASCII art was better than the pieces Picasso, Monet, or Van Gogh could create. ASCII art is unmatched in its beauty, simplicity, and ... OK, well, I'm being ridiculous; ASCII...
![jQuery Countdown Plugin]()
You've probably been to sites like RapidShare and MegaUpload that allow you to download files but make you wait a specified number of seconds before giving you the download link. I've created a similar script but my script allows you to animate the CSS font-size...
More concise :
jQuery.fn.addEvent = jQuery.fn.bind;
Well put Pierre…well put.
I too prefer verbs like el.setStyle v. el.css. But swapping syntax would totally goof me up!
I don’t get it, why not just use
$('#myelement').bind('click', function() {...});It’s even shorter than ‘addEvent’
I agree with Corey, $().bind is exactly what you’re looking for…
I would have to agree, this is nothing more than an alias.
Mysteriously enough in jQuery version 1.4 I get this:
$(“#website_stock”).addEvent is not a function
When I set it as just click(fn) it works in Firefox, but not in IE8. It doesn’t return any errors – just the functions do NOT run whatsoever. Same with the bind() option – works in FF on mac, not on IE8.
Hi David,
In this site, the two sides with name older and newer and toggle in-out,how to implement it please send me the complete demo with code if possible.
Thanks in advance