#

# 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>