Search code examples
jquerynamespacesmootoolsmootools-events

MooTools version of jQuery's namedspace events?


jQuery lets you do things like

$div.bind('click.namespace', function)
$div.unbind('click.namespace')

Is there any equivalent in MooTools? I tried defining a pseudo event:

Event.definePseudo('shim', function(split, fn, args) {fn.apply(this, args);})

document.body.addEvent('click', function(){alert('regular click');});
document.body.addEvent('click:shim', function(){alert('shim click');});

document.body.removeEvents('click') // removes both!
document.body.removeEvents('click:shim') // removes neither!

That seems like a dead end.


Solution

  • I implemented it using Element.implement, but my question is asking for a native MooTools way to do it, without defining my own functions.

    Element.implement({
        // Call as element.bind('event.namespace', function() {});
        bind: function(name, funktion) {
            // Get event type and namespace
            var split = name.split('.'),
                eventName = split[0],
                namespace = split[1];
    
            // Store the event by its full name including namespace
            this.bindCache = this.bindCache || {};
    
            if(this.bindCache[name]) {
                this.bindCache[name].push(funktion);
            } else {
                this.bindCache[name] = [funktion];
            }
    
            // Bind the function to the event
            this.addEvent(eventName, funktion);
        },
    
        // Call as element.unbind('event.namespace');
        unbind: function(name) {
            // Unbind the specified event
            var eventName = name.split('.')[0],
                funktions = this.bindCache[name],
                x = 0,
                funktion;
    
            for(; funktion = funktions[x++]; ) {
                this.removeEvent(eventName, funktion);
            }
        }
    });
    
    document.body.bind('click.1', function() {alert('click 1');});
    document.body.bind('click.1', function() {alert('click 1 other');});
    document.body.bind('click.2', function() {alert('click 2');});
    
    document.body.unbind('click.1'); // leaves click.2