+
+
+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>
+
+