YUI 3.x Home -

Site Search (YDN & YUIBlog):

# YUI Library Examples: Node: Delegating Node Events

Note: This is YUI 3.x. Looking for YUI 2.x?

## Node: Delegating Node Events

This example demonstrates using a single event listener on a list to delegate clicks on the list items.

View example in new window.

- 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(.yui-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.get('#demo').on('click', onClick);

### Full Script Source

<script type="text/javascript"> YUI().use('node', function(Y) { var nodes = Y.all('#demo li'); 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(.yui-pass)').setContent('Click me too please!'); }; Y.get('#demo').delegate('click', onClick, 'li'); }); </script>

Copyright © 2009 Yahoo! Inc. All rights reserved.

Privacy Policy - Terms of Service - Copyright Policy - Job Openings