6.1 Obiekt zdarzenia
JavaScript oferuje potężny system zdarzeń, który pozwala śledzić różne działania użytkownika i inne zdarzenia zachodzące w przeglądarce. Ważnym aspektem pracy ze zdarzeniami jest obiekt zdarzenia, który zawiera informacje o zdarzeniu i udostępnia metody do jego obsługi.
Kiedy zdarzenie ma miejsce, przeglądarka tworzy obiekt zdarzenia, który zawiera informacje o tym zdarzeniu. Ten obiekt jest przekazywany do obsługującego zdarzenie jako argument.
Właściwości obiektu zdarzenia:
type: typ zdarzenia (np.click,keydown).target: element, na którym zdarzenie miało miejsce.currentTarget: element, do którego przypisano obsługę zdarzenia.eventPhase: faza, w której znajduje się zdarzenie (capture, target, bubble).bubbles: wartość logiczna wskazująca, czy zdarzenie może bąbelkować.cancelable: wartość logiczna wskazująca, czy zdarzenie można anulować.defaultPrevented: wartość logiczna wskazująca, czy działanie domyślne zostało zablokowane.timeStamp: czas, kiedy zdarzenie zostało utworzone.isTrusted: wartość logiczna wskazująca, czy zdarzenie zostało zainicjowane przez użytkownika czy skrypt.
Metody obiektu zdarzenia:
preventDefault(): anuluje domyślne działanie związane ze zdarzeniem.stopPropagation(): zatrzymuje dalsze rozprzestrzenianie się zdarzenia.stopImmediatePropagation(): zatrzymuje dalsze rozprzestrzenianie się zdarzenia i zapobiega wykonaniu innych obsługujących zdarzenia dla bieżącego elementu.
Przykład użycia obiektu zdarzenia:
HTML
<!DOCTYPE html>
<html>
<head>
<title>Event Object Example</title>
</head>
<body>
<button id="myButton">Click me</button>
<script>
const button = document.getElementById('myButton');
button.addEventListener('click', function(event) {
console.log('Event type:', event.type); // Wyświetli: click
console.log('Event target:', event.target); // Wyświetli: <button id="myButton">Click me</button>
console.log('Current target:', event.currentTarget); // Wyświetli: <button id="myButton">Click me</button>
console.log('Event phase:', event.eventPhase); // Wyświetli: 2 (Faza celowa)
console.log('Bubbles:', event.bubbles); // Wyświetli: true
console.log('Cancelable:', event.cancelable); // Wyświetli: true
console.log('Time stamp:', event.timeStamp); // Wyświetli czas w milisekundach
console.log('Is trusted:', event.isTrusted); // Wyświetli: true
});
</script>
</body>
</html>
6.2. Zdarzenia kliknięcia (Mouse Events)
Zdarzenia myszy są generowane, gdy użytkownik wchodzi w interakcję z elementem za pomocą myszy:
click: zdarzenie kliknięciadblclick: zdarzenie podwójnego kliknięciamousedown: zdarzenie naciśnięcia przycisku myszymouseup: zdarzenie zwolnienia przycisku myszymousemove: zdarzenie ruchu myszymouseover: zdarzenie najechania myszkąmouseout: zdarzenie usunięcia kursora z elementu
Przykład:
HTML
<!DOCTYPE html>
<html>
<head>
<title>Mouse Events Example</title>
</head>
<body>
<button id="myButton">Click Me</button>
<script>
const button = document.getElementById('myButton');
button.addEventListener('click', function(event) {
console.log('Button clicked');
console.log('Event type:', event.type);
console.log('Target element:', event.target);
});
</script>
</body>
</html>
6.3 Zdarzenia ładowania (Load Events)
Zdarzenia ładowania występują, gdy zasób zakończy ładowanie:
load: zdarzenie, które występuje, gdy zasób/strona jest całkowicie załadowanyDOMContentLoaded: zdarzenie, które występuje, gdy wstępna dokumentacja HTML została załadowana i przeanalizowana bez oczekiwania na pełne załadowanie arkuszy stylów, obrazów i ramek
Przykład:
HTML
<!DOCTYPE html>
<html>
<head>
<title>Load Events Example</title>
</head>
<body>
<script>
window.addEventListener('load', function(event) {
console.log('Window fully loaded');
});
document.addEventListener('DOMContentLoaded', function(event) {
console.log('DOM fully loaded and parsed');
});
</script>
</body>
</html>
6.4 Zdarzenia focus (Focus Events)
Zdarzenia focus są generowane, gdy element zyskuje lub traci focus.
focus: zdarzenie, które występuje, gdy element zyskuje focusblur: zdarzenie, które występuje, gdy element traci focus
Przykład:
HTML
<!DOCTYPE html>
<html>
<head>
<title>Focus Events Example</title>
</head>
<body>
<input type="text" id="textInput" placeholder="Type something...">
<script>
const input = document.getElementById('textInput');
input.addEventListener('focus', function(event) {
console.log('Input field focused');
});
input.addEventListener('blur', function(event) {
console.log('Input field lost focus');
});
</script>
</body>
</html>
6.5 Zdarzenia klawiatury (Keyboard Events)
Zdarzenia klawiatury są generowane, gdy użytkownik naciska klawisze na klawiaturze:
keydown: zdarzenie, które występuje, gdy klawisz jest naciśniętykeyup: zdarzenie, które występuje, gdy klawisz jest zwolnionykeypress: zdarzenie, które występuje, gdy klawisz jest naciśnięty i zwolniony (przestarzałe zdarzenie, niezalecane do użycia)
Przykład:
HTML
<html>
<head>
<title>Keyboard Events Example</title>
</head>
<body>
<input type="text" id="textInput" placeholder="Type something...">
<script>
const input = document.getElementById('textInput');
input.addEventListener('keydown', function(event) {
console.log('Key down:', event.key);
});
input.addEventListener('keyup', function(event) {
console.log('Key up:', event.key);
});
</script>
</body>
</html>
GO TO FULL VERSION