MooTools Event Handling - MooTools

What is MooTools Event Handling?

Like Selectors, event handling is likewise an important concept of MooTools. This idea is used to create activities and actions for events. We additionally want to have a grasp of the actions and their effects. Let us attempt a few events in this chapter.

Single left click

The most common event in web development is a single Left click. For instance, hyperlink recognizes a single click event and takes you to any other DOM element. The first step is to add a click event to the DOM element. Allow us to take an instance that provides a click event to the button. When you click on that button, it will show a message.

Example

You will receive the following output −

Output

MooTools Event Handling

When you click on the button, you will get the following message −

Mouse enters and Mouse leave

Mouse enters and Mouse leave are the most common events in event handling. The action is implemented based totally on the position of the mouse. If the location of the mouse enters into the DOM element, then it's going to follow one action. If it leaves the DOM element area, then it will observe another action.

Allow us to take an instance that explains how mouse input event works. Check the subsequent code.

Example

You will receive the following output −

Output

MooTools Event Handling

If you keep your mouse pointer on the button, then you will get the following message.

Let us take an example that explains how the Mouse Leave event works. Take a look at the following code.

Example

You will receive the following output −

Output

MooTools Event Handling

If you keep your mouse pointer on the button, then you will get the following message.

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

Keystrokes as input

MooTools can understand your actions — the kind of input you have given to the DOM element. By using the key down function, you could read each and every key from the entered type DOM detail.

Let us take an example in which; there may be a text area element. Let us now add a key down event to the text area that whenever the text area recognizes any key store, it will respond with an alert message immediately. Test the subsequent code.

Example


You will receive the following output −

Output

MooTools Event Handling

Try to enter something into the text area. You will find an alert box along with the following message.

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

You will receive the following output −

Output

MooTools Event Handling

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.

All rights reserved © 2020 Wisdom IT Services India Pvt. Ltd DMCA.com Protection Status

MooTools Topics