How to use

This plugin provies a method Element.defineCustomEvent

// Fires when the user presses control
Element.defineCustomEvent('control', {

    base: 'keydown',

    condition: function(event){
        return !!event.control;
    }

});

Usage

document.addEvent('control', function(event){
    // doSomething
});

Subclassing

// Fires when the user presses both control and alt
Element.defineCustomEvent('control+alt', {

    base: 'control',

    condition: function(event){
        return !!event.alt;
    }

});

document.addEvent('control+alt', function(event){
    // doSomething else
});

In addition there are also new "onSetup" and "onTeardown" events that get fired when the first listener gets added and when the last one got removed

// Example from MooTools Mobile ( http://github.com/cpojer/mootools-mobile )
var preventDefault = function(event){
    event.preventDefault();
};

Element.defineCustomEvent('touch', {

    base: 'touchend',

    condition: function(event){
        // code
    },

    onSetup: function(){
        this.addEvent('touchstart', preventDefault);
    },

    onTeardown: function(){
        this.removeEvent('touchstart', preventDefault);
    }

});

There is also a new "hasEvent" method on Element to check whether an element has listeners associated to a specified event

if (myElement.hasEvent('click')) // this element has click events associated with it

Build

Build via Packager, requires MooTools Core to be registered to Packager already

packager register /path/to/custom-event
packager build Custom-Event/* > custom-event.js

To build this plugin without external dependencies use

packager build Custom-Event/* +use-only Custom-Event > custom-event.js

Demo

See Demos/index.html

Enable Disable Custom Events

To disable or enable certain custom events global you can use

Element.disableCustomEvents();

To enable them again you can use

Element.enableCustomEvents();

There are onEnable and onDisable methods on custom events to manually handle a call do disable/enable:

var isEnabled = true;
Element.defineCustomEvent('myCustomEvent', {

    base: 'touchstart'

    condition: function(){
        return isEnabled;
    },

    onEnable: function(){
        isEnabled = true;
    }

    onDisable: function(){
        isEnabled = false;
    }

});

Discuss

A note on comments here: These comments are moderated. No comments will show up until they are approved. Comments that are not productive (i.e. inflammatory, rude, etc) will not be approved.

Found a bug in this plugin? Please report it this repository's Github Issues.