JavaScript: Przypisywanie i usuwanie zdarzeń dla elementów
od Podstaw
10 godz. 55 min · JavaScript · Full-stack i Programowanie
Piotr PalarzWeb DeveloperCzego się nauczysz
- Wstep do programowania oraz najwazniejsze konstrukcje jezyka
- Liczne “smaczki” zwiazane z kazda z konstrukcji
- Obiektowy Model Dokumentu i DOM API
- Wyszukiwanie elementów na stronie
- Tworzenie nowych, praca z ich trescia, atrybutami, stylami CSS
- Odczytywanie wspólrzednych polozenia elementu i jego wymiarów
- Obsluga zdarzen i debugowanie kodu
- Praktyczne projekty
- I wiele, wiele wiecej!
Witaj w kursie JavaScript od Podstaw!
Jeśli poznałeś już wymienione wyżej technologie, to zapewne zdajesz sobie sprawę z ich ograniczeń. Za pomocą języka HTML tworzymy bowiem strukturę dokumentu, dodajemy treść tekstową, obrazy czy wideo. Aby jednak strona internetowa wyglądała perfekcyjnie, korzystamy z arkuszy stylów CSS, które pozwalają nam opisać wygląd wszystkich elementów HTML, ustawić wielkość tekstu czy dodać tło strony. No właśnie, ale gdzie tutaj interakcyjność?Zapewne już wiesz, że język CSS oferuje tzw. pseudoklasy, które pozwalają nam np. przypisać zmianę koloru elementu po najechaniu na niego kursorem myszy. I to tak naprawdę wszystko, na co możemy zareagować. A co gdybyśmy chcieli po wciśnięciu jakiegoś przycisku wysunąć ukryty panel, sprawdzić poprawność wypełnianego właśnie formularza lub pobrać dane z serwera i wyświetlić je na stronie bez przeładowywania witryny? Dobra wiadomość jest taka, że to wszystko jest możliwe z użyciem języka JavaScript, który “rozumie” każda przeglądarka internetowa.Choć język JavaScript powstał jako język skryptowy na potrzeby stron internetowych, to już dawno temu “wyszedł” z przeglądarek internetowych i może być używany tak naprawdę gdziekolwiek. W kursie, który masz przed sobą, poznasz język JavaScript jako niezależny język programowania, a dopiero później dowiesz się, jak wykorzystywać go do wzbogacania stron internetowych. Dzięki postawieniu grubej linii pomiędzy samym językiem, a Obiektowym Modelem Dokumentu dostępnym w przeglądarkach internetowych, będziesz nie tylko bardzo dobrze rozumiał sam język, ale w przyszłości wykorzystasz go do innych zastosowań.Na początku omówimy ciekawą historię języka JavaScript, a chwilę później rozpoczniemy poznawanie najważniejszych jego konstrukcji. I tak dowiesz się czym są zmienne, jakie typy danych dostępne są w tym języku, czym są liczne operatory, instrukcje warunkowe, pętle, tablice, obiekty i funkcje. Wszystkie te zagadnienia są bardzo podobne w innych językach programowania, dlatego kurs ten jest również świetnym wstępem do programowania w ogóle. Każda z przedstawianych konstrukcji języka jest bardzo dokładnie tłumaczona z myślą osobach początkujących. Nie zmienia to jednak faktu, że nawet osoby znające już podstawy języka JavaScript znajdą tutaj coś dla siebie, gdyż na każdym etapie przedstawiane są również liczne ciekawostki odnośnie danej konstrukcji.Kiedy zrozumiesz już jak działa język JavaScript, przejdziemy do drugiej połowy kursu, gdzie dokładnie omówimy Obiektowy Model Dokumentu, dostępny w przeglądarkach internetowych. Zobaczysz jak przeglądarka tworzy z kodu HTML drzewo dokumentu, jak reprezentowane są poszczególne jego węzły, a także jak język JavaScript potrafi z tym “wewnętrznym światem” współpracować. Dowiesz się jak wyszukiwać na stronie interesujących nas elementów HTML, a także jak tworzyć nowe elementy, przypisywać im treść i wstawiać je na stronę. Popracujemy również z atrybutami elementów, ich klasami i wreszcie ze stylami CSS, abyśmy mogli wpływać dynamicznie na wygląd naszej strony.Zobaczysz również, jak możemy w dowolnym momencie odczytać współrzędne położenia elementu na stronie, a także jego wysokość czy szerokość. Tę wiedzę wykorzystamy później w praktycznym przykładzie.Jeden z rozdziałów kursu poświęcony został zdarzeniom, a więc możliwości reagowania na zachowania użytkownika. Dzięki temu zobaczysz, jak możemy przypisać np. zdarzenie kliknięcia do wybranego elementu, a kiedy zostanie on kliknięty, wykona się przygotowany przez nas kod. Poznasz kilka różnych sposobów na przypisywanie oraz usuwanie zdarzeń, a także dowiesz się czym jest tzw. “bubbling” oraz “capturing” czy jak zablokować domyślną akcję przeglądarki.Przy pisaniu jakiegokolwiek kodu, zawsze pojawiają się błędy, dlatego i tutaj Twoje wątpliwości nie pozostaną bez odpowiedzi. Poznasz wszystkie typu błędów, które mogą się pojawić podczas wykonywania naszego kodu, a także wiele sposobów ich wykrycia i wyeliminowania.W kursie nie brakuje oczywiście praktycznych przykładów, które celowo zostały ułożone tak, aby wykorzystać w nich jak najwięcej zdobytej wcześniej wiedzy. Nie zostaniesz więc sam z poczuciem, że co prawda rozumiesz jak działa dana konstrukcja, ale nie masz pomysłu, kiedy z niej skorzystać. Na początek wykonamy praktyczny projekt losowania liczb z wybranego przedziału tak, aby nie mogły się powtórzyć. Już przy tym projekcie poznasz wiele ciekawych technik i sztuczek.Następnie przejdziemy do nieco bardziej zaawansowanego przykładu i napiszemy skrypt, który pozwoli nam sortować dane w tabeli po wybranych kolumnach, kiedy któraś z nich zostanie kliknięta. Zobaczysz jak sortować dane zarówno malejąco jak i rosnąco, a także jak zmieniać kolejność elementów HTML na stronie.W kolejnym projekcie zajmiemy się walidacją danych wpisywanych do formularza, by ten nie mógł zostać wysłany do serwera tak długo, jak zawiera jakiekolwiek błędy. Zobaczysz tutaj zdarzenia związane z polami formularza, a także sposoby na pobieranie z nich wartości i sprawdzanie czy są one poprawne. Zadbamy także o wrażenia użytkownika i wyświetlimy na stronie stosowne błędy, a także podświetlimy źle uzupełnione pola na czerwono.W przedostatnim projekcie wstawimy na stronę przycisk, który będzie się pojawiał po przewinięciu strony w dół, a znikał po odwrotnej akcji. Co jednak ciekawe, po jego kliknięciu, strona zostanie automatycznie, płynnie przewinięta do samej góry.W ostatnim projekcie stworzymy bardzo efektowny dymek z podpowiedzią, który będzie się pojawiał nad elementem po najechaniu na niego kursorem myszy. Wykorzystamy tutaj mnóstwo ciekawych technik. Dowiesz się również jak swój kod przygotować w taki sposób, abyś mógł go udostępnić innym osobom, by w łatwy sposób skorzystały z przygotowanego Tooltipa na swoich stronach.Kurs kończy się sekcją Tips & Tricks, w której znajdziesz 10 krótkich lekcji. W każdej z nich została omówiona jedna sztuczka. Każda z nich pozwoli Ci jeszcze lepiej zrozumieć język JavaScript, ale przede wszystkim zaoszczędzić czas i kilka linijek często niepotrzebnego kodu.Podsumowując, kurs ten jest nie tylko wprowadzeniem do samego języka JavaScript, ale także do Obiektowego Modelu Dokumentu. Dzięki wyraźnemu rozdzieleniu tych dwóch zagadnień, będziesz mógł w przyszłości wykorzystać język JavaScript także do innych zastosowań, poza przeglądarką internetową.
Kurs JavaScript od Podstaw to między innymi:
- Wstęp do programowania
- Najważniejsze konstrukcje języka
- Liczne “smaczki” związane z każdą z konstrukcji
- Obiektowy Model Dokumentu i DOM API
- Wyszukiwanie elementów na stronie
- Tworzenie nowych, praca z ich treścią, atrybutami, stylami CSS
- Odczytywanie współrzędnych położenia elementu i jego wymiarów
- Obsługa zdarzeń
- Debugowanie kodu
- Praktyczne projekty
- I wiele, wiele więcej!
Dla kogo jest ten kurs?
Kurs ten jest dla wszystkich osób, które znają już podstawy HTML i CSS i chciałyby przejść poziom wyżej i dodać do swoich stron dynamiczności. Żadna wcześniejsza wiedza z zakresu JavaScript czy programowania nie jest wymagana, gdyż wszystkie konstrukcje są starannie tłumaczone. Materiał ten będzie również świetnym odświeżeniem i usystematyzowaniem wiedzy dla osób, które już z tym językiem miały do czynienia. Po przerobieniu tego kursu będziesz gotowy, by poznawać język JavaScript dalej, z kursem JavaScript w Praktyce, który powstał jako dopełnienie tego kursu i porusza nieco bardziej zaawansowane tematy, na które tutaj zabrakło już czasu.
W tej lekcji, pokażę ci kilka sposobów na to, aby przypisywać oraz usuwać zdarzenia dla konkretnych elementów
HTML. W poprzedniej lekcji pokazałem ci że zdarzeń jest cała masa. Tutaj pokaże ci tylko zdarzenie kliknięcia.
Natomiast w tym kursie jeszcze z kilku innych zdarzeń będziemy korzystać.
Zasada jednak przypisywania tych zdarzeń jest dokładnie taka sama.
Dlatego teraz chce ci to pokazać.
Są trzy sposoby.
Z czego jeden nie jest polecany, ale również tci go pokaże.
A dwa pozostałe są w porządku.
I teraz pierwszy sposób na przypisanie zdarzenia do elementu, jest dodanie w HTML'u do niego odpowiedniego
atrybutu.
Natomiast domyślasz się, że np. po to zostały wymyślone style CSS, abyśmy oddzielili warstwę prezentacyjną
od struktury. Tak samo po to mamy JavaScript i specjalne metody, aby w tej strukturze, czyli w kodzie HTML
nie wpisywać kodu JavaScript, ale jednak możemy to zrobić i teraz chce ci pokazać że w scripts, mam funkcję,
którą nazwałem sayHello, czyli ona w globalnej przestrzeni jest dostępna i ona robi nam
alert Hej.
I teraz mogę na takim przycisku, który tutaj mamy tutaj, Kliknij mnie. Jest to ten pierwszy przycisk tutaj, przypisać
zdarzenie kliknięcia, poprzez dodanie atrybutu onClick i tutaj musimy wpisać nazwę funkcji, która ma się
wywołać czyli np. sayHello.
Ale nie tylko w taki sposób.
Bo ja już nauczyłem cię w tym kursie, że często przekazujemy taką funkcję przez referencje.
Tutaj jednak musimy wpisać jakby, całość kodu, który ma być wywołany, tak jak gdybyśmy ten kod wstawili
do funkcji eval, o której już ci mówiłem, czyli ten kod wywołujący funkcję sayHello, wyglądałby następująco.
I teraz do tego przycisku przypisanym zdarzenia onClick, czyli jeżeli nazwa zdarzenia to jest Click, to
zawsze dodajemy na początku on np. ondblclick i tak dalej.
Jeżeli teraz kliknę ten przycisk, to jak widzisz mamy wykonany alert.
Podobnie mogłem tutaj od razu wpisać alert i np. w takich pojedynczych apostrofach, dlatego że tuaj są
cudzysłowy, wpisać Witaj, również nam by to zadziałało.
Natomiast nie jest to dobry sposób na to, aby przypisywać zdarzenia do konkretnych elementów.
Natomiast jeszcze jedna rzecz apropo takiego przypisywania.
Tutaj oczywiście nie do wszystkiego będziemy mieli dostęp.
Jest wiele minusów takiego zapisu.
Nie będę się bardzo zgłębiał w ich szczegóły. Natomiast chcę ci powiedzieć jedną rzecz. Otóż mamy pewne
zdarzenia i o tym się przekonasz, które przypisujemy do obiektu window.
Jeżeli chcemy je przypisywać w taki sposób, jako atrybut, to ja tutaj umieściłem to w komentarzu, abyś
wiedział. Przypisujemy je dla body. Jeżeli będziemy je przypisywać, zaraz ci pokażę, w jaki sposób, przez
skrypty
tutaj, to nie będziemy tego robić dla body, ale w kodzie HTML dla body się to przypisuje np. onloud, moglibyśmy
tutaj coś wpisać i to będzie alternatywa dla
windows.onload. Zaraz jeszcze pokaże, jak zapisujemy to w inny sposób, czyli to co przypisujemy dla window, jeżeli
chodzi o atrybut, to musi być przypisane dla body.
Zapamiętaj jednak, że taki zapis, nie jest w ogóle polecany, bo mieszamy teraz kod JavaScript ze strukturą
HTML i nie jest to dobre rozwiązanie.
Niemniej jednak, zostawię sobie tutaj funkcję sayHello, abyś wiedział w jaki sposób to działa.
Tutaj mamy kolejny przycisk button2 i baton3 i ja je już pobrałem tutaj.
I będziemy chcieli teraz do nich przypisać zdarzenie również funkcję sayHello.
Pokażę ci teraz jak możemy to zrobić.
Odwołamy się do btn2 i kropka onclick.
Czyli znowu, jeżeli zdarzenie nazywa się click, to poprzedzamy je on.
I tutaj przypisujemy funkcję, którą chcemy wykonać.
Więc albo możemy tutaj podać już sayHello, po prostu w ten sposób.
Czyli referencje do naszej funkcji.
Ona się wtedy wykona.
Albo możemy tutaj wpisać jakąkolwiek inną funkcję.
No i teraz jeżeli wcisnę ten przycisk, to jak widzisz sayHello nam się wykonało.
Natomiast jest pewien minus takiego zapisu.
Otóż do takiego przycisku, możemy przypisać tylko jedno zdarzenie.
Bo jak widzisz, mamy tutaj właściwość onclick.
Czyli jeżeli odwołam się do btn2, onclick znowu i przypisze jakąś inną funkcję, która będzie robić powiedzmy
alert Witaj, zamiast Hej.
Zauważ, co się stanie.
Klikam i mamy Witaj.
Czyli ta funkcja, która została tutaj przypisana, jedną linkę niżej została nadpisana.
Czyli nie możemy kilku zdarzeń przypisywać do jednego elementu, jeżeli chcemy się do tego odwoływać w
ten oto sposób.
Teraz zatem pokażę ci najlepszy sposób, w jaki możemy przypisywać zdarzenia do elementów.
I zrobimy to na przycisku, który mam tutaj czyli
btn3.
Każdy element HTML, który pobierzemy, będzie miał możliwość przypisania mu event'u. Nawet jeżeli taki element
tworzymy tak jak już ci pokazywałem poprzez document.createElement i nigdzie go na stronie nie wstawimy,
to już możemy do niego przypisać zdarzenie kliknięcia.
Jest to metoda addEventListener i ta metoda przyjmuje trzy parametry.
Pierwszy, jest to typ zdarzenia jakie chcemy obsłużyć, w naszym przypadku click, czyli tutaj już nie podajemy
onclick tylko po prostu click.
W ten oto sposób, tutaj, mogą być inne zdarzenia dla formularza, może to być submit itd.
W tej lekcji skupimy się tylko na click.
Następnie funkcja, która ma zostać wykonana i znowu mogę tutaj podać sayHello, tylko do niej referencje,
a więc nie wywołuje jej, bo wówczas ta funkcja zostałaby wywołana.
To co by zwróciła zostałoby tutaj podstawione.
Nie o to nam chodzi.
Chodzi o taki oto zapis i na końcu trzeci parametr, to jest true lub false.
Czy chcemy używać tak zwanego capturing, o którym dokładnie będę mówił w jednej z kolejnych lekcji.
Zazwyczaj będzie to false, ten trzeci parametr, czyli przypisujemy do przycisku zdarzenie click.
Kiedy naciśniemy na ten przycisk, czyli zdarzenie click zostanie wywołane, wywołaj funkcję sayHello.
No i sprawdźmy czy to zadziała, to ten przycisk, raczej ten przycisk.
Jak widzisz Hej, zostało wykonane. Natomiast dzięki takiemu zapisowi, możemy przypisać do tego jeszcze
inne funkcje, czyli mógłbym sobie wpisać funkcję anonimową, w ten oto sposób i mógłbym napisać alert
Witaj.
Najpierw ta funkcja się wykona, a następnie ta, ale zobaczysz, że obydwie się wykonają, czyli Hej,
a teraz alert Witaj.
W ten sposób do jednego elementu możemy wiele zdarzeń przypisywać, tego samego typu.
Teraz pokażę ci, w jaki sposób zdarzenia możemy usuwać, bo czasami będziemy chcieli do jakiegoś przycisku
czy do formularza przypisać zdarzenie.
Ale kiedy już to zdarzenie się wykona, chcemy je odbindować, czyli po prostu usunąć.
Możemy to zrobić na kilka sposobów.
Takie zdarzenia, które opisywaliśmy jako atrybuty, możemy usunąć poprzez removeAttribute onclick albo poprzez
drugi sposób, który teraz ci pokaże, czyli np. z tego btn2 będę chciał usunąć wszystkie zdarzenia.
Odwołam się do btn2, a następnie do onclick i przypisze tutaj wartość null.
Tyle wystarczy i żadne z tych zdarzeń, konkretnie to drugie, które napisało pierwsze się nie wykona.
Zobaczmy.
Klikam przycisk drugi i zupełnie nic się nie dzieje, podobnie nie mogę zrobić na tych zdarzeniach, jeżeli
tutaj bym przypisał btn3 onclick null, to nadal te event Listener'y będą wykonywane, aby je usunąć, musimy
odwołać się do btn3 i następnie do metodey removeEventListener.
I ona przyjmuje dokładnie te same parametry, które przypisaliśmy tutaj, czyli najpierw click, rodzaj zdarzenia.
Następnie musimy pobrać funkcję sayHello np.
I tutaj również capturing false.
Czyli teraz jedno z tych zdarzeń usunąłem, zobaczymy. Po kliknięciu na ten przycisk, mamy tylko Witaj, a
więc to zdarzenie, które było wcześniej się nie wykonało, natomiast nie mogę usunąć tego zdarzenia, bo nie
mam referencji do tej funkcji, więc nie mam jak jej podać. Gdybym ją tutaj wpisał, w dokładnie ten sam
sposób, to myślę, że zdajesz sobie sprawę, że utworzyli byśmy zupełnie nową funkcję.
To nie treść jest ważna, ale referencja, która tutaj została podstawiona, więc aby móc odbindować, czyli
usunąć taki EventListener,
musimy gdzieś mieć referencje do funkcji, czyli jeżeli ta funkcja jest nazwana, i ją tutaj przekazaliśmy to
możemy ją później usunąć.
Kod
Przypisywanie i usuwanie zdarzeń dla elementów · 1 min
var btn2 = document.querySelector("#btn2"),
btn3 = document.querySelector("#btn3");
function sayHello() {
alert("Hej!");
}
btn2.onclick = sayHello;
btn2.onclick = function() {
alert("Witaj!");
};
btn3.addEventListener("click", sayHello, false);
btn3.addEventListener("click", function() {
alert("Witaj!");
}, false);
btn2.onclick = null;
btn3.removeEventListener("click", sayHello, false);