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...
![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...
![New York Times-Style Text Selection Widget Using MooTools or jQuery]()
Aaron Newton made a great request to me last week: why not make my MooTools Documentation Bookmarklet function more like the New York Time's text selection widget. NYT's text selection widget listens for text selection and presents the user with a "search" icon...
![Scrolling “Agree to Terms” Component with MooTools ScrollSpy]()
Remember the good old days of Windows applications forcing you to scroll down to the bottom of the "terms and conditions" pane, theoretically in an effort ensure that you actually read them? You're saying "No David, don't do it." Too late -- I've done...
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