Clicking in the yellow box will give hello world feedback.
+Clicking on the first link will take you to the YUI website; clicking on the
+second link, which has the same href attribute, will display
+a message instead, and not navigate to a new page.
Event Utility is used here to do two things:
+ +-
+
- Attach the
clickevent handler to the yellow box;
+ - Attach an event handler to the second
<a>+ element that usespreventDefault()to prevent the link, + when clicked, from navigating to a new page.
+
+
Click for Hello World test.
+The YUI Library. (Link navigates away from page.)
+ + The YUI Library. (Link's default behavior is suppressed.) + + +Reacting to the click event
+
+To illustrate event handling syntax, we'll create a <div> and
+give some feedback when that <div> is clicked.
// Create a YUI instance and load the 'node' module
+YUI().use('node', function (Y) {
+
+ // A function that gives hello world feedback:
+ var helloWorld = function(e) {
+ e.target.setHTML("<p>Hello World!</p>");
+ Y.one('#container').addClass('hello');
+ }
+
+ ...
+
+
+We now use the Node's on method to attach our
+helloWorld function as a handler for the click event.
+
+
// Point to the container div with the CSS selector
+var node = Y.one('#container');
+
+node.on("click", helloWorld);
+
+
+Almost all event handling begins with a premise just this simple: we have an
+element to which something might happen (eg, it might be clicked) and, when
+that does happen, we want to do something (eg,
+helloWorld).
Preventing event behavior
+ +In some cases, you may want to replace the default behavior of an event. +For example, let's say you have two links on the page:
+ +<p><a href="http://yuilibrary.com/" id="firstA">The YUI Library. (Link navigates away from page.)</a></p> + +<p><a href="http://yuilibrary.com/" id="secondA">The YUI Library. (Link's default behavior is suppressed.)</a></p>+ + +
Let's say that when the second link is clicked, instead of navigating away
+from the current page, you want to display a message.
+The event object passed to your event handler is a facade — not
+the actual browser event object.
+This facade supports the preventDefault method for cancelling
+inherent browser behavior such as anchor links loading a new page.
// A function that stops the browser from navigating away
+// from the page, and instead displays a message.
+var interceptLink = function(e) {
+ e.preventDefault();
+ Y.one('.message').setStyle('visibility', 'visible');
+}
+
+// subscribe our interceptLink function to the second anchor
+Y.one('#secondA').on("click", interceptLink);
+
+
+Full Code Listing
+<div id="demo">
+ <div id="container">
+ <p>Click for Hello World test.</p>
+ </div>
+ <p><a href="http://yuilibrary.com" id="firstA">The YUI Library. (Link navigates away from page.)</a></p>
+
+ <a href="http://yuilibrary.com" id="secondA">The YUI Library. (Link's default behavior is suppressed.)</a>
+ <div class="message">
+ When you clicked on the second link, *preventDefault* was called, so it did not navigate away from the page.
+ </div>
+
+</div>
+
+<script>
+YUI().use('node', function (Y) {
+ // A function that gives hello world feedback:
+ var helloWorld = function(e) {
+ e.target.setHTML("<p>Hello World!</p>");
+ Y.one('#container').addClass('hello');
+ }
+
+ // subscribe the helloWorld function as an event handler for the click
+ // event on the container div:
+ var node = Y.one("#container");
+
+ node.on("click", helloWorld);
+
+ // A function that displays a message and prevents the default behavior of
+ // the event for which it is a handler:
+ var interceptLink = function(e) {
+ e.preventDefault();
+ Y.one('.message').setStyle('visibility', 'visible');
+ }
+
+ // subscribe our interceptLink function as a click handler for the second
+ // anchor element:
+ Y.one('#secondA').on("click", interceptLink);
+});
+</script>
+
+
+