YUI Library Examples: Node: Delegating Node Events

Node: Delegating Node Events

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>

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

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

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