Working with Events in MooTools: Part 1

0
75
9 min read

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.

HTML Event attribute / MooTools event name

What is it?

onload / load

This event occurs when the window and images on the page has fully loaded and/or when all of the iFrames in the page have loaded. It can be used for monitoring when the web page has fully loaded (such as when you want to know if all images have been downloaded).

onunload / unload

This even happens when a window or an iFrame is removed from the web page. It has limited use.

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.

HTML Event attribute / MooTools event name

What is it?

onblur / blur

This event occurs when an element loses focus, either because the user has clicked out of it, or because the user used the Tab key to move away from it. This is helpful for monitoring the instant the user loses focus on a particular element.

onchange / change

This event happens when the element loses focus or when its original value has changed. This is helpful for knowing when the user starts typing in a input text field or textarea, or when a user selects a different option in a select drop-down element.

onfocus / focus

This event is the opposite, of the blur event: it is triggered when the user focuses on an element. This is useful for watching when the user highlights a form field or when they have navigated to it using the Tab key.

onreset / reset

This event only applies to form elements. This event is triggered when the form has been reset to its default values.

onselect / select

This event happens when the user highlights (selects) text in a text field.

onsubmit / submit

This event is only for form elements. This event occurs when the user submits a web form.

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.

HTML Event attribute / MooTools event name

What is it?

onkeydown / keydown

This event occurs when the user holds down a keyboard key.

onkeypress / keypress

This event is triggered whenever the user presses a keyboard key.

onkeyup /keyup

This event happens when the user releases a key.

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.

HTML Event attribute / MooTools event name

What is it?

onclick / click

This event occurs whenever the user uses the mouse button to click on an element.

ondblclick / dblclick

This even occurs whenever the user double-clicks on an element.

onmousedown / mousedown

This event occurs when the mouse button is held down.

onmouseup / mouseup

This even occurs when the mouse button is released.

onmousemove / mousemove

This event occurs when the mouse is moved.

onmouseout / mouseout

This event occurs when the mouse pointer is removed from the target element.

onmouseover / mouseover

This event occurs when the mouse pointer enters the target element.

MooTools Custom Mouse Events

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

MooTools event name

What is it?

mouseenter

This event is triggered when the user’s mouse pointer enters an element, but does not fire again when the mouse goes over a children element (unlike mouseover). This is useful for detecting the mouseover event once in nested element structures, such as <li><a>item</a></li>. If we were to use the mouseover event, it would be triggered twice, once for <li> and once again for <a>.

mouseleave

This event works similarly to mouseenter in that it is triggered only once when the mouse pointer exits the target element. Unlike the mouseout event, which will be triggered more than once for nested element structures.

mousewheel

This even is triggered when the scroller on a mouse is used (available in most modern mice input devices, usually situated in between the left and right mouse buttons).

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:

    MooTools 1.2 Beginner's Guide

  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.

    MooTools 1.2 Beginner's Guide

  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.

    MooTools 1.2 Beginner's Guide

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.

LEAVE A REPLY

Please enter your comment!
Please enter your name here