30 days of MooTools is a collection of tutorials to learn to use the MooTools javascrit library, first published in 2008 by ConsiderOpen.
The lessons are actually 23, as they where interrupted after this day.
As the original site is currently offline, the tutorials have been collected using the Wayback Machine to make them available to everyone interested in learning to use MooTools.
The tutorials are based on MooTools 1.2 so some parts could be deprecated and they should be updated and expanded based on the new MooTools versions.
The copyright (and gratitude) for the original lessons is hold by ConsiderOpen.
Idea Paolo Manganiello. Licence CC 3.0.
If you haven’t already, be sure and check out the rest of the Mootools 1.2 tutorials in our 30 days series.
Welcome to Day 5 of 30 Days of Mootools. In the last tutorial we looked at different ways to create and use functions within Mootools 1.2. The next step is to get a grasp on events. Like selectors, events are an essential part of creating an interactive UI. Once you get a hold of an element, you need to then decide what action will cause what effect. Leaving the effects for a later tutorial, lets take a look at that middle step and explore some common events.
The single left click is the most common event in web development. Hyperlinks recognize the click event and take you to another URL. Mootools can recognize the click event on other DOM elements, giving you tremendous flexibility in design and functionality. The first step is to add the click event to an element:
//$('id_name') defines the element
//.addEvent adds the event
//('click') defines the type of event
$('id_name').addEvent('click', function(){
//put whatever you want to happen on click in here
alert('this element now recognizes the click event');
});
You can accomplish the same thing by separating out the function from .addEvent();.
var clickFunction = function(){
//put whatever you want to happen in here
alert('this element now recognizes the click event');
}
window.addEvent('domready', function() {
$('id_name').addEvent('click', clickFunction);
});
<body>
<div id="id_name"> <! -- this element now recognizes the click event -->
</div>
</body>
Note: Just like the click event recognized by hyperlinks, Mootools’ click event actually recognizes “mouse up,” meaning when you let go of the mouse button, not when you push it down. This is to give users a chance to change their mind by dragging the mouse cursor off of the clicked element before letting the mouse button up.
Hyperlinks also recognize “hover” events, where the cursor is over the anchor element. With Mootools, you can add a hover event to other DOM elements. By splitting it up into mouseenter and mouseleave, you get greater control over manipulating the DOM upon users’ actions.
Just like before, the first thing we have to do is attach an event to an element
var mouseEnterFunction = function(){
//put whatever you want to happen in here
alert('this element now recognizes the mouse enter event');
}
window.addEvent('domready', function() {
$('id_name').addEvent('mouseenter', mouseEnterFunction);
});
Mouseleave works the same way. This event fires when the cursor leaves an element.
var mouseLeaveFunction = function(){
//put whatever you want to happen in here
alert('this element now recognizes the mouse leave event');
}
window.addEvent('domready', function() {
$('id_name').addEvent('mouseleave', mouseLeaveFunction);
});
There are times when you will need to remove an event from an element once it is no longer needed. Removing an event is just as easy as adding one, and even follows a similar structure.
//works just like the previous examples, only replace .addEvent with .removeEvent
$('id_name').removeEvent('mouseleave', mouseLeaveFunction);
Mootools also lets you recognize keystrokes in textareas and inputs. The syntax for this is just like what we saw above:
var keydownEventFunction = function () {
alert('This textarea can now recognize keystroke events');
};
window.addEvent('domready', function() {
$('myTextarea').addEvent('keydown', keydownEventFunction);
});
The above code will recognize any keystroke. To target a particular keystroke, we need to add a parameter and use an if statement:
//notice the paramater "event" within the function parenthesis
var keyStrokeEvent = function(event){
// this says, "if the event key that was pressed is equal to "k," do the following."
if (event.key == "k") {
alert("This tutorial has been brought you by the letter k.")
};
}
window.addEvent('domready', function() {
$('myTextarea').addEvent('keydown', keyStrokeEvent);
});
For other controls, such as “shift” and “control,” the syntax is slightly different:
var keyStrokeEvent = function(event){
// this says, "if the event key that was pressed is "shift," do the following."
if (event.shift) {
alert("You pressed shift.")
};
}
window.addEvent('domready', function() {
$('myTextarea').addEvent('keydown', keyStrokeEvent);
});
Here are some working examples of the code we went over above:
Note: try clicking on the single click example, but instead of letting the left click button up, move your cursor off of the block with the button still held down. Notice how it does NOT fire the click event.
var keyStrokeEvent = function(event){
// this says, "if the event key that was pressed is "k," do the following."
if (event.key == 'k') {
alert("This Mootorial was brought to you by the letter 'k.'")
};
}
var mouseLeaveFunction = function(){
//put whatever you want to happen in here
alert('this element now recognizes the mouse leave event');
}
var mouseEnterFunction = function(){
//put whatever you want to happen in here
alert('this element now recognizes the mouse enter event');
}
var clickFunction = function(){
//put whatever you want to happen in here
alert('this element now recognizes the click event');
}
window.addEvent('domready', function() {
$('click').addEvent('click', clickFunction);
$('enter').addEvent('mouseenter', mouseEnterFunction);
$('leave').addEvent('mouseleave', mouseLeaveFunction);
$('keyevent').addEvent('keydown', keyStrokeEvent);
});
<div id="click" class="block">Single Left Click</div><br /> <div id="enter" class="block">Mouse Enter</div><br /> <div id="leave" class="block">Mouse Leave</div><br /> <textarea id="keyevent">Type the letter 'k'</textarea>
Mootools gives you a lot more control over events than we have covered here. To learn more, check out some of the following links:
Day 6 - Manipulating HTML Elements