#

# Example: Handling DOM Events

This example demonstrates how to respond to DOM events from a Node instance.

Clicking one of the elements will report some event details.

emphasis `code` strong anchor

Click an element above to see its event data.

## Setting up the HTML

First we need some HTML to work with.

    <div id="container">
        <p>
            <em>emphasis</em> <code>code</code> <strong>strong</strong> <a>anchor</a>
            <img src="../assets/node/images/birds.png" align="middle"/>
        </p>
    </div>
    <div id="event-result">Click an element above to see its event data.</div>

## Creating the Event Handler

Next we'll create a handler to run when the event is fired. In our handler we'll update the `#event-result` node with some data available through the event.

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

        Y.one('#event-result').setHTML('<dl>' +
            '<dt>Event Type: </dt>' +
                '<dd>' + e.type + '</dd>' +
            '<dt>Target Tag Name: </dt>' +
                '<dd>' + target.get('tagName') + '</dd>' +
            '<dt>Color of Target's Font: </dt>' +
                '<dd class="dd-color" style="background-color:' + target.getStyle('color') + ';">' + '</dd>' +
            '<dt>CurrentTarget Tag Name & Id: </dt>' +
                '<dd>' + currentTarget.get('tagName') + '#' + currentTarget.get('id') + '</dd>' +
            '</dl>');
    };

## Listening for Events

We can assign our handler to the container of the objects by using the `Y.one`. Clicking on any object in the container will bubble the event to the container. We're using the 'on' method to subscribe to the click and dblclick events.

    Y.one('#container').on('click', onClick);
    Y.one('#container').on('dblclick', onClick);

## Complete Example Source

    <style>
    #container{
        font-size: 200%;
        cursor: pointer;
        padding: 0 0.5em;
        margin-bottom: 0.3em;
        border-bottom: solid 1px #ccc;
        text-align: center;
    }

    #container em{
        color: red;
        font-weight: bold;
        font-size: 130%;
    }

    #container strong{
        color: green;
        font-weight: bold;
        font-family: arial black;
    }

    #container code{
        background-color: #000;
        color: #CEFFA2;
        padding: 0.3em;
        font-weight: bold;
        font-family: Courier,monospace;
    }

    #container a{
        color: #00f;
        padding: 0.3em;
        text-decoration: underline;
        font-family: verdana;
    }

    .example .dd-color{
        height: 1em;
        width: 3em;
    }

    .example dt{
        font-weight: normal;
        color: #999999;
    }

    .example dd{
        margin: 0 1.5em 0.3em;
    }

    .example dl{
        margin: 0;
    }
    </style>

    <div id="container">
        <p> <em>emphasis</em> <code>code</code> <strong>strong</strong> <a>anchor</a> <img src="../assets/node/images/birds.png" align="middle"/></p>
    </div>
    <div id="event-result">Click an element above to see its event data.</div>

    <script type="text/javascript">
    YUI().use('node', function(Y) {
        var onClick = function(e) {
            var type = e.type,
                currentTarget = e.currentTarget, // #container
                target = e.target; // #container or a descendant

            Y.one('#event-result').setHTML('<dl>' +
                '<dt>Event Type: </dt>' +
                    '<dd>' + e.type + '</dd>' +
                '<dt>Target Tag Name: </dt>' +
                    '<dd>' + target.get('tagName') + '</dd>' +
                '<dt>Color of Target\'s Font: </dt>' +
                    '<div class="dd-color" style="background-color:' + target.getComputedStyle('color') + ';">' + '</div>' +
                '<dt>CurrentTarget Tag Name & Id: </dt>' +
                    '<dd>' + currentTarget.get('tagName') + '#' + currentTarget.get('id') + '</dd>' +
                '</dl>');
        };

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