5.1 Podstawy pracy z wydarzeniami
Wydarzenia w JavaScript pozwalają na interakcję z użytkownikiem i reagowanie na jego działania, takie jak kliknięcia myszą, naciskanie klawiszy, zmiany w formularzach i wiele innych. Zrozumienie, jak dodawać i usuwać obsługiwacze wydarzeń to ważna część tworzenia interaktywnych aplikacji webowych.
Co to są wydarzenia?
Wydarzenie to sygnał od przeglądarki, który informuje, że coś się wydarzyło. Na przykład, użytkownik kliknął na przycisk lub strona została załadowana. Wydarzenia pozwalają wykonywać określone działania w odpowiedzi na te sygnały.
Typy wydarzeń
Istnieje wiele typów wydarzeń. Niektóre z najczęściej używanych to:
- Mysz:
click,dblclick,mouseover,mouseout,mousedown,mouseup,mousemove - Klawiatura:
keydown,keyup,keypress - Formularz:
submit,change,focus,blur - Dokument/Okno:
load,resize,scroll,unload
Obsługiwacze wydarzeń
Obsługiwacze wydarzeń (lub listenerzy wydarzeń) są funkcjami, które są wywoływane w odpowiedzi na określone wydarzenie. "Nasłuchują" określonych wydarzeń i uruchamiają się, gdy te wydarzenia zachodzą.
5.2 Dodawanie obsługiwaczy wydarzeń
Dodawanie obsługiwaczy wydarzeń za pomocą addEventListener
Metoda addEventListener pozwala dodawać obsługiwacze wydarzeń do elementów. Zapewnia większą elastyczność i
kontrolę w porównaniu z tradycyjnymi metodami dodawania wydarzeń, takimi jak użycie atrybutów HTML (onclick, onchange itd.).
Składnia:
element.addEventListener(event, handler, options);
Gdzie:
element: element, do którego dodawany jest obsługiwacz wydarzeńevent: typ wydarzenia, na które należy reagować (na przykład, 'click', 'input', 'keydown')handler: funkcja, która zostanie wywołana w przypadku wystąpienia wydarzeniaoptions: dodatkowe parametry (niewymagany argument)
Przykład: Dodawanie obsługiwacza wydarzenia click
W tym przykładzie obsługiwacz wydarzenia jest dodawany do przycisku. Kiedy użytkownik kliknie na przycisk, pojawia się komunikat z powiadomieniem.
<!DOCTYPE html>
<html>
<head>
<title>Event Example</title>
</head>
<body>
<button id="myButton">Click me</button>
<script>
const button = document.getElementById('myButton');
button.addEventListener('click', function() {
alert('Button clicked!');
});
</script>
</body>
</html>
Przykład: Dodawanie kilku obsługiwaczy wydarzeń
Za pomocą addEventListener można dodawać kilka obsługiwaczy do jednego wydarzenia.
W tym przykładzie dwa obsługiwacze wydarzenia są dodawane do przycisku. Przy kliknięciu oba obsługiwacze są wykonywane kolejno, wyświetlając odpowiednie komunikaty w konsoli.
<!DOCTYPE html>
<html>
<head>
<title>Event Example</title>
</head>
<body>
<button id="myButton">Click me</button>
<script>
const button = document.getElementById('myButton');
button.addEventListener('click', function() {
console.log('First handler');
});
button.addEventListener('click', function() {
console.log('Second handler');
});
</script>
</body>
</html>
5.3 Użycie parametru options
Parametr options pozwala dostosować zachowanie obsługiwacza wydarzeń. Najczęściej używane opcje:
once: jeślitrue, obsługiwacz zostanie wywołany tylko raz, po czym automatycznie usuniętycapture: jeślitrue, wydarzenie jest obsługiwane podczas fazy przechwytywania zamiast fazy propagacjipassive: jeślitrue, wskazuje, że obsługiwacz nigdy nie wywołapreventDefault()
Przykład: Obsługiwacz, który wykonuje się tylko raz
W tym przykładzie obsługiwacz wydarzenia zadziała tylko raz, po czym zostanie automatycznie usunięty.
<!DOCTYPE html>
<html>
<head>
<title>Event Example</title>
</head>
<body>
<button id="myButton">Click me</button>
<script>
const button = document.getElementById('myButton');
button.addEventListener('click', function() {
alert('This will be shown only once');
}, { once: true });
</script>
</body>
</html>
5.4 Usuwanie obsługiwaczy wydarzeń
Usuwanie obsługiwaczy wydarzeń za pomocą removeEventListener
Metoda removeEventListener pozwala usuwać obsługiwacze wydarzeń, które zostały dodane za pomocą
addEventListener. Aby to zrobić, należy przekazać te same argumenty, które zostały użyte
przy dodawaniu obsługiwacza.
Składnia:
element.removeEventListener(event, handler, options)
Gdzie:
element: element, od którego usuwany jest obsługiwacz wydarzeńevent: typ wydarzenia, którego obsługiwacz należy usunąćhandler: funkcja, która była przypisana jako obsługiwacz wydarzeniaoptions: dodatkowe parametry (muszą zgadzać się z parametrami użytymi przy dodawaniu obsługiwacza)
Przykład: Usuwanie obsługiwacza wydarzenia click
W tym przykładzie obsługiwacz wydarzenia click jest dodawany do przycisku. Naciśnięcie innego przycisku usuwa
obsługiwacz wydarzenia click.
<!DOCTYPE html>
<html>
<head>
<title>Event Example</title>
</head>
<body>
<button id="myButton">Click me</button>
<button id="removeButton">Remove Click Handler</button>
<script>
const button = document.getElementById('myButton');
const removeButton = document.getElementById('removeButton');
function clickHandler() {
alert('Button clicked!');
}
button.addEventListener('click', clickHandler);
removeButton.addEventListener('click', function() {
button.removeEventListener('click', clickHandler);
alert('Click handler removed');
});
</script>
</body>
</html>
GO TO FULL VERSION