1bb5ce5590c8dc020c30d245453a8d0ede576fc5Matt Sweeney<link href="{{componentAssets}}/node.css" rel="stylesheet" type="text/css">

1bb5ce5590c8dc020c30d245453a8d0ede576fc5Matt Sweeney<div class="intro">

1bb5ce5590c8dc020c30d245453a8d0ede576fc5Matt Sweeney <p>This example demonstrates how to respond to DOM events from a Node instance.</p>

1bb5ce5590c8dc020c30d245453a8d0ede576fc5Matt Sweeney <p>Clicking the box will report some event details.</p>

1bb5ce5590c8dc020c30d245453a8d0ede576fc5Matt Sweeney</div>

1bb5ce5590c8dc020c30d245453a8d0ede576fc5Matt Sweeney

1bb5ce5590c8dc020c30d245453a8d0ede576fc5Matt Sweeney<div class="example">

1bb5ce5590c8dc020c30d245453a8d0ede576fc5Matt Sweeney{{>events-source}}

1bb5ce5590c8dc020c30d245453a8d0ede576fc5Matt Sweeney</div>

1bb5ce5590c8dc020c30d245453a8d0ede576fc5Matt Sweeney

1bb5ce5590c8dc020c30d245453a8d0ede576fc5Matt Sweeney<h2>Setting up the HTML</h2>

1bb5ce5590c8dc020c30d245453a8d0ede576fc5Matt Sweeney<p>First we need some HTML to work with.</p>

1bb5ce5590c8dc020c30d245453a8d0ede576fc5Matt Sweeney```

1bb5ce5590c8dc020c30d245453a8d0ede576fc5Matt Sweeney<div id="demo">

1bb5ce5590c8dc020c30d245453a8d0ede576fc5Matt Sweeney <p><em>lorem</em> <code>ipsum</code> <strong>dolor</strong> <span>sit</span></p>

1bb5ce5590c8dc020c30d245453a8d0ede576fc5Matt Sweeney <div id="event-result"></div>

1bb5ce5590c8dc020c30d245453a8d0ede576fc5Matt Sweeney</div>

1bb5ce5590c8dc020c30d245453a8d0ede576fc5Matt Sweeney```

1bb5ce5590c8dc020c30d245453a8d0ede576fc5Matt Sweeney<h2>Creating the Event Handler</h2>

1bb5ce5590c8dc020c30d245453a8d0ede576fc5Matt Sweeney<p>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.</p>

1bb5ce5590c8dc020c30d245453a8d0ede576fc5Matt Sweeney```

1bb5ce5590c8dc020c30d245453a8d0ede576fc5Matt Sweeney var onClick = function(e) {

1bb5ce5590c8dc020c30d245453a8d0ede576fc5Matt Sweeney var type = e.type,

1bb5ce5590c8dc020c30d245453a8d0ede576fc5Matt Sweeney currentTarget = e.currentTarget, // #demo

1bb5ce5590c8dc020c30d245453a8d0ede576fc5Matt Sweeney target = e.target; // #demo or a descendant

1bb5ce5590c8dc020c30d245453a8d0ede576fc5Matt Sweeney

1bb5ce5590c8dc020c30d245453a8d0ede576fc5Matt Sweeney Y.one('#event-result').setContent('<dl>' +

1bb5ce5590c8dc020c30d245453a8d0ede576fc5Matt Sweeney '<dt>type</dt><dd>' + e.type + '</dd>' +

1bb5ce5590c8dc020c30d245453a8d0ede576fc5Matt Sweeney '<dt>target</dt><dd>' + target.get('tagName') + '</dd>' +

1bb5ce5590c8dc020c30d245453a8d0ede576fc5Matt Sweeney '<dt>currentTarget</dt><dd>' + currentTarget.get('tagName') +

1bb5ce5590c8dc020c30d245453a8d0ede576fc5Matt Sweeney '#' + currentTarget.get('id') + '</dd></dl>');

1bb5ce5590c8dc020c30d245453a8d0ede576fc5Matt Sweeney };

1bb5ce5590c8dc020c30d245453a8d0ede576fc5Matt Sweeney```

1bb5ce5590c8dc020c30d245453a8d0ede576fc5Matt Sweeney

1bb5ce5590c8dc020c30d245453a8d0ede576fc5Matt Sweeney<h2>Listening for Events</h2>

1bb5ce5590c8dc020c30d245453a8d0ede576fc5Matt Sweeney<p>We can assign our handler to all of the items by using the <code>all</code> method to get a <code>NodeList</code> instance and using the <code>on</code> method to subscribe to the event.</p>

1bb5ce5590c8dc020c30d245453a8d0ede576fc5Matt Sweeney```

1bb5ce5590c8dc020c30d245453a8d0ede576fc5Matt SweeneyY.one('#demo').on('click', onClick);

1bb5ce5590c8dc020c30d245453a8d0ede576fc5Matt Sweeney```

1bb5ce5590c8dc020c30d245453a8d0ede576fc5Matt Sweeney

1bb5ce5590c8dc020c30d245453a8d0ede576fc5Matt Sweeney<h2>Complete Example Source</h2>

1bb5ce5590c8dc020c30d245453a8d0ede576fc5Matt Sweeney```

1bb5ce5590c8dc020c30d245453a8d0ede576fc5Matt Sweeney{{>events-source}}

1bb5ce5590c8dc020c30d245453a8d0ede576fc5Matt Sweeney```