Skip to Content | Skip to Navigation


dojox.NodeList.delegate

author:Bill
since:1.6.0

Overview

A module providing an event delegation API to dojo.NodeList

Delegate() monitors nodes in this NodeList for [bubbled] events on nodes that match a given selector.

This allows an app to setup a single event handler on a high level node, rather than many event handlers on subnodes. For example, to monitor clicks on any <a> in your navigation section:

dojo.query("#navbar").delegate("a", "onclick", function(evt){ ... } )

Since setting up many event handlers is expensive, using delegate() can increase performance.

Also, since the handler (in this example) is on navbar, it will report clicks on any <a> nodes added to navbar in the future (in addition to the <a> nodes in navbar at the time of the delegate() call).

Note that delegate() will not work for events that don’t bubble, like focus. onmouseenter/onmouseleave also don’t currently work.

Example

A navigation bar

<div id="navbar">
    <a href="#" id="home">home</a> &nbsp;
    <a href="#" id="mail">mail</a> &nbsp;
    <a href="#" id="calendar">calendar</a> &nbsp;
</div>

dojo.delegate in action

dojo.require("dojox.NodeList.delegate");
dojo.ready(function(){
  dojo.query("#navbar").delegate("a", "onclick", function(evt){
      alert("clicked " + dojo.attr(this, "id"));
      dojo.stopEvent(evt);
  });
});