Implement MooTools’ Elements.addEvent in jQuery

By  on  

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

Recent Features

  • By
    How I Stopped WordPress Comment Spam

    I love almost every part of being a tech blogger:  learning, preaching, bantering, researching.  The one part about blogging that I absolutely loathe:  dealing with SPAM comments.  For the past two years, my blog has registered 8,000+ SPAM comments per day.  PER DAY.  Bloating my database...

  • By
    Conquering Impostor Syndrome

    Two years ago I documented my struggles with Imposter Syndrome and the response was immense.  I received messages of support and commiseration from new web developers, veteran engineers, and even persons of all experience levels in other professions.  I've even caught myself reading the post...

Incredible Demos

  • By
    Send Email Notifications for Broken Images Using MooTools AJAX

    One of the little known JavaScript events is the image onError event. This event is triggered when an image 404's out because it doesn't exist. Broken images can make your website look unprofessional and it's important to fix broken images as soon as possible.

  • By
    Creating Spacers with Flexbox

    I was one of the biggest fans of flexbox before it hit but, due to being shuffled around at Mozilla, I never had the chance to use it in any practice project; thus, flexbox still seems like a bit of a mystery to me.  This greatly...

Discussion

  1. More concise :

    jQuery.fn.addEvent = jQuery.fn.bind;

  2. Well put Pierre…well put.

  3. I too prefer verbs like el.setStyle v. el.css. But swapping syntax would totally goof me up!

  4. I don’t get it, why not just use

    $('#myelement').bind('click', function() {...});
    

    It’s even shorter than ‘addEvent’

  5. I agree with Corey, $().bind is exactly what you’re looking for…

  6. Bo Hunter

    I would have to agree, this is nothing more than an alias.

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

  8. Pradeep

    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

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