1bb5ce5590c8dc020c30d245453a8d0ede576fc5Matt Sweeney<div class="intro">
1bb5ce5590c8dc020c30d245453a8d0ede576fc5Matt Sweeney <p>This example demonstrates how to respond to DOM events from a Node instance.</p>
6c73d2d1eef55a20a732d66b175352d9dbf2870eJeff Conniff <p>Clicking one of the elements will report some event details.</p>
1bb5ce5590c8dc020c30d245453a8d0ede576fc5Matt Sweeney<div class="example">
1bb5ce5590c8dc020c30d245453a8d0ede576fc5Matt Sweeney{{>events-source}}
1bb5ce5590c8dc020c30d245453a8d0ede576fc5Matt Sweeney<h2>Setting up the HTML</h2>
1bb5ce5590c8dc020c30d245453a8d0ede576fc5Matt Sweeney<p>First we need some HTML to work with.</p>
6c73d2d1eef55a20a732d66b175352d9dbf2870eJeff Conniff<div id="container">
6c73d2d1eef55a20a732d66b175352d9dbf2870eJeff Conniff <em>emphasis</em> <code>code</code> <strong>strong</strong> <a>anchor</a>
6c73d2d1eef55a20a732d66b175352d9dbf2870eJeff Conniff <img src="{{{componentAssets}}}/images/birds.png" align="middle"/>
6c73d2d1eef55a20a732d66b175352d9dbf2870eJeff Conniff<div id="event-result">Click an element above to see its event data.</div>
1bb5ce5590c8dc020c30d245453a8d0ede576fc5Matt Sweeney<h2>Creating the Event Handler</h2>
6c73d2d1eef55a20a732d66b175352d9dbf2870eJeff Conniff<p>Next we'll create a handler to run when the event is fired. In our handler
6c73d2d1eef55a20a732d66b175352d9dbf2870eJeff Conniffwe'll update the `#event-result` node with some data available through the event.</p>
1bb5ce5590c8dc020c30d245453a8d0ede576fc5Matt Sweeney var onClick = function(e) {
6c73d2d1eef55a20a732d66b175352d9dbf2870eJeff Conniff currentTarget = e.currentTarget, // #container
6c73d2d1eef55a20a732d66b175352d9dbf2870eJeff Conniff target = e.target; // #container or a descendant
1bb5ce5590c8dc020c30d245453a8d0ede576fc5Matt Sweeney Y.one('#event-result').setContent('<dl>' +
6c73d2d1eef55a20a732d66b175352d9dbf2870eJeff Conniff '<dt>Event Type: </dt>' +
6c73d2d1eef55a20a732d66b175352d9dbf2870eJeff Conniff '<dd>' + e.type + '</dd>' +
6c73d2d1eef55a20a732d66b175352d9dbf2870eJeff Conniff '<dt>Target Tag Name: </dt>' +
6c73d2d1eef55a20a732d66b175352d9dbf2870eJeff Conniff '<dd>' + target.get('tagName') + '</dd>' +
6c73d2d1eef55a20a732d66b175352d9dbf2870eJeff Conniff '<dt>Color of Target's Font: </dt>' +
6c73d2d1eef55a20a732d66b175352d9dbf2870eJeff Conniff '<dd class="dd-color" style="background-color:' + target.getStyle('color') + ';">' + '</dd>' +
6c73d2d1eef55a20a732d66b175352d9dbf2870eJeff Conniff '<dt>CurrentTarget Tag Name & Id: </dt>' +
6c73d2d1eef55a20a732d66b175352d9dbf2870eJeff Conniff '<dd>' + currentTarget.get('tagName') + '#' + currentTarget.get('id') + '</dd>' +
1bb5ce5590c8dc020c30d245453a8d0ede576fc5Matt Sweeney<h2>Listening for Events</h2>
6c73d2d1eef55a20a732d66b175352d9dbf2870eJeff Conniff<p>We can assign our handler to the container of the objects by using the `Y.one`.
6c73d2d1eef55a20a732d66b175352d9dbf2870eJeff ConniffClicking on any object in the container will bubble the event to the container.
6c73d2d1eef55a20a732d66b175352d9dbf2870eJeff ConniffWe're using the 'on' method to subscribe to the click and dblclick events.</p>
6c73d2d1eef55a20a732d66b175352d9dbf2870eJeff ConniffY.one('#container').on('click', onClick);
6c73d2d1eef55a20a732d66b175352d9dbf2870eJeff ConniffY.one('#container').on('dblclick', onClick);
1bb5ce5590c8dc020c30d245453a8d0ede576fc5Matt Sweeney<h2>Complete Example Source</h2>
1bb5ce5590c8dc020c30d245453a8d0ede576fc5Matt Sweeney{{>events-source}}