MooTools Tutorial
MooTools Useful Resources
Selected Reading
- MooTools - Fx.Events
- MooTools - Fx.Options
- MooTools - Fx.Morph
- MooTools - Fx.Tween
- MooTools - Fx.Slide
- MooTools - Fx.Element
- MooTools - Classes
- MooTools - Tabbed Content
- MooTools - Tooltips
- MooTools - Accordion
- MooTools - Sortables
- MooTools - Sliders
- MooTools - Periodicals
- MooTools - Regular Expression
- MooTools - Drag and Drop
- MooTools - Input Filtering
- MooTools - Style Properties
- MooTools - DOM Manipulations
- MooTools - Event Handling
- MooTools - Functions
- MooTools - Using Arrays
- MooTools - Selectors
- MooTools - Program Structure
- MooTools - Installation
- MooTools - Introduction
- MooTools - Home
MooTools Useful Resources
Selected Reading
- Who is Who
- Computer Glossary
- HR Interview Questions
- Effective Resume Writing
- Questions and Answers
- UPSC IAS Exams Notes
MooTools - Event Handling
MooTools - Event Handpng
Like Selectors, Event Handpng is also an essential concept of MooTools. This concept is used to create events and actions for events. We also need to have a grasp of the actions and their effects. Let us try a few events in this chapter.
Single left cpck
The most common event in web development is Single Left Cpck. For example, Hyperpnk recognizes a single cpck event and takes you to another DOM element. The first step is to add a cpck event to the DOM element. Let us take an example that adds a cpck event to the button. When you cpck on that button, it will display a message.
Example
<!DOCTYPE html>
<html>
<head>
<script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
<script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>
<script type = "text/javascript">
var cpckFunction = function(){
//put whatever you want to happen in here
document.write( This button element recognizes the cpck event );
}
window.addEvent( domready , function() {
$( id_name ).addEvent( cpck , cpckFunction);
});
</script>
</head>
<body>
<input type = "button" id = "id_name" value = "cpck here"/>
</body>
</html>
You will receive the following output −
Output
When you cpck on the button, you will get the following message −
This button element recognizes the cpck event
Mouse Enter and Mouse Leave
Mouse Enter and Mouse Leave are the most common events in event handpng. The action is appped based on the position of the mouse. If the position of the mouse is ENTER into the DOM element, then it will apply one action. If it leaves the DOM element area, then it will apply another action.
Let us take an example that explains how mouse Enter event works. Take a look at the following code.
Example
<!DOCTYPE html>
<html>
<head>
<script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
<script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>
<script type = "text/javascript">
var mouseEnterFunction = function(){
//put whatever you want to happen in here
$( result ).set( html , "Recognizes the mouse enter event");
}
window.addEvent( domready , function() {
$( id_name ).addEvent( mouseenter , mouseEnterFunction);
});
</script>
</head>
<body>
<input type = "button" id = "id_name" value = "Mouse Enter"/> <br/><br/>
<lable id = "result"></lable>
</body>
</html>
You will receive the following output −
Output
If you keep your mouse pointer on the button, then you will get the following message.
Recognizes the mouse enter event
Let us take an example that explains how the Mouse Leave event works. Take a look at the following code.
Example
<!DOCTYPE html>
<html>
<head>
<script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
<script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>
<script type = "text/javascript">
var mouseLeaveFunction = function(){
//put whatever you want to happen in here
$( result ).set( html , "Recognizes the mouse leave event");
}
window.addEvent( domready , function() {
$( id_name ).addEvent( mouseleave , mouseLeaveFunction);
});
</script>
</head>
<body>
<input type = "button" id = "id_name" value = "Mouse Leave"/><br/>
<lable id = "result"></lable>
</body>
</html>
You will receive the following output −
Output
If you keep your mouse pointer on the button, then you will get the following message.
Recognizes the mouse leave event
Remove an Event
This method is used to remove an event. Removing an event is just as easy as adding an event and it follows the same structure. Take a look at the following syntax.
Syntax
//works just pke the previous examplesuse .removeEvent method $( id_name ).removeEvent( mouseleave , mouseLeaveFunction);
Keystrokes as Input
MooTools can recognize your actions — the kind of input you have given through the DOM element. By using the keydown function, you can read each and every key from the input type DOM element.
Let us take an example wherein, there is a text area element. Let us now add a keydown event to the text area that whenever the text area recognizes any keystore, it will respond with an alert message immediately. Take a look at the following code.
Example
<!DOCTYPE html>
<html>
<head>
<script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
<script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>
<script type = "text/javascript">
var keydownEventFunction = function () {
alert( This textarea can now recognize keystroke value );
};
window.addEvent( domready , function() {
$( myTextarea ).addEvent( keydown , keydownEventFunction);
});
</script>
</head>
<body>
Write Something: <textarea id = "myTextarea"> </textarea>
</body>
</html>
You will receive the following output −
Output
Try to enter something into the text area. You will find an alert box along with the following message.
This textarea can now recognize keystroke value
Try to add some text to the same example that reads the value from the textarea when you entered into it. It is possible by using event.key function with the event. Take a look at the following code.
Example
<!DOCTYPE html>
<html>
<head>
<script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
<script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>
<script type = "text/javascript">
//notice the parameter "event" within the function parenthesis
var keyStrokeEvent = function(event){
var x = event.key;
alert("The enter value is: "+x)
}
window.addEvent( domready , function() {
$( myTextarea ).addEvent( keydown , keyStrokeEvent);
});
</script>
</head>
<body>
<lable>Write Something:</lable> <br/>
<textarea id = "myTextarea"> </textarea>
</body>
</html>
You will receive the following output −
Output
Try to enter text in the text area. You will be directed to an alert box along with the value you entered into the text area.
Advertisements