YUI 3.x Home -

Site Search (YDN & YUIBlog):

# YUI Library Examples: Node: Delegating Node Events

## 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>

    <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>

<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');

    var nodes = Y.all('#demo li');

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!');};

    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!');
    };

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');

    Y.one('#demo').delegate('click', onClick, 'li');

Y.one('#demo').delegate('click', onClick, 'li');

### 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(.yui3-pass)').setContent('Click me too please!');    };     Y.one('#demo').delegate('click', onClick, 'li');});</script>

    <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(.yui3-pass)').setContent('Click me too please!');
        };

        Y.one('#demo').delegate('click', onClick, 'li');
    });
    </script>

<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(.yui3-pass)').setContent('Click me too please!'); }; Y.one('#demo').delegate('click', onClick, 'li'); }); </script>

Copyright © 2010 Yahoo! Inc. All rights reserved.

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