10139N/A<link href="{{componentAssets}}/node.css" rel="stylesheet" type="text/css">

10139N/A<div class="intro">

10139N/A <p>This example demonstrates using a single event listener on a list to delegate clicks on the list items.</p>

20291N/A</div>

10139N/A

10139N/A<div class="example">

10139N/A{{>node-evt-delegation-source}}

17820N/A</div>

10139N/A

17177N/A<h2>Setting up the HTML</h2>

18603N/A<p>First we need some HTML to work with.</p>

17177N/A```

10139N/A<ul id="demo">

10139N/A <li>click me if you don't mind...</li>

10139N/A <li>click me if you don't mind...</li>

10139N/A <li>click me if you don't mind...</li>

18905N/A <li>click me if you don't mind...</li>

10139N/A</ul>

10139N/A```

18615N/A

10139N/A<h2>Geting a NodeList Instance</h2>

18532N/A<p>We will use the <code>all</code> method of our YUI instance to get a <code>NodeList</code> instance to work with.</p>

10159N/A```

12094N/Avar nodes = Y.all('#demo li');

12773N/A```

12773N/A

12773N/A<h2>Delegating Node Events</h2>

10139N/A<p>In this example, we will listen for a <code>click</code> event on the list and handle it at the item level and use information from the <code>event</code> object to update the nodes.</p>

10139N/A```

19022N/Avar onClick = function(e) {

19022N/A e.currentTarget.addClass('yui-pass'); // e.currentTarget === #demo li

20291N/A e.target.setContent('thanks for the click!'); // e.target === #demo li or #demo li em

19046N/A e.container.setStyle('border', '5px solid blue'); // e.container === #demo

20291N/A

20291N/A nodes.filter(':not(.yui3-pass)').setContent('Click me too please!');

10139N/A};

10139N/A```

10139N/A

10139N/A<p>Now we just assign the handler to the <code>UL</code> using the <code>delegate</code> method to handle clicks on each <code>LI</code>.</p>

10139N/A```

10139N/AY.one('#demo').delegate('click', onClick, 'li');

10139N/A```

10139N/A

10139N/A<h2>Complete Example Source</h2>

10139N/A```

10139N/A{{>node-evt-delegation-source}}

10139N/A```

10139N/A