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 Gradients]()
With CSS border-radius, I showed you how CSS can bridge the gap between design and development by adding rounded corners to elements. CSS gradients are another step in that direction. Now that CSS gradients are supported in Internet Explorer 8+, Firefox, Safari, and Chrome...
![7 Essential JavaScript Functions]()
I remember the early days of JavaScript where you needed a simple function for just about everything because the browser vendors implemented features differently, and not just edge features, basic features, like addEventListener and attachEvent. Times have changed but there are still a few functions each developer should...
![MooTools PulseFade Plugin]()
I was recently driven to create a MooTools plugin that would take an element and fade it to a min from a max for a given number of times. Here's the result of my Moo-foolery.
The MooTools JavaScript
Options of the class include:
min: (defaults to .5) the...
![Shake Things Up Using jQuery UI’s Shake Effect]()
Yesterday I created a tutorial showing you how you can shake an element using Fx.Shake, a MooTools component written by Aaron Newton. It turns out that jQuery UI also has a shake effect which can draw attention to an element.
The XHTML
Exactly the same as...
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