Implement jQuery-like “Click” Syntax In MooTools 1.2

By  on  

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.

Recent Features

  • By
    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...

  • By
    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...

Incredible Demos

  • By
    Detect Vendor Prefix with JavaScript

    Regardless of our position on vendor prefixes, we have to live with them and occasionally use them to make things work.  These prefixes can be used in two formats:  the CSS format (-moz-, as in -moz-element) and the JS format (navigator.mozApps).  The awesome X-Tag project has...

  • By
    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...

Discussion

  1. feeble

    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?

  2. 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.

  3. @Lim Chee Aun: Great tip! I was trying to get something similar to work but couldn’t get it going. Thanks for sharing!

  4. @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.

  5. 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

  6. 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

  7. andrei009
    Element.implement({
        click: function(fn){
            return this.addEvent('click',fn);
        }
    });
  8. lamaster

    @david
    i think you should “return this”
    after implementation

    Element.implement({
    ‘click’: function(fn) {
    this.addEvent(’click’, fn);
    return this
    }
    });
    

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!