summaryrefslogtreecommitdiff
path: root/js/dojo/dojox/NodeList/delegate.js
diff options
context:
space:
mode:
Diffstat (limited to 'js/dojo/dojox/NodeList/delegate.js')
-rw-r--r--js/dojo/dojox/NodeList/delegate.js66
1 files changed, 66 insertions, 0 deletions
diff --git a/js/dojo/dojox/NodeList/delegate.js b/js/dojo/dojox/NodeList/delegate.js
new file mode 100644
index 0000000..fb57cf4
--- /dev/null
+++ b/js/dojo/dojox/NodeList/delegate.js
@@ -0,0 +1,66 @@
+//>>built
+define("dojox/NodeList/delegate", ["dojo/_base/lang", "dojo/query", "dojo/_base/NodeList", "dojo/NodeList-traverse"], function(lang, query, NodeList) {
+ // module:
+ // dojox/NodeList/delegate
+ // summary:
+ // TODOC
+
+/*=====
+// doc alias helpers:
+NodeList = dojo.NodeList;
+=====*/
+
+lang.extend(NodeList, {
+ delegate: function(/*String*/ selector, /*String*/ eventName, /*Function*/ fn){
+ // summary:
+ // Monitor nodes in this NodeList for [bubbled] events on nodes that match selector.
+ // Calls fn(evt) for those events, where (inside of fn()), this == the node
+ // that matches the selector.
+ // description:
+ // Sets up event handlers that can catch events on any subnodes matching a given selector,
+ // including nodes created after delegate() has been called.
+ //
+ // This allows an app to setup a single event handler on a high level node, rather than many
+ // event handlers on subnodes. For example, one onclick handler for a Tree widget, rather than separate
+ // handlers for each node in the tree.
+ // Since setting up many event handlers is expensive, this can increase performance.
+ //
+ // Note that delegate() will not work for events that don't bubble, like focus.
+ // onmouseenter/onmouseleave also don't currently work.
+ // selector:
+ // CSS selector valid to `dojo.query`, like ".foo" or "div > span". The
+ // selector is relative to the nodes in this NodeList, not the document root.
+ // For example myNodeList.delegate("> a", "onclick", ...) will catch events on
+ // anchor nodes which are (immediate) children of the nodes in myNodeList.
+ // eventName:
+ // Standard event name used as an argument to `dojo.connect`, like "onclick".
+ // fn:
+ // Callback function passed the event object, and where this == the node that matches the selector.
+ // That means that for example, after setting up a handler via
+ // dojo.query("body").delegate("fieldset", "onclick", ...)
+ // clicking on a fieldset or *any nodes inside of a fieldset* will be reported
+ // as a click on the fieldset itself.
+ // example:
+ // | dojo.query("navbar").delegate("a", "onclick", function(evt){
+ // | console.log("user clicked anchor ", this.node);
+ // | });
+
+ // Possible future tasks:
+ // - change signature of callback to be fn(node, evt), and then have scope argument
+ // to delegate(selector, eventName, scope, fn)?
+ // - support non-bubbling events like focus
+ // - support onmouseenter/onmouseleave
+ // - maybe should return an array of connect handles instead, to allow undelegate()?
+ // - single node version
+
+ return this.connect(eventName, function(evt){
+ var closest = query(evt.target).closest(selector, this);
+ if(closest.length){
+ fn.call(closest[0], evt);
+ }
+ }); //dojo.NodeList
+ }
+});
+
+return NodeList;
+});