Create a way for services to autowire up events like modules

[nzakas]

People seem to really like using the autowiring of events in modules and behaviors, and when they get to modules, they are disappointed that they need to wire up their own event handlers the old-fashioned way. It would be nice to provide some facility for services to do declarative event handling in the same way behaviors and modules do.

[priyajeet]

One downside with autowiring might be the inability to do an optimization like this:

Say I am writing a scrubber bar plugin (widget) for media seeking / volume slider. Multiple of these can exist visually on a given page. I need to handle a mousedown --> mousemove --> mouseup to get the scrubber handle drag behavior. The mousedown happens on the scrubber handle, but the other two need to happen on the whole document. So I essentially only want to bind/listen to those events after mousedown has happened otherwise we are essentially firing a lot of mousemove and mouseup events in the document's context (or another nearby scrubber's context) thats nothing to do with the scrubber handle that the user clicked.

[nzakas]

Then you wouldn't use this capability, you would just do what you're already doing. :)

[nzakas]

So here's what I'm thinking for this. We want services to mostly be free-form, which means we also don't want to enforce any sort of interface on them. However, we can provide some low-level building blocks that let services do some common tasks. For instance, we already have Box.EventTarget, which our internal services tend to use in order to incorporate custom events.

What I'm thinking is something like Box.DOMEventDelegate that encapsulates the functionality currently exposed through modules and behaviors, such that you can do this:

var element = document.querySelector('.some.element');
var delegate = new Box.DOMEventDelegate(element, {
    onclick: function(event, element, elementType) {
        // handle clicks
    }
});

delegate.attachEvents();   // attach all events

//later
delegate.detachEvents();  // clean it all up

This would allow you to incorporate module-like event handling into a service by using an instance of Box.DOMEventDelegate to manage events in a single area. We could then refactor application.js so that modules and behaviors use this to implement event handling.

Thoughts?

[j3tan]

I think this is a good strategy that provides module-like event delegation if someone wants it. I assume that the list of events supported will probably be kept internal to the DOMEventDelegate object.

[nzakas]

Yeah, I'm envisioning moving all the event-related functionality into DOMEventDelegate so it all lives in one place.

[Duan112358]

awesome.