Implement jQuery-like “Click” Syntax In MooTools 1.2
I've updated this post's content per reader comments. Thanks to everyone for their suggestions!
While I prefer the MooTools syntax over the jQuery syntax, I do respect the jQuery syntax. Here's a quick way to make your MooTools look a little like jQuery by implementing the Element.click() function.
The MooTools JavaScript
Element.implement({
'click': function(fn) {
return this.addEvent('click',fn);
}
});
The MooTools JavaScript Usage
window.addEvent('domready',function() {
//show an alert when the element is clicked.
$('click-me').click(function() {
alert('Clicked');
});
});
This syntax will allow for shorter code if you do a lot of click event programming.
![JavaScript Promise API]()
While synchronous code is easier to follow and debug, async is generally better for performance and flexibility. Why "hold up the show" when you can trigger numerous requests at once and then handle them when each is ready? Promises are becoming a big part of the JavaScript world...
![Creating Scrolling Parallax Effects with CSS]()
Introduction
For quite a long time now websites with the so called "parallax" effect have been really popular.
In case you have not heard of this effect, it basically includes different layers of images that are moving in different directions or with different speed. This leads to a...
![Vertically Centering with Flexbox]()
Vertically centering sibling child contents is a task we've long needed on the web but has always seemed way more difficult than it should be. We initially used tables to accomplish the task, then moved on to CSS and JavaScript tricks because table layout was horribly...
![Dynamic Waveform Visualizations with wavesurfer.js]()
Waveform images are an awesome addition to boring audio widgets. They can be functional as well as aesthetically pleasing, allowing users to navigate audio visually. I recently found wavesurfer.js, an amazing waveform image utility that uses to Web Audio API to create super customizable...
Hey, Just wanted to say thanks for your blog, its really helped me along with Mootools, and I enjoy working and creating things with ease.
I just need to know thou,
Should I be switching over to JQuery.
with Microsoft’s decision to incorporate JQuery, I’m wondering if I’m using the wrong framework.
I read the article at juliocapote.com
and well I just need a Yes or a No.
I trust your judgment.
and
Iis the future of Mootools sound?
Nice, but why not just pass the whole ‘fn’ to the ‘addEvent’ function? Eg:
Element.implement({ 'click': function(fn) { this.addEvent('click', fn); } });.. because some coders might probably do this:
$('click-me').click(function(e) { e.stop(); alert('Clicked'); });… and probably some don’t want to ‘stop’ the event by default.
@Lim Chee Aun: Great tip! I was trying to get something similar to work but couldn’t get it going. Thanks for sharing!
@david: No problem. I’m actually working (very slowly) on porting (almost) all jQuery-style syntax to Mootools. Not sure if it will be useful though.
Something I’ve thought of that might be a slight problem, though haven’t tested, is binding.
I could see someone trying to use this keyword, and might even remember to bind it in the click function, but when it gets used in the addEvent part, you didnt bind this.
Like I said, haven’t tested for actual failure, but in theory it sounds breakable :D
In my meager JavaScript dabblings, I’ve always been jealous of jQuery’s event syntax. Needless to say, I’m really happy to see this as an option.
I’m somewhat of a hobbyist, so I apologize in advance for any mistakes. I did a little playing around and it looks like it doesn’t break .bind(this). This, of course, is a trivial implementation and there’s a chance that I totally misused .bind()
If anyone’s curious, the link in my name goes to my uh … ultra-complex tests :P
Element.implement({ click: function(fn){ return this.addEvent('click',fn); } });@david
i think you should “return this”
after implementation
Element.implement({ ‘click’: function(fn) { this.addEvent(’click’, fn); return this } });