YUI Library Examples: Node: NodeList Events

Node: NodeList Events

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>

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

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

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

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