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

Upcoming Events

Recent Features

  • Introducing MooTools Templated

    One major problem with creating UI components with the MooTools JavaScript framework is that there isn't a great way of allowing customization of template and ease of node creation. As of today, there are two ways of creating: new Element Madness The first way to create UI-driven...

  • Camera and Video Control with HTML5

    Client-side APIs on mobile and desktop devices are quickly providing the same APIs.  Of course our mobile devices got access to some of these APIs first, but those APIs are slowly making their way to the desktop.  One of those APIs is the getUserMedia API,...

Incredible Demos

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

  • Free Download: Font Bundle Featuring 17 Incredible Typefaces

    The only thing we love more than a good font, is a good free font. So we’ve combed the Web for some of our favorite free fonts, and gathered them here in a single download. You’ll find a variety of useful typefaces, from highly geometric designs...

  • OâReilly Velocity Conference â Amsterdam

    My favorite front-end conference has always been O'Reilly's Velocity Conference because the conference series has focused on one of the most undervalued parts of client side coding:  speed.  So often we're so excited that our JavaScript works that we forget that speed, efficiency, and performance are just as important. The next Velocity...

  • CanIUse Command Line

    Every front-end developer should be well acquainted with CanIUse, the website that lets you view browser support for browser features.  When people criticize my blog posts for not detailing browser support for features within the post, I tell them to check CanIUse:  always up to date, unlike...

  • Generating Alternative Stylesheets for Browsers Without @media

    If your CSS code is built with a mobile-first approach, it probably contains all the rules that make up the "desktop" view inside @media statements. That's great, but browsers that don't support media queries (IE 8 and below) will simply ignore them, ending up getting the...

  • Serve a Directory with PHP

    Many developers have a giggle at PHP, even looking down at the language, but let's be honest:  most of our blogs are powered by it (WordPress) and it's a great language to dabble around with.  I cut my teeth on PHP, though I prefer to avoid PHP these days. But...