YUI 3.x Home -

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.

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

  1. <ul id="demo">
  2. <li>click me if you don't mind...</li>
  3. <li>click me if you don't mind...</li>
  4. <li>click me if you don't mind...</li>
  5. <li>click me if you don't mind...</li>
  6. </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.

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

  1. var onClick = function(e) {
  2. e.currentTarget.addClass('yui-pass'); // e.currentTarget === #demo li
  3. e.target.setContent('thanks for the click!'); // e.target === #demo li or #demo li em
  4. e.container.setStyle('border', '5px solid blue'); // e.container === #demo
  5.  
  6. nodes.filter(':not(.yui-pass)').setContent('Click me too please!');
  7. };
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.

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

Full Script Source

  1. <script type="text/javascript">
  2. YUI().use('node', function(Y) {
  3. var nodes = Y.all('#demo li');
  4.  
  5. var onClick = function(e) {
  6. e.currentTarget.addClass('yui-pass'); // e.currentTarget === #demo li
  7. e.target.setContent('thanks for the click!'); // e.target === #demo li or #demo li em
  8. e.container.setStyle('border', '5px solid blue'); // e.container === #demo
  9.  
  10. nodes.filter(':not(.yui-pass)').setContent('Click me too please!');
  11. };
  12.  
  13. Y.one('#demo').delegate('click', onClick, 'li');
  14. });
  15. </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>

Copyright © 2009 Yahoo! Inc. All rights reserved.

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