Kiedy używasz przeglądarki, rejestruje ona różne rodzaje zdarzeń: kliknięcie w przycisk, wysłanie formularza, najechanie kursorem na element. W ten sposób przeglądarka mówi ci, że użytkownik właśnie coś zrobił. Twój skrypt może wtedy na te zdarzenia odpowiedzieć. Najczęściej odpowiada, aktualizując treść strony przez obiekt document, co czyni ją bardziej interaktywną. W tym rozdziale wypisuję różne rodzaje zdarzeń, z którymi możesz pracować, żeby ożywić swoje strony.
Ten artykuł nie jest kompletny i może być aktualizowany
Przypisanie funkcji do zdarzenia
var bouton = document.getElementById('click');
function MonAlert() {
alert('hello world');
}
bouton.onclick = MonAlert;Każda współczesna przeglądarka rozumie ten sposób przypisania funkcji do zdarzenia, ale do jednego zdarzenia podepniesz tylko jedną funkcję i nie przekażesz jej żadnych parametrów. Nawiasy trzeba pominąć, inaczej kod odpali się od razu.
Wada
Kiedy chcesz przypisać do jednego zdarzenia kilka funkcji, poprzednia zostaje nadpisana przez nową.
var bouton = document.getElementById('click');
function MonAlert() {
alert('hello world!');
}
function AlertTOTO() {
alert('Toto!')
}
bouton.onclick = MonAlert;
bouton.onclick = AlertTOTO;W efekcie zobaczymy tylko komunikat Toto!.
Event Listener
Event listeners to nowocześniejsze podejście, które pozwala przypisać do jednego zdarzenia kilka funkcji naraz.
var bouton = document.getElementById('click');
function MonAlert() {
alert('hello world!');
}
function AlertTOTO() {
alert('Toto!');
}
bouton.addEventListener('click', MonAlert);
bouton.addEventListener('click', AlertTOTO);Metoda addEventlistener() przyjmuje trzy parametry:
element.addEventlistener('evenement', NomDeFonction, Boolean);
- zdarzenie: nazwa zdarzenia, którego chcesz nasłuchiwać (blur, click i tak dalej);
- kod, który ma się wykonać, funkcja zadeklarowana wcześniej albo funkcja anonimowa,
booleansterujący propagacją zdarzenia, domyślnie false.
Wada
Ta metoda nie jest obsługiwana przez stare przeglądarki.
Przekazywanie parametrów
Widzieliśmy już, że przypisując funkcję do zdarzenia, nie możemy postawić nawiasów. Żeby mimo to przekazać parametry, tworzymy funkcję anonimową, przypisujemy ją do zdarzenia, a w środku wywołujemy własną funkcję z jej parametrami.
function MonAlert(message) {
alert(message);
}
bouton.addEventListener('click', function() {
MonAlert('Mon message qui s'affiche!');
});Obiekt Event
Kiedy zdarzenie się wydarzy, powstaje obiekt zdarzenia, który zawiera informacje o samym zdarzeniu i o elemencie, na którym wystąpiło.
var bouton = document.getElementById('click');
function MonAlert(e) {
console.log(e.target);
}
bouton.onclick = MonAlert;Z event listenerem i parametrami
var bouton = document.getElementById('click');
function MonAlert(e, message) {
console.log(e.target);
console.log(message);
}
bouton.addEventListener('click', function(e){
MonAlert(e, "hello world!");
});Właściwości
| Właściwość | Opis |
|---|---|
target | Element, który wywołał zdarzenie |
type | Zdarzenie, które zostało wywołane |
Metody
| Metoda | Opis |
|---|---|
preventDefault() | Anuluje domyślne zachowanie zdarzenia (o ile da się je anulować) |
stopPropagation() | Zatrzymuje propagację zdarzenia. |
Lista zdarzeń
Oto krótka, nie wyczerpująca lista zdarzeń, które spotyka się regularnie.
Przeglądarka
| Zdarzenie | Opis |
|---|---|
load | Wywoływane, gdy przeglądarka skończy ładowanie. Może się też wywołać na innych wczytanych elementach, takich jak obrazy, skrypty czy obiekty. |
unload | odwrotność zdarzenia load, wywoływane przy opuszczaniu strony. |
resize | wywoływane, gdy użytkownik zmieni rozmiar okna przeglądarki. |
scroll | wywoływane, gdy użytkownik przewija stronę lub element. |
error | error wywoływane, gdy przeglądarka napotka błąd JavaScriptu. |
Mysz
| Zdarzenie | Opis |
|---|---|
click | Wywoływane, gdy użytkownik kliknie element |
dblclick | To samo co click, ale przy szybkim podwójnym kliknięciu. |
mouseup | Wywoływane, gdy użytkownik przytrzyma przycisk myszy. |
mousedown | Wywoływane, gdy użytkownik puści przycisk myszy. |
mousemove | Wywoływane, gdy kursor się przemieszcza. |
mouseover | wywoływane, gdy kursor najedzie na element. |
mouseout | wywoływane, gdy kursor opuści element, nad którym się znajdował, albo jego element potomny. |
Klawiatura
| Zdarzenie | Opis |
|---|---|
input | Wywoływane, gdy zmieni się wartość elementu <input> albo <textarea>. |
keydown | Wywoływane, gdy użytkownik naciśnie klawisz. Jeśli trzyma go wciśniętego, zdarzenie wywołuje się w kółko. |
keypress | Wywoływane, gdy użytkownik naciśnie klawisz, który wyświetliłby znak na ekranie. Nie wywoła się na przykład przy strzałkach, w odróżnieniu od keydown. Jeśli użytkownik trzyma klawisz wciśnięty, zdarzenie wywołuje się w kółko, tak jak keydown. |
keyup | Wywoływane, gdy użytkownik puści klawisz. Zdarzenia keydown i keypress wywołują się przed pojawieniem się znaku na ekranie, a keyup już po nim. |
Sprawdzenie, który klawisz został naciśnięty
Dzięki obiektowi Event sprawdzisz, który klawisz został naciśnięty, sięgając po e.keycode, które zwraca kod ASCII klawisza.
Formularz
| Zdarzenie | Opis |
|---|---|
submit | Wywoływane, gdy użytkownik naciśnie przycisk zatwierdzający formularz. |
change | Wywoływane, gdy zmieni się stan kilku elementów formularza (radio, checkbox i select) |
