This example demonstrates how to respond to DOM events from a Node instance.
Clicking the box will report some event details.
lorem ipsum dolor sit
Click anywhere in the box to see some event data.
Setting up the HTML
First we need some HTML to work with.
<div id="demo">
<p><em>lorem</em> <code>ipsum</code> <strong>dolor</strong> <span>sit</span></p>
<div id="event-result"></div>
</div>
Creating the Event Handler
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.
var onClick = function(e) {
var type = e.type,
currentTarget = e.currentTarget, // #demo
target = e.target; // #demo or a descendant
Y.one('#event-result').setContent('<dl>' +
'<dt>type</dt><dd>' + e.type + '</dd>' +
'<dt>target</dt><dd>' + target.get('tagName') + '</dd>' +
'<dt>currentTarget</dt><dd>' + currentTarget.get('tagName') +
'#' + currentTarget.get('id') + '</dd></dl>');
};
Listening for Events
We can assign our handler to all of the items by using the all method to get a NodeList instance and using the on method to subscribe to the event.
Y.one('#demo').on('click', onClick);
Complete Example Source
<link href="../assets/node/node.css" rel="stylesheet" type="text/css">
<div id="demo">
<p><em>lorem</em> <code>ipsum</code> <strong>dolor</strong> <span>sit</span></p>
<div id="event-result">Click anywhere in the box to see some event data.</div>
</div>
<script type="text/javascript">
YUI().use('node', function(Y) {
var onClick = function(e) {
var type = e.type,
currentTarget = e.currentTarget, // #demo
target = e.target; // #demo or a descendant
Y.one('#event-result').setContent('<dl>' +
'<dt>type</dt><dd>' + e.type + '</dd>' +
'<dt>target</dt><dd>' + target.get('tagName') + '</dd>' +
'<dt>currentTarget</dt><dd>' + currentTarget.get('tagName') +
'#' + currentTarget.get('id') + '</dd></dl>');
};
Y.one('#demo').on('click', onClick);
});
</script>