YUI 3.x Home -

Site Search (YDN & YUIBlog):

# YUI Library Examples: Node: NodeList Events

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

## Node: NodeList Events

This example demonstrates how to use events with NodeList instances.

Clicking a box will update its content.

View example in new window.

- i am lorem

- i am ispum

### Setting up the NodeList

First we need some HTML to work with.

<ul id="demo"> <li><p>i am <em>lorem</em></p></li> <li><p>i am <strong>ispum</strong></p></li> </ul>

### Handling Events

Next we will add a handler to run when the event is fired. In our handler we will update the node with the `type` of the event.

Note that the event handler receives an event object with its `currentTarget` set to the current Node instance, and the actual node clicked as the `target`. The context of the handler is the NodeList instance, so `this` refers to our NodeList instance.

var onClick = function(e) { e.currentTarget.setContent(e.type + ': ' + e.target.get('tagName')); this.addClass('yui-pass'); };

### Attaching Events

We can assign our handler to all of the items by using the `all` method to get a `NodeList` instance and using the `on` method to subscribe to the event.

Y.all('#demo li').on('click', onClick);

### Full Script Source

YUI().use('node', function(Y) { var onClick = function(e) { e.currentTarget.setContent(e.type + ': ' + e.target.get('tagName')); this.addClass('yui-pass'); }; Y.all('#demo li').on('click', onClick); });

Copyright © 2009 Yahoo! Inc. All rights reserved.

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