Version 3.18.1

Example: Simple DOM Events

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:

  1. Attach the click event handler to the yellow 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.

Click for Hello World test.

The YUI Library. (Link navigates away from page.)

The YUI Library. (Link's default behavior is suppressed.)
When you clicked on the second link, *preventDefault* was called, so it did not navigate away from the page.

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>