Główna zawartość
Kurs: Programowanie > Rozdział 7
Lekcja 5: Zdarzenia DOM z jQuery- Dodawanie detektorów zdarzeń w jQuery
- Wyzwanie: Klikacz Croc
- Używanie właściwości zdarzenia w jQuery
- Wyzwanie: Gdzie jest pies
- Które zdarzenia DOM i właściwości tam są?
- Sprawdzanie gotowości DOM z jQuery
- Przypomnienie: Zdarzenia DOM w jQuery
- Projekt: Zmiana sceny
© 2024 Khan AcademyWarunki użytkowaniapolitykę prywatnościInformacja o plikach cookie
Przypomnienie: Zdarzenia DOM w jQuery
Dodawanie detektora zdarzeń
Możesz dodać detektor zdarzeń za pomocą
on()
: $("#save-button").on("click", function() {
// obsługa kliknięć
});
Jeśli potrzebujesz poznać szczegóły na temat określonych zdarzeń, możesz je znaleźć w obiekcie zdarzeń jQuery, który jest przekazywany do funkcji zwrotnej:
$("#face-pic").on("click", function(event) {
var mouseX = event.pageX;
var mouseY = event.pageY;
});
Wyzwalanie zdarzenia
Możesz ręcznie wywołać zdarzenie na obiekcie korzystając z trigger:
$("#save-button").trigger("click");
To może być przydatne, gdy testujesz nowe funkcjonalności lub, gdy chcesz wykonywać kod po załadowaniu strony i wywołaniu określonego zdarzenia.
Sprawdzanie gotowości DOM
Jeśli chcesz upewnić się, że przeglądarka nie wywołuje kodu JS przed pełną gotowością drzewa DOM, możesz przenieść kod do funkcji
ready()
: $(document).ready(function() {
$("h1").text("Jesteś gotów na to?");
});
Krótszą wersją tego jest przeniesienie tego kodu do funkcji jQuery:
$(function() {
$("h1").text("Jesteś gotów na to?");
});
Ten kod nie jest tak czytelny jak jego dłuższa wersja, jednakże zalecamy korzystanie z funkcji
ready()
.Pamiętaj, że gdy dodajesz kod JS wewnątrz znacznika
<script>
na dole strony, to drzewo DOM powinno być w pełni gotowe, gdy przeglądarka wywoła kod JS. Jednakże, jeśli chcesz być podwójnie pewny, możesz zawsze sprawdzić czy DOM jest gotowy do odczytu.Więcej manipulacji zdarzeniami
Dla dłuższego podsumowania i głębszego wejścia w zdarzenia jQuery, przeczytaj Podstawy Zdarzeń jQuery w ich dokumentacji.
Chcesz dołączyć do dyskusji?
Na razie brak głosów w dyskusji