We have a lot of things to cover in this article, so hold on to your seats and enjoy the ride!

What are Events, Exactly?

Events are simply things that happen in our web pages. MooTools supports all HTML 4.01 event attributes like onclick and onmouseout, but the framework refers to them without the “on”  prefix (click instead of onclick, mouseout instead of onmouseout).

What’s neat about MooTools is that it not only extends HTML 4.01 event attributes with a few of its own, but also ensures that methods and functions that deal with web page events work across all web browsers by providing us with a solid, built-in object called Events. Event is part of the Native component of MooTools, and is also referred to as the Event hash.

You can read the official W3C specifications on events, in the HTML 4.01 Specification, section 18.2.3, under Intrinsic Events:http://www.w3.org/TR/html401/interact/scripts.html#h-18.2.3

We’ll go over all of the available event attributes in MooTools so you can learn what stuff we can listen to. There are several events that we can detect or “listen to”. We can, for the sake of discussion, divide them into five groups: window events, form events, keyboard events, mouse events, and MooTools custom events.

Window Events

Window events refer to activities that occur in the background. There are only two window events.

Form events

There are events that occur within Form elements (such as <input> elements), and we’ll refer to these as form events.

For example, the onfocus  event is triggered when the user clicks on an input field (you’ll see this in action in this article), effectively focusing on that particular input field. Some of these events apply event to non-form elements.

Keyboard events

There are events that happen when a user presses on a keyboard input device; let’s call these keyboard events.

For example, the onkeypress event is triggered when you press any key on your keyboard.

Mouse events

There are several HTML event properties that allow you to deal with activities related to the mouse. Clicking, moving, double-clicking, and hovering are all mouse events.

MooTools Custom Mouse Events

MooTools supplies us with three custom events that extend the standard mouse events.

Adding Event Listeners

We can attach event listeners to elements on a web page using the addEvent and addEvents method. By doing so, we’re able to find out whenever that event happens, as well as execute a function to react to them.

Adding event listeners is the basis for interactivity and is where JavaScript (and subsequently) MooTools has gained its popularity. Imagine being able to perform an operation whenever a user hovers over an image, or clicks on a link, or whenever the user submits a form — the possibilities are endless.

Adding a single event listener

The addEvent method allows you to add one event listener to an element method and follows the format:

$(yourelement).addEvent(event, function(){})

For example, in the following code block, we attach a click event listener for all <a> elements. When the user clicks on any hyperlink on our web page, it runs a function that opens up an alert dialog box that says You clicked on a hyperlink.

$$('a').addEvent('click', function(){
 alert('You clicked on a hyperlink');
});

In a moment, we’ll create a simple web form the highlights the input field that the user is focused on.

Time for action – Highlighting focused fields of web forms

1. Let’s start with our web form’s HTML. We’ll use <input> and <textarea> tags that will hold our user’s information as well as provide them a means to submit the web form (input type=”button”).We use the <label>  tag to indicate to the user what information to put inside each form field.

   <form action="" method="get">
    <p><label for="Name">Name: </label>
    <input name="Name" type="text"></p>
    <p><label for="Email">Email: </label>
    <input name="Email" type="text"></p>
    <p><label for="Comment">Comment: </label>
    <textarea name="Comment" cols="" rows=""></textarea></p>
    <p><input name="Submit" type="button" value="Submit"></p>
   </form>
   

   With the above markup, this is how our form looks like:

   

2. Our web form is a bit dull, so how about we spruce it up a bit with some CSS? Read the comments to gain insight on some of the more important CSS properties to take a note off.

   /* Center the fields using text-align:center */
   form {
    width:300px;
    border:1px solid #b1b8c2;
    background-color:#e3e9f2;
    text-align:center;
    padding:25px 0;
   }
   label {
    display:block;
    font:12px normal Verdana, Geneva, sans-serif;
   }
   /* Give the input and textarea fields a 1px border */
   input, textarea {
    width:250px;
    border:1px solid #5c616a;
   }
   textarea {
    height:100px;
   }
   p {
    text-align:left;
    display:block;
    width:250px;
    overflow:auto;
    padding:0;
    margin:5px 0;
   }
   /* We will give fields that are currently focused on the .focus 
   class which will give them a distinct thicker border and 
   background color compared to the other input fields */
   
   .focused {
    border:3px solid #b1b8c2;
    background-color: #e8e3e3;
   }
   
   

3. With just a few styles, our simple web form has transformed to a more attractive form field.

   

4. Let us move onto the JavaScript. We use the addEvent method to add an event listener for the form event, onfocus. When the user focuses on a particular field, we run a function that adds the .focus CSS class on that field we declared as a style rule in step 2. We’ll also remove .focus class on other fields on the web page.

   
   window.addEvent('domready', function(){
    var els = $$('input, textarea')
    els.addEvent('focus', function(){
    els.removeClass('focused');
    this.addClass('focused');
    })
   });
   

   Now, when you focus on a form field, it will be highlighted with a thick blue border and with a lighter blue background. Users who use the Tab key to navigate in between form fields will appreciate this feature since they’ll clearly see which field is active.

   

What just happened?

In the previous example, we created a simple and interactive web form that highlights the current field the user has active. We did this by using the addEvent method, adding an event listener for the focus form event. When the user focuses on a particular input field, we ran a function that adds the .focusCSS class which highlights the focused field <input> or <textarea>with a thick blue border with a light blue background.

By highlighting active fields in a web form, we have just improved our form’s usability by providing visual feedback about which field the user is currently on.