Namespaced DOM Events?

[duclet]

I want to be able to use namespaced events like jQuery. How is that possible with MooTools?

[Matthew Hazlett]

On 8/8/2012 9:14 AM, duclet wrote:
> I want to be able to use namespaced events like jQuery. How is that
> possible with MooTools?

Not sure I get what you are saying but you can call an event in a class.

Then in your parent module you can say something like:

myClass.addEvent('eventName', function(){
});

[verylastminute]

You are welcome to port the CS version of my solution to JS (haven't presently got the time).

 

do ->

    splitter = ":" # e.g. foo:click

    key = "events.namespace." # e.g. events.namespace.foo

    # do not edit below this line unless you know what you are doing!

    addNamespaceEvent = (name, callback, s) ->

        [namespace, type] = name.split(s or splitter)

        cache = @retrieve(key + namespace) or {}

        cache[type] ?= []

        cache[type].push(callback)

        @addEvent(type, callback)

        @store(key + name, cache)

    addNamespaceEvents = (events, s) ->

        @addNamespaceEvent(name, callback, s) for own name, callback of events

    removeNamespaceEvent = (name, s) ->

        [namespace, type] = name.split(s or splitter)

        cache = @retrieve(key + namespace) or {}

        cache[type] ?= []

        for own index, callback of cache[type]

            @removeEvent(type, callback)

        delete cache[type]

    removeNamespaceEvents = (namespace, s) ->

        cache = @retrieve(key + namespace) or {}

        for own type of cache

            @removeNamespaceEvent(namespace + (s or splitter) + type)

        @erase(key + namespace)

    Element.implement({

        "addNamespaceEvent": addNamespaceEvent

        "addNamespaceEvents": addNamespaceEvents

        "removeNamespaceEvent": removeNamespaceEvent

        "removeNamespaceEvents": removeNamespaceEvents

    })

    Window.implement({

        "addNamespaceEvent": addNamespaceEvent

        "addNamespaceEvents": addNamespaceEvents

        "removeNamespaceEvent": removeNamespaceEvent

        "removeNamespaceEvents": removeNamespaceEvents

    })

    Document.implement({

        "addNamespaceEvent": addNamespaceEvent

        "addNamespaceEvents": addNamespaceEvents

        "removeNamespaceEvent": removeNamespaceEvent

        "removeNamespaceEvents": removeNamespaceEvents

    })

    return

[verylastminute]

usage: 

events = {}
events[namespace + ":domready"] = design
events[namespace + ":resize"] = resize
window.addNamespaceEvents(events)

 

window.removeNamespaceEvents(namespace)

[Garrick]

So, in essence you want custom events. You can attach a custom event to anything that is extended with Events. The only thing is that you have to manually trigger them.

For example:

window.addEvent('awesomeSpace:go', function(){ console.log('triggered awesome'); });

window.fireEvent('awesomeSpace:go');

You can also pass arguments to the event you're firing:

var element = $('someId'); // lets assume an element with id="someId" exists in the DOM.

element.addEvent('ToDo:addItem', function(title){ console.log('Adding "' + title + '" to the list!'); });

element.fireEvent('ToDo:addItem', 'Conquer the world'); // console prints: Adding "Conquer the world" to the list!

[verylastminute]

I think he may be interested in the standard DOM events attached to a namespace...

[gonchuki]

On Thursday, August 9, 2012 3:09:44 AM UTC-3, verylastminute wrote:

I think he may be interested in the standard DOM events attached to a namespace...

I'm pretty sure it's that.

This should probably be done as a full fledged plugin, working in a similar way as delegation does, except that instead of looking for the :relay pseudo you could go for a :ns pseudo or use the dot notation that jQuery uses.

To any extent, namespacing of events should be a last resort measure, if you keep track of your attached events you should always be able to fire or remove them without needing that namespace.

[verylastminute]

gonchuki: there is nothing simpler than being able to instantly remove or selectively fire all events a plugin or UI widget has added to a set of pre-defined DOM elements. This is especially the case when dealing with declarative (behavioral) markup. The code I posted above will work and follows the syntax of ns:type e.g. widget:click.

[verylastminute]

Here is a link to the coffeescript.org conversion of the above code.