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.
{{>basic-example-source}}

Reacting to the `click` event

To illustrate event handling syntax, we'll create a `

` and give some feedback when that `
` 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("

Hello World!

"); 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:

```

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

The YUI Library. (Link's default behavior is suppressed.)

```

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

``` {{>basic-example-source}} ```