MooTools - обработка событий
Как и селекторы, обработка событий также является важной концепцией MooTools. Эта концепция используется для создания событий и действий для событий. Нам также необходимо иметь представление о действиях и их последствиях. Давайте попробуем несколько событий в этой главе.
Один щелчок левой кнопкой мыши
Наиболее распространенное событие в веб-разработке - это одиночный щелчок левой кнопкой мыши. Например, Hyperlink распознает событие одиночного щелчка и переводит вас на другой элемент 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(){
//put whatever you want to happen in here
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>Вы получите следующий вывод -
Вывод
Когда вы нажмете на кнопку, вы получите следующее сообщение -
This button element recognizes the click eventВвод мыши и выход мыши
Мышь Enter и Mouse Leave - самые распространенные события при обработке событий. Действие применяется в зависимости от положения мыши. Если курсор мыши находится в положении ENTER в элементе DOM, будет выполнено одно действие. Если он покидает область элемента DOM, он применяет другое действие.
Давайте рассмотрим пример, объясняющий, как работает событие мыши Enter. Взгляните на следующий код.
пример
<!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>Вы получите следующий вывод -
Вывод
Если вы удерживаете указатель мыши на кнопке, вы получите следующее сообщение.
Recognizes the mouse enter eventДавайте рассмотрим пример, который объясняет, как работает событие Mouse Leave. Взгляните на следующий код.
пример
<!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>Вы получите следующий вывод -
Вывод
Если вы удерживаете указатель мыши на кнопке, вы получите следующее сообщение.
Recognizes the mouse leave eventУдалить событие
Этот метод используется для удаления события. Удалить событие так же просто, как добавить событие, и оно следует той же структуре. Взгляните на следующий синтаксис.
Синтаксис
//works just like the previous examplesuse .removeEvent method
$('id_name').removeEvent('mouseleave', mouseLeaveFunction);Нажатие клавиш как ввод
MooTools может распознавать ваши действия - тип ввода, который вы дали через элемент DOM. Используяkeydown функция, вы можете прочитать каждый ключ из элемента 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 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>Вы получите следующий вывод -
Вывод
Попробуйте ввести текст в текстовую область. Вы будете перенаправлены в окно предупреждения вместе со значением, которое вы ввели в текстовую область.