MooTools - obsługa zdarzeń
Podobnie jak selektory, obsługa zdarzeń jest również podstawową koncepcją MooTools. Ta koncepcja służy do tworzenia wydarzeń i akcji dla wydarzeń. Musimy również mieć pojęcie o działaniach i ich skutkach. Wypróbujmy kilka wydarzeń w tym rozdziale.
Pojedyncze kliknięcie lewym przyciskiem myszy
Najczęstszym zdarzeniem w tworzeniu stron internetowych jest pojedyncze kliknięcie lewym przyciskiem myszy. Na przykład Hyperlink rozpoznaje zdarzenie pojedynczego kliknięcia i przenosi do innego elementu DOM. Pierwszym krokiem jest dodanie zdarzenia kliknięcia do elementu DOM. Weźmy przykład, który dodaje zdarzenie click do przycisku. Po kliknięciu tego przycisku wyświetli się komunikat.
Przykład
<!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>Otrzymasz następujący wynik -
Wynik
Po kliknięciu przycisku otrzymasz następujący komunikat -
This button element recognizes the click eventWejście myszy i wyjście myszy
Wejście myszy i wyjście myszy to najczęstsze zdarzenia w obsłudze zdarzeń. Akcja jest wykonywana w zależności od położenia myszy. Jeśli pozycja myszy to ENTER w elemencie DOM, to zastosuje jedną akcję. Jeśli opuści obszar elementu DOM, zastosuje inną akcję.
Weźmy przykład, który wyjaśnia, jak działa zdarzenie myszy Enter. Spójrz na poniższy kod.
Przykład
<!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>Otrzymasz następujący wynik -
Wynik
Jeśli utrzymasz wskaźnik myszy na przycisku, zostanie wyświetlony następujący komunikat.
Recognizes the mouse enter eventWeźmy przykład, który wyjaśnia, jak działa zdarzenie Mouse Leave. Spójrz na poniższy kod.
Przykład
<!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>Otrzymasz następujący wynik -
Wynik
Jeśli utrzymasz wskaźnik myszy na przycisku, zostanie wyświetlony następujący komunikat.
Recognizes the mouse leave eventUsuń wydarzenie
Ta metoda służy do usuwania zdarzenia. Usunięcie wydarzenia jest tak samo łatwe, jak dodanie wydarzenia i ma taką samą strukturę. Spójrz na następującą składnię.
Składnia
//works just like the previous examplesuse .removeEvent method
$('id_name').removeEvent('mouseleave', mouseLeaveFunction);Klawisze jako wejście
MooTools może rozpoznać Twoje działania - rodzaj danych wprowadzonych przez element DOM. Korzystając zkeydown możesz odczytać każdy klucz z elementu DOM typu input.
Weźmy przykład, w którym istnieje element obszaru tekstu. Dodajmy teraz zdarzenie keydown do obszaru tekstowego, które za każdym razem, gdy obszar tekstowy rozpozna dowolny magazyn kluczy, odpowie natychmiast komunikatem ostrzegawczym. Spójrz na poniższy kod.
Przykład
<!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>Otrzymasz następujący wynik -
Wynik
Spróbuj wprowadzić coś w polu tekstowym. Znajdziesz okno z ostrzeżeniem wraz z następującym komunikatem.
This textarea can now recognize keystroke valueSpróbuj dodać jakiś tekst do tego samego przykładu, który odczytuje wartość z pola tekstowego, kiedy go wprowadziłeś. Jest to możliwe za pomocąevent.keyfunkcjonować ze zdarzeniem. Spójrz na poniższy kod.
Przykład
<!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>Otrzymasz następujący wynik -
Wynik
Spróbuj wprowadzić tekst w polu tekstowym. Zostaniesz przekierowany do pola ostrzeżenia wraz z wartością wprowadzoną w polu tekstowym.