Obsługa zdarzeń
Obsługa zdarzeń
Obsługa zdarzeń to bezpłatna lekcja jQuery Academy na CoddyKit. To lekcja 1 z 1. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej jQuery Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs jQuery Academy zawiera 1 lekcji w sumie.
Wprowadzenie
Dzień dobry,
Przedstawiając jQuery, powiedzieliśmy, że służy ono nie tylko do modyfikowania DOM, lecz także oferuje ważną funkcję, jaką jest obsługa zdarzeń.
Czym jest zdarzenie
Najpierw dowiedzmy się, czym jest zdarzenie.
Zdarzenia są najczęściej generowane przez użytkownika w przeglądarce internetowej.
Możemy zdefiniować wiele zdarzeń wywoływanych przez użytkownika, takich jak dotknięcie ekranu przez użytkownika urządzenia mobilnego, poruszenie myszą, kliknięcie przycisku czy przewijanie.
Ponieważ JavaScript jest językiem programowania, będziemy sterować przebiegiem programu w zależności od występujących zdarzeń.
Kliknięcie
Metoda click()
Zacznijmy od najprostszego zdarzenia, czyli kliknięcia przycisku.
Metoda click() służy do obsługi zdarzeń kliknięcia w HTML.
Zdarzenia kliknięcia możemy nasłuchiwać za pomocą poniższej składni.
$(selector).click(handler);
- Za pomocą $(selector) wybieramy element, którego zdarzenia chcemy nasłuchiwać.
- handler oznacza funkcję callback, która zostanie uruchomiona po kliknięciu.
Utwórzmy przykład.
<button>Button</button>
<script>
/* Callback will run as son as
the DOM is loaded
*/
$(document).ready(function(){
$('button').click(function(){
alert('Button clicked');
});
})
</script>Ostrzeżenie
Metoda click obsługuje kliknięcie przycisku za pomocą anonimowej funkcji przekazanej jako argument.
Podwójne kliknięcie
Zdarzenia myszy
Poniżej przedstawiono kilka zdarzeń, które użytkownik może wywołać za pomocą myszy.
Kliknijmy przycisk!
<button>Coddy Button</button>
<script>
// runs when button is click
$("button").click(function(){
$('button').text('Clicked')
});
// runs when button is double click
$("button").dblclick(function(){
$('button').text('Double Clicked')
});
</script>Zdarzenia myszy
Należy pamiętać, że niektórych zdarzeń nie można testować w aplikacji mobilnej, ponieważ zdarzeń takich jak Hover nie można wykonywać na urządzeniach mobilnych!
<button>Coddy Button</button>
<script>
/* It runs when the mouse
hovers over the button
*/
$("button").hover(function(){
$('button').text('Hovering...')
});
/*
It runs when the mouse
enters an element
*/
$("button").mouseenter(function(){
$('button').text('Mouse enter...')
});
/*
It runs when the mouse leaves
an element
*/
$("button").mouseleave(function(){
$('button').text('Mouse Leave...')
});
</script>Zdarzenia klawiatury
Zdarzenia klawiatury
Teraz nauczymy się obsługiwać zdarzenia klawiatury.
Najpierw zdefiniujmy pole input, a następnie obsłużmy zdarzenia generowane przez to pole.
<input type="text" id="name"
name="yourname"
placeholder="Enter your name" />
<p>Keyboard event: <span id="state"></span></p>
<script>
/*
Callback will run as son as
the DOM is loaded
*/
$(document).ready(function(){
/*
It runs every time we press
the keyboard key on the keyboard.
*/
$('#name').keydown(function(){
$('#state').text('Key down')
});
/*
It runs when we take our finger
off the keyboard key
*/
$('#name').keyup(function(){
$('#state').text('Key up')
});
// Runs when the user focuses on input.
$('#name').focus(function(){
$('#state').text('Focus')
});
/*
It works when we unfocus
from an input on the keyboard.
*/
$('#name').blur(function(){
$('#state').text('Blur')
});
})
</script>Zdarzenia formularza
Za pomocą jQuery możemy również obsługiwać zdarzenia występujące w formularzach.
Wprowadzanie danych do pola input oraz wybieranie opcji z pola select to przykłady zdarzeń formularza.
Przykład zdarzeń formularza
W poniższym kodzie pokazano więcej niż jedno zdarzenie formularza.
*
listen to the form with the coddyForm
id and run when submit button clicked
*/
$("#coddyForm").submit(
function(event){
});Zdarzenia obiektu window
Na koniec zobaczmy zdarzenia obiektu window.
Prawdopodobnie najważniejszym zdarzeniem obiektu window jest $(document).ready(), ale ponieważ omówiliśmy je wcześniej, teraz poznamy inne zdarzenia tego obiektu.
Metoda resize
Metoda resize()
Metoda resize jest powiązana z obiektem window przeglądarki i uruchamia się, gdy zmieni się rozmiar okna.
const window = {};
const $ = (obj) => ({
resize: (callback) => {
console.log("Resize event handler would be attached here.");
}
});
$(window).resize(function() {
//trigging when user change windows size
});Metoda scroll
Metoda scroll()
Metoda scroll() jest powiązana z przewijalnym elementem lub obiektem window i uruchamia się, gdy użytkownik przewija odpowiedni komponent.
$(window).scroll(function() {
//Calling when user scroll the window
});
$('#my-scrollable-element').scroll(function() {
//Calling when user scroll the cursor
//that inside the #my-scrollable-element element
});Gratulacje
Gratulacje 🎉
Poznaliśmy obsługę zdarzeń w jQuery.
W następnej sekcji poznamy tworzenie animacji za pomocą jQuery.
Często zadawane pytania
Czy lekcja „Obsługa zdarzeń” jest bezpłatna?
Tak — pełny tekst „Obsługa zdarzeń” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu jQuery Academy, przejdź na CoddyKit PRO. Kurs jQuery Academy zawiera 1 lekcji w sumie.
Co nauczysz się w „Obsługa zdarzeń”?
Obsługa zdarzeń Ćwiczysz jQuery Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.
Czy potrzebuję doświadczenia, aby zacząć jQuery Academy?
Nie wymagamy żadnego doświadczenia. jQuery Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 1 z 1.
Ile czasu zajmuje lekcja „Obsługa zdarzeń”?
Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.
Czy mogę pisać i uruchamiać kod w tej lekcji jQuery Academy?
Tak. Każda lekcja jQuery Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.