Today we start the fifth lecture. In the previous lecture ("Mootools 1.2 Tutorial (4) - Functions"), we learned several different ways to build and use functions in MooTools 1.2. The next step is to understand the event. Similar to selectors, events are also an important part of building an interactive interface. Once you have mastered an element, you need to decide what behaviors to trigger what effects. Let’s save the effect first and talk about it later. Let’s first look at the intermediate steps and some common events.
Left-click event
Left-click events are the most common events in web development. The hyperlink recognizes the click event and then takes you to another URL address. MooTools can recognize click events on other DOM elements, giving you great flexibility in design and functionality. The first step to adding a click event to an element:
Reference code:
// Get an element through $('id_name')
// Add events with .addEvent
// ('click') defines the type of event
$('id_name').addEvent('click', function(){
// Add any code you want to execute when the click event occurs here
alert('this element now recognizes the click event');
});
You can also separate this function from .addEvent(); to accomplish the same thing:
Reference code:
var clickFunction = function(){
// Add any code you want to execute when the event occurs here
alert('this element now recognizes the click event');
}
('domready', function() {
$('id_name').addEvent('click', clickFunction);
});
Reference code:
<body>
<div > <! -- this element now recognizes the click event -->
</div>
</body>
Note: Like hyperlink recognition click events, MooTools' click events are actually also identifying "mouse up", which means that it happens when your mouse is released, not when the mouse is pressed. This gives users a chance to change their minds - just move the mouse pointer away from the clicked element before releasing it.
Mouse entry and departure events
The hyperlink also recognizes the "hover" event when the mouse stays on a link element. With MooTools, you can also add a hover event to other DOM elements. By dividing this event into mouse entry and mouse departure events, you can more flexibly manipulate the DOM based on the user's behavior.
As before, the first thing we have to do is attach an event to an element:
Reference code:
var mouseEnterFunction = function(){
// Add any code you want to execute when the event occurs here
alert('this element now recognizes the mouse enter event');
}
('domready', function() {
$('id_name').addEvent('mouseenter', mouseEnterFunction);
});
The same is true for the mouse departure event, which occurs when the mouse pointer leaves an element.
Reference code:
var mouseLeaveFunction = function(){
// Add any code you want to execute when the event occurs here
alert('this element now recognizes the mouse leave event');
}
('domready', function() {
$('id_name').addEvent('mouseleave', mouseLeaveFunction);
});
Delete an event
There are always times when you no longer need those events, so you need to delete an event from an element. Deleting an event is as easy as adding an event, even the structure is similar.
Reference code:
// Same as in the previous example
// Just replace .addEvent with .removeEvent
$('id_name').removeEvent('mouseleave', mouseLeaveFunction);
Key event in textarea or input
MooTools also lets you recognize key events in text fields (textareas) and text boxes (inputs). The syntax is similar to what we saw above:
Reference code:
var function = keydownEventFunction () {
alert('This textarea can now recognize keystroke events');
};
('domready', function() {
$('myTextarea').addEvent('keydown', keydownEventFunction);
});
The above code will recognize any keys. To target a specific key, we need to add a parameter and then use an if statement:
Reference code:
// Pay attention to the "event" parameter in function brackets
var keyStrokeEvent = function(event){
// The following code says:
// If the key pressed is "k", do the following
if ( == "k") {
alert("This tutorial has been brought you by the letter k.")
};
}
('domready', function() {
$('myInput').addEvent('keydown', keyStrokeEvent);
});
If you need other controls, such as the "shift" key and "control", the syntax is slightly different:
Reference code:
var keyStrokeEvent = function(event){
// The following code says:
// If the key pressed is "shift", do the following
if () {
alert("You pressed shift.")
};
}
('domready', function() {
$('myInput').addEvent('keydown', keyStrokeEvent);
});
Reference code:
<div >
<input type="text" />
</div>
Example
Here are some executable codes we wrote above:
Note: You can try it on the click example, but instead of releasing the mouse, you press the mouse all the way out and then release it. Note that it does not trigger the click event.
Reference code:
var keyStrokeEvent = function(event){
// The following code says:
// If the key pressed is "k", do the following
if ( == 'k') {
alert("This Mootorial was brought to you by the letter 'k.'")
};
}
var mouseLeaveFunction = function(){
// Add any code you want to execute when the event occurs here
alert('this element now recognizes the mouse leave event');
}
var mouseEnterFunction = function(){
// Add any code you want to execute when the event occurs here
alert('this element now recognizes the mouse enter event');
}
var clickFunction = function(){
// Add any code you want to execute when the event occurs here
alert('this element now recognizes the click event');
}
('domready', function() {
$('click').addEvent('click', clickFunction);
$('enter').addEvent('mouseenter', mouseEnterFunction);
$('leave').addEvent('mouseleave', mouseLeaveFunction);
$('keyevent').addEvent('keydown', keyStrokeEvent);
});
Reference code:
<div class="block">Left-click (Click)</div><br />
<div class="block">Mouse Enter</div><br />
<div class="block">Mouse Leave</div><br />
<input type="text" value="Please enter the character 'k'" />
Left-click event
Left-click events are the most common events in web development. The hyperlink recognizes the click event and then takes you to another URL address. MooTools can recognize click events on other DOM elements, giving you great flexibility in design and functionality. The first step to adding a click event to an element:
Reference code:
Copy the codeThe code is as follows:
// Get an element through $('id_name')
// Add events with .addEvent
// ('click') defines the type of event
$('id_name').addEvent('click', function(){
// Add any code you want to execute when the click event occurs here
alert('this element now recognizes the click event');
});
You can also separate this function from .addEvent(); to accomplish the same thing:
Reference code:
Copy the codeThe code is as follows:
var clickFunction = function(){
// Add any code you want to execute when the event occurs here
alert('this element now recognizes the click event');
}
('domready', function() {
$('id_name').addEvent('click', clickFunction);
});
Reference code:
Copy the codeThe code is as follows:
<body>
<div > <! -- this element now recognizes the click event -->
</div>
</body>
Note: Like hyperlink recognition click events, MooTools' click events are actually also identifying "mouse up", which means that it happens when your mouse is released, not when the mouse is pressed. This gives users a chance to change their minds - just move the mouse pointer away from the clicked element before releasing it.
Mouse entry and departure events
The hyperlink also recognizes the "hover" event when the mouse stays on a link element. With MooTools, you can also add a hover event to other DOM elements. By dividing this event into mouse entry and mouse departure events, you can more flexibly manipulate the DOM based on the user's behavior.
As before, the first thing we have to do is attach an event to an element:
Reference code:
Copy the codeThe code is as follows:
var mouseEnterFunction = function(){
// Add any code you want to execute when the event occurs here
alert('this element now recognizes the mouse enter event');
}
('domready', function() {
$('id_name').addEvent('mouseenter', mouseEnterFunction);
});
The same is true for the mouse departure event, which occurs when the mouse pointer leaves an element.
Reference code:
Copy the codeThe code is as follows:
var mouseLeaveFunction = function(){
// Add any code you want to execute when the event occurs here
alert('this element now recognizes the mouse leave event');
}
('domready', function() {
$('id_name').addEvent('mouseleave', mouseLeaveFunction);
});
Delete an event
There are always times when you no longer need those events, so you need to delete an event from an element. Deleting an event is as easy as adding an event, even the structure is similar.
Reference code:
// Same as in the previous example
// Just replace .addEvent with .removeEvent
$('id_name').removeEvent('mouseleave', mouseLeaveFunction);
Key event in textarea or input
MooTools also lets you recognize key events in text fields (textareas) and text boxes (inputs). The syntax is similar to what we saw above:
Reference code:
Copy the codeThe code is as follows:
var function = keydownEventFunction () {
alert('This textarea can now recognize keystroke events');
};
('domready', function() {
$('myTextarea').addEvent('keydown', keydownEventFunction);
});
The above code will recognize any keys. To target a specific key, we need to add a parameter and then use an if statement:
Reference code:
Copy the codeThe code is as follows:
// Pay attention to the "event" parameter in function brackets
var keyStrokeEvent = function(event){
// The following code says:
// If the key pressed is "k", do the following
if ( == "k") {
alert("This tutorial has been brought you by the letter k.")
};
}
('domready', function() {
$('myInput').addEvent('keydown', keyStrokeEvent);
});
If you need other controls, such as the "shift" key and "control", the syntax is slightly different:
Reference code:
Copy the codeThe code is as follows:
var keyStrokeEvent = function(event){
// The following code says:
// If the key pressed is "shift", do the following
if () {
alert("You pressed shift.")
};
}
('domready', function() {
$('myInput').addEvent('keydown', keyStrokeEvent);
});
Reference code:
Copy the codeThe code is as follows:
<div >
<input type="text" />
</div>
Example
Here are some executable codes we wrote above:
Note: You can try it on the click example, but instead of releasing the mouse, you press the mouse all the way out and then release it. Note that it does not trigger the click event.
Reference code:
Copy the codeThe code is as follows:
var keyStrokeEvent = function(event){
// The following code says:
// If the key pressed is "k", do the following
if ( == 'k') {
alert("This Mootorial was brought to you by the letter 'k.'")
};
}
var mouseLeaveFunction = function(){
// Add any code you want to execute when the event occurs here
alert('this element now recognizes the mouse leave event');
}
var mouseEnterFunction = function(){
// Add any code you want to execute when the event occurs here
alert('this element now recognizes the mouse enter event');
}
var clickFunction = function(){
// Add any code you want to execute when the event occurs here
alert('this element now recognizes the click event');
}
('domready', function() {
$('click').addEvent('click', clickFunction);
$('enter').addEvent('mouseenter', mouseEnterFunction);
$('leave').addEvent('mouseleave', mouseLeaveFunction);
$('keyevent').addEvent('keydown', keyStrokeEvent);
});
Reference code:
Copy the codeThe code is as follows:
<div class="block">Left-click (Click)</div><br />
<div class="block">Mouse Enter</div><br />
<div class="block">Mouse Leave</div><br />
<input type="text" value="Please enter the character 'k'" />
Learn more...
Download a zip package containing what you need to start with
Contains MooTools 1.2 core library, an external JavaScript file, a simple html page, and a css file.
More information about the incident
MooTools gives you more control methods about events than we have said here. To learn more, please check out the following links:
- MooTools documentationEvents section
- MooTools documentationpart
- Also, read the w3school websiteAbout JavaScript Events