Event Overview

The event class allows you to register event handlers on DOM elements.

What is an event?

Almost everything your keyboard or mouse does produces an event. JavaScript applications use an event driven programming model. In this style of programming, the browser creates an event anytime something significant happens on the page. Typically these are things like:

• clicking, mousing over, mousing out of, and moving the mouse inside an element.
• the html document loading, unloading, or being resized.
• the keyboard being pressed.
• A form being submitted, or an input element gaining or losing focus.

What does registering an event handler mean?

Registering an event handler means you provide a function to be called when a specific event occurs. The handler is actually a function callback.

Example

Suppose you want to alert('Thank you for clicking on me') everytime someone clicks on a link like:

<a href='software/buy' id='purchase_button'>Buy This</a>

You can use Event.observe to do this like the following:

callback_handler = function(){
  alert('Thank you for clicking on me');
};
link_element = $E('purchase_button');  //$E = document.getElementById
Event.observe(link_element, 'click', callback_handler);  //attaches the callback_handler

Install

Include the event plugin. This automatically gets included by many other plugins (controller, core).

include.plugins('event')