MooTools - 事件处理
与选择器一样，事件处理也是 MooTools 的一个基本概念。此概念用于创建事件和事件的操作。我们还需要掌握操作及其效果。让我们在本章中尝试几个事件。
单击左键
Web 开发中最常见的事件是单击左键。例如，超链接识别单击事件并将您带到另一个 DOM 元素。第一步是向 DOM 元素添加单击事件。让我们举一个向按钮添加单击事件的示例。当您单击该按钮时，它将显示一条消息。
示例
<!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 clickFunction = function(){
//把你想发生的事情放在这里
document.write('This button element recognizes the click event');
}
window.addEvent('domready', function() {
$('id_name').addEvent('click', clickFunction);
});
</script>
</head>
<body>
<input type = "button" id = "id_name" value = "click here"/>
</body>
</html>
您将收到以下输出 −
输出
单击按钮时，您将收到以下消息 −
此按钮元素识别单击事件
鼠标进入和鼠标离开
鼠标进入和鼠标离开是事件处理中最常见的事件。操作根据鼠标的位置应用。如果鼠标的位置进入 DOM 元素，则它将应用一个操作。如果它离开 DOM 元素区域，则它将应用另一个操作。
让我们举一个例子来解释鼠标进入事件的工作原理。看看下面的代码。
示例
<!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(){
//把你想发生的事情放在这里
$('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>
您将收到以下输出 −
输出
如果您将鼠标指针放在按钮上，那么您将收到以下消息。
Recognizes the mouse enter event
让我们举一个例子来解释鼠标离开事件的工作原理。看看下面的代码。
示例
<!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(){
//把你想发生的事情放在这里
$('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>
您将收到以下输出 −
输出
如果您将鼠标指针放在按钮上，那么您将收到以下消息。
Recognizes the mouse leave event
删除事件
此方法用于删除事件。删除事件与添加事件一样简单，并且遵循相同的结构。查看以下语法。
语法
//与前面的示例一样使用 .removeEvent 方法
$('id_name').removeEvent('mouseleave', mouseLeaveFunction);
按键作为输入
MooTools 可以识别您的操作 — 您通过 DOM 元素给出的输入类型。通过使用 keydown 函数，您可以从输入类型 DOM 元素中读取每个键。
让我们举一个例子，其中有一个文本区域元素。现在让我们向文本区域添加一个 keydown 事件，每当文本区域识别出任何密钥库时，它都会立即响应警报消息。看看下面的代码。
示例
<!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>
您将收到以下输出 −
输出
尝试在文本区域中输入一些内容。您将看到一个警告框以及以下消息。
This textarea can now recognize keystroke value
尝试向同一示例添加一些文本，当您输入文本区域时，该文本区域会读取其中的值。可以使用带有事件的 event.key 函数来实现。请查看以下代码。
示例
<!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>
您将收到以下输出 −
输出
尝试在文本区域中输入文本。您将被引导至一个警告框，其中显示您在文本区域中输入的值。
