YUI 3.x Home -

Site Search (YDN & YUIBlog):

# YUI Library Examples: Node: Using Node Change Events

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

## Node: Using Node Change Events

This example demonstrates how to listen for and handle Node change events.

Hover over or inspect the items to see the result of the title change.

View example in new window.

- lorem
- ispum
- dolor
- sit

### Setting up the Node

First we need some HTML to work with.

<ul id="demo"> <li title="i am lorem">lorem</li> <li>ispum</li> <li>dolor</li> <li>sit</li> </ul>

### Handling Change Events

When an attribute of a Node instance changes, it fires a change event. The event object passed to the handler contains special properties related to the change; the `prevVal` and `newVal`, represent, respectively, the previous value of the attribute, and the new value to be assigned. Listening `on` change gives us the opportunity to prevent the change from happening, or to modify the new value prior to being set.

var onChange = function(e) { if (e.newVal === 'new title') { e.newVal = 'alternate title'; } };

### Listening for Change Events

In this case, we will listen for a `titleChange` on the first list item, and prevent that change from happening. Then we will go ahead and set the title for all items, noting that the first item's change is prevented.

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

### Full Script Source

YUI().use('node', function(Y) { var onChange = function(e) { if (e.newVal === 'new title') { e.newVal = 'alternate title'; } }; Y.get('#demo li').on('titleChange', onChange); // first LI Y.all('#demo li').set('title', 'new title'); // all LIs });

Copyright © 2009 Yahoo! Inc. All rights reserved.

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