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
![CSS vs. JS Animation: Which is Faster?]()
How is it possible that JavaScript-based animation has secretly always been as fast — or faster — than CSS transitions? And, how is it possible that Adobe and Google consistently release media-rich mobile sites that rival the performance of native apps?
This article serves as a point-by-point...
![CSS @supports]()
Feature detection via JavaScript is a client side best practice and for all the right reasons, but unfortunately that same functionality hasn't been available within CSS. What we end up doing is repeating the same properties multiple times with each browser prefix. Yuck. Another thing we...
![Better Pull Quotes with MooTools]()
Chris Coyier authored a post titled Better Pull Quotes: Don't Repeat Markup a while back. In his post he created great-looking pull quotes without repeating any content -- instead he uses jQuery to dynamically create the pull quotes. The following is the...
![Instagram For MooTools]()
If you're still rocking an iPhone and fancy taking a photo every now and then, you'd be crazy not to be using an app called Instagram. With Instagram you take the photos just as you would with your native iPhone camera app, but Instagram...
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