Example: Handling DOM Events

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>