This example demonstrates using a single event listener on a list to delegate clicks on the list items.
- click me if you don't mind...
- click me if you don't mind...
- click me if you don't mind...
- click me if you don't mind...
Setting up the HTML
First we need some HTML to work with.
<ul id="demo">
<li>click me if you don't mind...</li>
<li>click me if you don't mind...</li>
<li>click me if you don't mind...</li>
<li>click me if you don't mind...</li>
</ul>
Geting a NodeList Instance
We will use the all method of our YUI instance to get a NodeList instance to work with.
var nodes = Y.all('#demo li');
Delegating Node Events
In this example, we will listen for a click event on the list and handle it at the item level and use information from the event object to update the nodes.
var onClick = function(e) {
e.currentTarget.addClass('yui-pass'); // e.currentTarget === #demo li
e.target.setContent('thanks for the click!'); // e.target === #demo li or #demo li em
e.container.setStyle('border', '5px solid blue'); // e.container === #demo
nodes.filter(':not(.yui3-pass)').setContent('Click me too please!');
};
Now we just assign the handler to the UL using the delegate method to handle clicks on each LI.
Y.one('#demo').delegate('click', onClick, 'li');
Complete Example Source
<ul id="demo">
<li><em>click me if you don't mind...</em></li>
<li><em>click me if you don't mind...</em></li>
<li><em>click me if you don't mind...</em></li>
<li><em>click me if you don't mind...</em></li>
</ul>
<script type="text/javascript">
YUI().use('node', function(Y) {
var nodes = Y.all('#demo li');
var onClick = function(e) {
e.currentTarget.addClass('highlight'); // e.currentTarget === #demo li
e.target.setContent('thanks for the click!'); // e.target === #demo li or #demo li em
e.container.setStyle('border', '5px solid blue'); // e.container === #demo
nodes.filter(':not(.highlight)').setContent('Click me too please!');
};
Y.one('#demo').delegate('click', onClick, 'li');
});
</script>