O'Reilly

Create Custom Events in MooTools 1.2

By on  

Javascript has a number of native events like "mouseover," "mouseout", "click", and so on. What if you want to create your own events though? Creating events using MooTools is as easy as it gets.

The MooTools JavaScript

/* click - control event */
Element.Events.altClick = {
	base: 'click',
	condition: function(event) {
		return event.alt; // alt key?
	}
};

/* usage */
window.addEvent('domready',function() {
	var ccs = 0, acd = $('alt-click-div');
	acd.addEvent('altClick',function() {
		acd.set('text','You have alt-clicked me ' + (++ccs) + ' times');
	});
});

What's great about creating custom events in MooTools is that you need to give the Element.Events object as little information as you could imagine: a base to listen for the custom event for and a condition property that you return a Boolean value from if the condition matches your desired event.

When would you use alt-click? Maybe in my MooTools ContextMenu plugin? Do you have any custom events you live by?

Track.js Error Reporting

Recent Features

Incredible Demos

  • CSS Scoped Styles

    There are plenty of awesome new attributes we've gotten during the HTML5 revolution:  placeholder, download, hidden, and more.  Each of these attributes provides us a different level of control over an element on the page, but there's a new element attribute that allows...

  • CSS Animations Between Media Queries

    CSS animations are right up there with sliced bread. CSS animations are efficient because they can be hardware accelerated, they require no JavaScript overhead, and they are composed of very little CSS code. Quite often we add CSS transforms to elements via CSS during...

Discussion

  1. jem

    I use custom events in a lot of the classes i write. more complex tools i tend to break into multiple classes… like a slideshow might have a SlideShowManager class, and then it manages instances of a SlideClass. The Slide class will take the “controller” as an argument in its init function, and i have slides listen to custom events that the controller fires. I’ve found this helps keep the flow of the tool a lot cleaner and leaves less room for weird glitches or unusual logic… The manager might do something like this in a function:

    this.fireEvent(‘onSlideSelect’, [slideId, blah, blah])

    The slides that are listening can identify if they need to respond by comparing their ID to the slideId thats passed.

  2. adamnfish

    I might be missing something obvious but it doesn’t seem to work in OSX.

  3. he’s right, it doesn’t work on OSX david ! :(

  4. Thanks for the update guys. I wonder if it has something to do with Mac’s “option” key. I don’t develop on Macs — I’ll look for a solution though!

  5. adamnfish

    Yeah, OSX doesn’t pass the ctrlKey property of an event ever so if event.control is reading from that directly it won’t work. A cross browser implementation would probably need to listen for the keycode of ctrl and set the event’s ctrlKey property to true if it is down.

    That would mean listening for key presses on the whole document though, so it wouldn’t be worth it unless you really needed the functionality.

    ps. altKey seems to work fine!

  6. @adamnfish: Thanks. I’ve changed to the ALT key and it works perfectly. I’ll research the “control” issue further. Someone metioned that control-click is the same as right-click on a Mac, but I’ve yet to verify.

  7. Element.Events.konami = {
        base: 'keyup',
        condition: function(e){
            $clear(this.retrieve('konami_timeout'));
            var input = this.retrieve('konami_input',[]);
            input.push(e.key);
            if (input.join(',') == "up,up,down,down,left,right,left,right,b,a,enter"){
                this.removeEvents('konami');
                return true;
            }
            this.store('konami_input',input).store('konami_timeout',(function(){this.eliminate('konami_input');}).delay(2000,this));
        }
    };
    
  8. Daniel Steigerwald

    Hi David, you have to check meta key for mac. Another event extension:

    Event.implement({
        uberControlPressed: function() {
            return Browser.Platform.mac ? this.meta : this.control;
        }
    });
  9. Awesome Daniel!

  10. Nice, but ALT+click does not work on Linux LOL! I know, is very hard to write scripts crossbrowser. The problem is not Linux exactly, is because ALT+Click is an event for Drag&Drop the windows on the Gnome Desktop from any part of these. I do not know if this happens too on KDE.

    But, I tested with control key and works fine. Nice tip David, I’m gonna put it on the practice right now.

  11. David, it work now on macOSX with firefox3 and the Alt-Click :)

  12. olivier: Awesome!

  13. Hi David,

    There is a conflict between your alt+click and FlashGet Download Manager.

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

Recently on David Walsh Blog

  • Follow Redirects with cURL

    I love playing around with cURL. There's something about loading websites via command line that makes me feel like some type of smug hacker, just like tweeting from command line does. I recently cURL'd the Google homepage and saw the following: I found it weird that Google...

  • Developers Have WordPress, Amateurs Have Squarespace, Professional Designers Have the NEW Webydo!

    Web design platforms have traditionally come in one of two varieties. There are the solutions like WordPress and Drupal that are incredibly powerful, but an understanding of web development and coding is required to be able to use those platforms effectively. On the other side of the...

  • Chris Coyierâs Favorite CodePen Demos II

    Hey everyone! Before we get started, I just want to say it’s damn hard to pick this few favorites on CodePen. Not because, as a co-founder of CodePen, I feel like a dad picking which kid he likes best (RUDE). But because there is just so...

  • GSAP + SVG For Power Users: Motion Along A Path

    Now that the GreenSock API is picking up steam, there are many tutorials and Getting Started guides out there to provide good introductions to the library, not to mention GreenSock’s own Forum and Documentation. This article isn’t intended for beginners, but rather a...

  • Copy a Directory from Command Line

    Copying a directory for the sake of backup is something I do often, especially when I'm trying to figure out why something isn't working when I use an external library.  I'll copy the directory structure as a backup, mess around with the original source until I find a solution,...