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
![5 Ways that CSS and JavaScript Interact That You May Not Know About]()
CSS and JavaScript: the lines seemingly get blurred by each browser release. They have always done a very different job but in the end they are both front-end technologies so they need do need to work closely. We have our .js files and our .css, but...
![Facebook Open Graph META Tags]()
It's no secret that Facebook has become a major traffic driver for all types of websites. Nowadays even large corporations steer consumers toward their Facebook pages instead of the corporate websites directly. And of course there are Facebook "Like" and "Recommend" widgets on every website. One...
![Create a Dynamic Flickr Image Search with the Dojo Toolkit]()
The Dojo Toolkit is a treasure chest of great JavaScript classes. You can find basic JavaScript functionality classes for AJAX, node manipulation, animations, and the like within Dojo. You can find elegant, functional UI widgets like DropDown Menus, tabbed interfaces, and form element replacements within...
![Animated Progress Bars Using MooTools: dwProgressBar]()
I love progress bars. It's important that I know roughly what percentage of a task is complete. I've created a highly customizable MooTools progress bar class that animates to the desired percentage.
The Moo-Generated XHTML
This DIV structure is extremely simple and can be controlled...
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