YUI 3.x Home -

YUI Library Examples: Event: Simple DOM Events

Event: Simple DOM Events

Clicking in the blue box will pop up a "Hello World!" alert window. Clicking on the first link will take you to the YUI website; clicking on the second link, which has the same href attribute, will pop up an alert instead and not navigate to a new page.

Event Utility is used here to do two things:

  1. Attach the click event handler to the blue box;
  2. Attach an event handler to the second <a> element that uses preventDefault() to prevent the link, when clicked, from navigating to a new page.

View example in new window.

Reacting to the click event

To illustrate event handling syntax, we'll create a <div> and pop up an alert message when that <div> is clicked.

  1. // Create a YUI instance and load the 'node' module
  2. YUI({ filter: 'raw' }).use("node", function (Y) {
  3.  
  4.     // A function that pops up a "Hello World" alert:
  5.     var helloWorld = function (e) {
  6.         alert("Hello World!");
  7.     };
  8.  
  9.     ...
// Create a YUI instance and load the 'node' module
YUI({ filter: 'raw' }).use("node", function (Y) {
 
    // A function that pops up a "Hello World" alert:
    var helloWorld = function (e) {
        alert("Hello World!");
    };
 
    ...

We now use the Event Utility's on method to attach our helloWorld function as a handler for the click event on the element whose HTML ID is container. on is available for convenience at the top-level of a YUI instance; as a result, it can be referenced as Y.on where Y is a YUI instance:

  1. // Point to the container div with the CSS selector
  2. Y.on("click", helloWorld, "#container");
// Point to the container div with the CSS selector
Y.on("click", helloWorld, "#container");

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 use some of Event Utility's powerful browser abstraction methods to help you handle your interaction flow during an event. For example, let's say you have two links on the page:

  1. <p><a href="http://developer.yahoo.com/yui" id="firstA">The YUI Library. (Link navigates away from page.)</a></p>
  2. <p><a href="http://developer.yahoo.com/yui" id="secondA">The YUI Library. (Link's default behavior is suppressed.)</a></p>
<p><a href="http://developer.yahoo.com/yui" id="firstA">The YUI Library. (Link navigates away from page.)</a></p>
<p><a href="http://developer.yahoo.com/yui" 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 pop up an alert window. 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.

  1. // A function that stops the browser from navigating away
  2. // from the page, and instead pops up an alert.
  3. var interceptLink = function(e) {
  4.     e.preventDefault();
  5.     Y.log("You clicked on the second YUI link.", "info", "example");
  6.     alert("You clicked on the second YUI link.  Because *preventDefault* was called, this link will not navigate away from the page.");
  7. }
  8.  
  9. // subscribe our interceptLink function to the second anchor
  10. Y.on("click", interceptLink, "#secondA");
// A function that stops the browser from navigating away
// from the page, and instead pops up an alert.
var interceptLink = function(e) {
    e.preventDefault();
    Y.log("You clicked on the second YUI link.", "info", "example");
    alert("You clicked on the second YUI link.  Because *preventDefault* was called, this link will not navigate away from the page.");
}
 
// subscribe our interceptLink function to the second anchor
Y.on("click", interceptLink, "#secondA");

Full Code Listing

Markup

  1. <div id="container">
  2.     <p>Click for Hello World alert.</p>
  3. </div>
  4. <p><a href="http://developer.yahoo.com/yui" id="firstA">The YUI Library. (Link navigates away from page.)</a></p>
  5.  
  6. <p><a href="http://developer.yahoo.com/yui" id="secondA">The YUI Library. (Link's default behavior is suppressed.)</a></p>
<div id="container">
    <p>Click for Hello World alert.</p>
</div>
<p><a href="http://developer.yahoo.com/yui" id="firstA">The YUI Library. (Link navigates away from page.)</a></p>
 
<p><a href="http://developer.yahoo.com/yui" id="secondA">The YUI Library. (Link's default behavior is suppressed.)</a></p>

JavaScript

  1. // Create a YUI instance and load the 'node' module
  2. YUI({ filter: 'raw' }).use("node", function (Y) {
  3.  
  4.     // A function that pops up a "Hello World" alert:
  5.     var helloWorld = function (e) {
  6.         alert("Hello World!");
  7.     };
  8.  
  9.     // Point to the container div with the CSS selector
  10.     Y.on("click", helloWorld, "#container");
  11.  
  12.     // A function that stops the browser from navigating away
  13.     // from the page, and instead pops up an alert.
  14.     var interceptLink = function(e) {
  15.         e.preventDefault();
  16.         Y.log("You clicked on the second YUI link.", "info", "example");
  17.         alert("You clicked on the second YUI link.  Because *preventDefault* was called, this link will not navigate away from the page.");
  18.     }
  19.  
  20.     // subscribe our interceptLink function to the second anchor
  21.     Y.on("click", interceptLink, "#secondA");
  22. });
// Create a YUI instance and load the 'node' module
YUI({ filter: 'raw' }).use("node", function (Y) {
 
    // A function that pops up a "Hello World" alert:
    var helloWorld = function (e) {
        alert("Hello World!");
    };
 
    // Point to the container div with the CSS selector
    Y.on("click", helloWorld, "#container");
 
    // A function that stops the browser from navigating away
    // from the page, and instead pops up an alert.
    var interceptLink = function(e) {
        e.preventDefault();
        Y.log("You clicked on the second YUI link.", "info", "example");
        alert("You clicked on the second YUI link.  Because *preventDefault* was called, this link will not navigate away from the page.");
    }
 
    // subscribe our interceptLink function to the second anchor
    Y.on("click", interceptLink, "#secondA");
});

More Event Resources:

Copyright © 2011 Yahoo! Inc. All rights reserved.

Privacy Policy - Terms of Service - Copyright Policy - Job Openings