Example: Handling DOM Events

Setting up the HTML

First we need some HTML to work with.

<div id="demo">
    <p><em>lorem</em> <code>ipsum</code> <strong>dolor</strong> <span>sit</span></p>
    <div id="event-result"></div>
</div>

Creating the Event Handler

Next we will create a handler to run when the event is fired. In our handler we will update the node with some of the properties of the event.

var onClick = function(e) {
    var type = e.type,
        currentTarget = e.currentTarget, // #demo
        target = e.target; // #demo or a descendant

    Y.one('#event-result').setContent('<dl>' +
        '<dt>type</dt><dd>' + e.type + '</dd>' +
        '<dt>target</dt><dd>' + target.get('tagName') + '</dd>' +
        '<dt>currentTarget</dt><dd>' + currentTarget.get('tagName') +
            '#' + currentTarget.get('id') + '</dd></dl>');
};

Listening for 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.one('#demo').on('click', onClick);

Complete Example Source

<link href="../assets/node/node.css" rel="stylesheet" type="text/css">
<div id="demo">
    <p><em>lorem</em> <code>ipsum</code> <strong>dolor</strong> <span>sit</span></p>
    <div id="event-result">Click anywhere in the box to see some event data.</div>
</div>

<script type="text/javascript">
YUI().use('node', function(Y) {
    var onClick = function(e) {
        var type = e.type,
            currentTarget = e.currentTarget, // #demo
            target = e.target; // #demo or a descendant
            
        Y.one('#event-result').setContent('<dl>' +
            '<dt>type</dt><dd>' + e.type + '</dd>' +
            '<dt>target</dt><dd>' + target.get('tagName') + '</dd>' +
            '<dt>currentTarget</dt><dd>' + currentTarget.get('tagName') +
                '#' + currentTarget.get('id') + '</dd></dl>');
    };

    Y.one('#demo').on('click', onClick);
});
</script>