YUI 3.x Home -

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.

  • lorem
  • ispum
  • dolor
  • sit

Setting up the Node

First we need some HTML to work with.

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.

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.

Full Script Source

Copyright © 2009 Yahoo! Inc. All rights reserved.

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