Home >Web Front-end >JS Tutorial >Mootools 1.2 Tutorial Event Handling_Mootools

Mootools 1.2 Tutorial Event Handling_Mootools

WBOYOriginal: 2016-05-16 18:46:36967browse

Today we start the fifth lecture. In the previous lecture ("Mootools 1.2 Tutorial (4) - Functions"), we learned several different ways to create 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 interactive interfaces. Once you have a handle on an element, you need to decide what actions will trigger what effects. Leaving the effects for later, let's first look at the intermediate steps and some common events.
Left-click event
Left-click event is the most common event in web development. Hyperlinks recognize click events and take you to another URL. MooTools can recognize click events on other DOM elements, giving you great flexibility in design and functionality. The first step to add a click event to an element:
Reference code:

Copy code The code is as follows:

// Get an element through $('id_name') 
// Add an event with .addEvent 
// ('click') defines the type of event 
$('id_name ').addEvent('click', function(){ 
//Add any code here that you want to execute when the click event occurs 
alert('this element now recognizes the click event'); 
 }); 

You can also separate this function from .addEvent(); to accomplish the same thing:
Reference code:

Copy code The code is as follows:

var clickFunction = function(){ 
//Add any code here that you want to execute when the event occurs 
alert('this element now recognizes the click event'); 
} 
window.addEvent('domready', function() { 
$('id_name').addEvent('click' , clickFunction); 
}); 

Reference code:

Copy code The code is as follows :

Note: Just like hyperlink recognition click events, MooTools' click events actually recognize "mouse up", which means that it occurs when you release the mouse. , instead of happening when the mouse is pressed. This gives the user a chance to change their mind by simply moving the mouse pointer away from the clicked element before releasing.
Mouse in and out events
Hyperlinks also recognize "hover" events when the mouse is over a link element. With MooTools, you can add a hover event to other DOM elements. By dividing this event into mouse enter and mouse leave events, you can more flexibly manipulate the DOM based on user behavior.
As before, the first thing we have to do is attach an event to an element:
Reference code:

Copy code The 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'); 
} 
window.addEvent('domready', function() { 
$('id_name').addEvent('mouseenter', mouseEnterFunction); 
 }); 

The same goes for the mouse leave event. This event occurs when the mouse pointer leaves an element.
Reference code:

Copy code The code is as follows:

var mouseLeaveFunction = function() { 
//Add any code here that you want to execute when the event occurs 
alert('this element now recognizes the mouse leave event'); 
} 
window.addEvent('domready', function() { 
$('id_name').addEvent('mouseleave', mouseLeaveFunction); 
}); 

Delete an event
There will come a time when you no longer need those events and you need to delete an event from an element. Deleting an event is just as easy as adding one, and even the structure is similar.
Reference code:
// Same as the previous example
// Just replace .addEvent with .removeEvent
$('id_name').removeEvent('mouseleave', mouseLeaveFunction);
Key events in textarea or input
MooTools also allows you to identify key events in text areas (textarea) and text boxes (input). The syntax is similar to what we saw above:
Reference code:

Copy code The code is as follows:

var function = keydownEventFunction () { 
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 specific key, we need to add a parameter and then use an if statement:
Reference code:

Copy code The code is as follows:

// Pay attention to the "event" parameter in the function brackets 
var keyStrokeEvent = function(event){ 
// The following code says: 
/ / If the pressed key is "k", do the following 
if (event.key == "k") { 
alert("This tutorial has been brought you by the letter k.") 
}; 
} 
window.addEvent('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 code The code is as follows:

var keyStrokeEvent = function(event){ 
// The following code says: 
// If you press If the key down is "shift", do the following 
if (event.shift) { 
alert("You pressed shift.") 
}; 
} 
window.addEvent ('domready', function() { 
$('myInput').addEvent('keydown', keyStrokeEvent); 
}); 

Reference code:

Copy code The code is as follows:

Example
Here are some executable codes we wrote above:
Note: You can try this on the click example, but instead of releasing the mouse button on it, hold the mouse button down and away from the block, then release it again. Notice that it doesn't fire the click event.
Reference code:

Copy code The code is as follows:

var keyStrokeEvent = function(event ){ 
// The following code says: 
// If the pressed key is "k", do the following 
if (event.key == 'k') { 
alert("This Mootorial was brought to you by the letter 'k.'") 
}; 
} 
var mouseLeaveFunction = function(){ 
// Add the event here when you Any code to be executed 
alert('this element now recognizes the mouse leave event'); 
} 
var mouseEnterFunction = function(){ 
// Add here the event you want to execute when it occurs Any code 
alert('this element now recognizes the mouse enter event'); 
} 
var clickFunction = function(){ 
// Add here any code you want to execute when the event occurs Code
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); 
}); 

Reference code:

Copy code The code is as follows:

Left click (Click)

Mouse Enter

Mouse Leave< /div>

Learn more…

Download a zip package containing everything you need to get started

Contains MooTools 1.2 core library, an external JavaScript file, a simple html page and a css file.

More information about the event

MooTools gives you more control methods about events, much more than what we talk about here. To learn more, check out these few links:

Events section in MooTools documentation
Element.Events section in MooTools documentation
Also, read the content about JavaScript events on the w3school website

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Mootools 1.2 Tutorial Scroll Bar (Slider)_MootoolsNext article：Mootools 1.2 Tutorial Scroll Bar (Slider)_Mootools

Related articles

See more