fb1ecdf65fd4106deb62da339763f2e7670ca0f6Matt Sweeney<link href="{{componentAssets}}/node.css" rel="stylesheet" type="text/css">
fb1ecdf65fd4106deb62da339763f2e7670ca0f6Matt Sweeney<div class="intro">
fb1ecdf65fd4106deb62da339763f2e7670ca0f6Matt Sweeney <p>This example demonstrates using a single event listener on a list to delegate clicks on the list items.</p>
fb1ecdf65fd4106deb62da339763f2e7670ca0f6Matt Sweeney<div class="example">
fb1ecdf65fd4106deb62da339763f2e7670ca0f6Matt Sweeney{{>node-evt-delegation-source}}
fb1ecdf65fd4106deb62da339763f2e7670ca0f6Matt Sweeney<h2>Setting up the HTML</h2>
fb1ecdf65fd4106deb62da339763f2e7670ca0f6Matt Sweeney<p>First we need some HTML to work with.</p>
fb1ecdf65fd4106deb62da339763f2e7670ca0f6Matt Sweeney<ul id="demo">
fb1ecdf65fd4106deb62da339763f2e7670ca0f6Matt Sweeney <li>click me if you don't mind...</li>
fb1ecdf65fd4106deb62da339763f2e7670ca0f6Matt Sweeney <li>click me if you don't mind...</li>
fb1ecdf65fd4106deb62da339763f2e7670ca0f6Matt Sweeney <li>click me if you don't mind...</li>
fb1ecdf65fd4106deb62da339763f2e7670ca0f6Matt Sweeney <li>click me if you don't mind...</li>
fb1ecdf65fd4106deb62da339763f2e7670ca0f6Matt Sweeney<h2>Geting a NodeList Instance</h2>
fb1ecdf65fd4106deb62da339763f2e7670ca0f6Matt Sweeney<p>We will use the <code>all</code> method of our YUI instance to get a <code>NodeList</code> instance to work with.</p>
fb1ecdf65fd4106deb62da339763f2e7670ca0f6Matt Sweeneyvar nodes = Y.all('#demo li');
fb1ecdf65fd4106deb62da339763f2e7670ca0f6Matt Sweeney<h2>Delegating Node Events</h2>
fb1ecdf65fd4106deb62da339763f2e7670ca0f6Matt Sweeney<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>
fb1ecdf65fd4106deb62da339763f2e7670ca0f6Matt Sweeneyvar onClick = function(e) {
fb1ecdf65fd4106deb62da339763f2e7670ca0f6Matt Sweeney e.currentTarget.addClass('yui-pass'); // e.currentTarget === #demo li
fb1ecdf65fd4106deb62da339763f2e7670ca0f6Matt Sweeney e.target.setContent('thanks for the click!'); // e.target === #demo li or #demo li em
fb1ecdf65fd4106deb62da339763f2e7670ca0f6Matt Sweeney e.container.setStyle('border', '5px solid blue'); // e.container === #demo
fb1ecdf65fd4106deb62da339763f2e7670ca0f6Matt Sweeney nodes.filter(':not(.yui3-pass)').setContent('Click me too please!');
fb1ecdf65fd4106deb62da339763f2e7670ca0f6Matt Sweeney<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>
fb1ecdf65fd4106deb62da339763f2e7670ca0f6Matt SweeneyY.one('#demo').delegate('click', onClick, 'li');
fb1ecdf65fd4106deb62da339763f2e7670ca0f6Matt Sweeney<h2>Complete Example Source</h2>
fb1ecdf65fd4106deb62da339763f2e7670ca0f6Matt Sweeney{{>node-evt-delegation-source}}