Dojo / on and capture phase

Is there a way to trigger an event in the capture phase (instead of bubbling phase) using dojo / on?

+4
source share
2 answers

In the end, I found information about the on () predecessor - dojo.connect (). For what it's worth, dojo.connect () does not support event listener support for the capture phase. It works by adding an event handler to the DOM node as a field, for example, node["mouseclick"] = ... Since you need to use addEventListener to receive events during the capture phase, my conclusion is that dojo.connect () cannot do this.

What you can do is add event listeners to the user object on the dom node, and then use dojo.connect () for these handlers.

 <html> <head> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/dojo/1.6.1/dojo/dojo.xd.js.uncompressed.js"></script> <script type="text/javascript"> function forwardCaptureEvent(e) { var listener = this.captureEventHandlers[e.type]; if (listener != null) listener.apply(this, arguments); } function enableCaptureEvent(domNode, eventType) { if (domNode.captureEventHandlers == null) domNode.captureEventHandlers = {}; var evtHandlers = domNode.captureEventHandlers; if (evtHandlers[eventType] == null) evtHandlers[eventType] = function(e) {}; domNode.addEventListener(eventType, forwardCaptureEvent, true); } function logEvent(label, e) { dojo.byId("log").innerHTML += label + " " + e.currentTarget.id + " " + e.type + " " + [ '', 'capturing', 'target', 'bubbling' ][ e.eventPhase ] + "<br/>"; } function logCaptureEvent(e) { logEvent("capture phase:", e); } function logBubbleEvent(e) { logEvent("bubble phase:", e); } window.onload = function () { enableCaptureEvent(dojo.byId("test"), "click"); dojo.connect(dojo.byId("test").captureEventHandlers, "click", logCaptureEvent); dojo.connect(dojo.byId("test"), "click", logBubbleEvent); } </script> </head> <body> <div id="test" style="background: darkorange; padding: 20px;"> <div style="background: gold; padding: 20px;"> <div style="background: cornsilk; ">Click me.</div> </div> </div> <div id="log"></div> </body> </html> 

So here enableCaptureEvent and forwardCaptureEvent are my helper functions. enableCaptureEvent creates a custom capture event listener object on the DOM node I talked about, and then forwardCaptureEvent used to actually receive capture events and send them to these listeners.

Then, to use these helpers, you call enableCaptureEvent with the DOM node and the name of the event you want to connect to. Then, to connect to it, you connect to a user object on the DOM node, which I called "captureEventHandlers". This is what I do in the onload handler. I also do the usual dojo.connect to show that this does not interfere with catching ordinary bubble events.

+2
source

Yes, maybe you can use aspects. http://livedocs.dojotoolkit.org/dojo/aspect

Especially to or around;)

Front

The module also includes a front-end function that provides a tip to the method. The provided advisory function will be called before the main method is called. Signature before function:

 before(target, methodName, advisingFunction); 
-2
source

All Articles