JavaScript: Obiekt event i target
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.
Wiesz już w jaki sposób przypisywać do elementów różne zdarzenia.
Na razie korzystaliśmy ze zdarzenia click, ale działa to dokładnie w taki sam sposób w przypadku innych
zdarzeń.
Oczywiście nie wszystkie zdarzenia, na wszystkich elementach są dostępne.
Niemniej jednak, ja wspominałem o tym, że mamy w event'cie, czyli w takim zdarzeniu, w obiekcie odpowiednie
informacje i teraz skąd ten obiekt wziąć.
Mamy tutaj znowu kilka przycisków i będę chciał do jednego z nich, przypisać zdarzenie onclick mam go
tutaj już pobranego, więc btn onclick, tak sobie przypisze, moglibyśmy również addEventListener, to będzie
w tym przypadku działać tak samo.
Pamiętasz, że mogliśmy tutaj przypisać funkcję, która się wykona, kiedy na taki przycisk klikniemy, tutaj
btn.
No właśnie, taka funkcja się wykona,
nie ma żadnego problemu, ale taka funkcja może przyjmować parametr event
i nawet powinna.
Więc ja zazwyczaj nazywam go sobie e.
Ja mam nadzieję, że na tym etapie na tyle już rozumiesz tworzenie funkcji, że wie że w tym miejscu definiujemy
funkcje, więc możemy jej parametry nazywać dowolnie. Możemy to nazwać event i pod takim tutaj będziemy
się mogli do niego odwoływać.
W drugiej części tego kursu, bardziej tłumacze jeszcze programowanie obiektowe i pewne zależności w funkcjach,
gdzie lepiej można zrozumieć, jak to jest, że taka funkcja jest gdzieś tam przekazana i wywołana z odpowiednim
parametrem.
Natomiast na razie zapamiętaj, że to wcale nie musi być e,
nazwij to sobie dowolnie.
Natomiast co jest ciekawe, to pod tym parametrem będziemy mieli bardzo wiele ciekawych informacji, które
chciałbym wyświetlić w
konsoli
po kliknięciu na ten przycisk. Klikamy na przycisk i zobacz, obiekt który nazywa się MouseEvent został
dla nas zwrócony, czyli taki obiekt znajduje się tutaj.
Jeżeli obiekt,
no to już wiesz, że ma właściwości, może mieć również jakieś metody, czyli po kropce się do nich odwołujemy.
No i zerknijmy, co tutaj jest.
W prezentacji wspominałem, że możemy przy kliknięciu na taki przycisk sprawdzić czy np. shift albo ALDalt
był wciśnięty, Alt ki Force.altKey: false.
Ale teraz wcisnę przycisk alt i raz jeszcze kliknę Kliknij mnie.
To był ten przycisk, no i jak widzisz, mamy znowu zdarzenia i np. teraz altKey jest true, bo przytrzymywałem
podczas kliknięcia przycisk alt. Więc tutaj jest bardzo wiele ciekawych informacji, z których będziemy mogli
skorzystać np. clientX czy clientY, to oznacza,
gdzie była myszka kiedy klikaliśmy na ten element.
W tym przypadku, w tym miejscu od lewej strony, czyli cleintX było to 42 piksele, a od góry czyli
clientY, było to 33 piksele.
Ciekawa informacja, przy zdarzeniach typu MouseEvent, ona będzie dostępna, przy zdarzeniach innych, nie
musi być dostępna. Na przykład, jeżeli będziemy obsługiwać zdarzenie pod tytułem wysyłanie formularza
czyli submit, wtedy takiej informacji nie będzie.
Jak widzisz, pod spodem mamy kilka czy kilkanaście ciekawych różnych właściwości takich jak pageX
czy pageY, one są często podobne do takich jak clientX czy cleintY.
Czasami trochę się różnią i w zależności od tego, co potrzebujemy, z różnych będziemy korzystać, podobnie
tutaj.
Natomiast, to co chciałbym, aby nas zainteresowało w tej lekcji, jest to target.
Co to jest target? Kliknąłem na button i mamy target tutaj button btn. Może wyświetlmy sobie to w taki sposób,
czyli e.target i klikniemy tutaj raz jeszcze.
Jak widzisz target, jest to ten oto przycisk, czyli pod target mamy referencje do tego przycisku. Dokładnie
w taki sam sposób, jak on został pobrany, czyli możemy się do niego odwołać i zrobić z nim dowolne rzeczy,
jakie nam się podobają.
Natomiast pomyślałbyś, że nie jest to nic nadzwyczajnego. Przypisałem kliknięcie do tego przycisku mam tutaj
e.target,
w zasadzie mogłbym się tutaj odwołać do btn i to jest dokładnie to samo.
Tak, ale zaraz ci pokaże przykład, gdzie będzie nieco inaczej.
Chciałbym jeszcze, żebyś wiedział, że w takiej funkcji mamy specjalne słowo kluczowe this, które się pojawia
w JavaScript'cie w wielu różnych miejscach.
I teraz jeśli sobie zrobimy console.log this i console.log target, to okaże się, że jest to dokładnie to
samo. Gdybym porównał this równa się e.target.
To jest dokładnie to samo.
Natomiast nie zawsze this to będzie e.target.
Co chciałbym ci teraz pokazać.
Przejdźmy niżej i będę chciał przypisać zdarzenie kliknięcia do całego naszego dokumentu, czyli odwołałam
się do document.body, w ten sposób i następnie onclick równa się, znowu tutaj będziemy chcieli przechwycić
event i będziemy chcieli coś się z niego dowiedzieć np. console.log this i console.log target.
Teraz przypisałem zdarzenie kliknięcia do elementu body, czyli gdzie bym nie kliknął, to jak widzisz zostaje
nam to zwrócone.
W tym przypadku this oraz body, to jest to samo.
Ale co się stanie jeżeli kliknę w link.
Możesz się domyślić, że klikając w link, też klikam w dokument, bo link znajduje się w tym dokumencie,
czyli w body.
Klikam na link.
No i this, jest to body.
Możesz to zobaczyć tutaj, bo this będzie kierować na element, na którym zarejestrowaliśmy zdarzenie, czyli
body.
Ale już target, tego zdarzenia, to był link, czyli niezawsze this, to będzie target.
Jest to ważne do zrozumienia.
Na koniec pokażę ci praktyczny przykład.
Jeszcze z tym naszym buttonem, jeżeli sobie na niego kliknęliśmy,
no to możemy się odwołać np. do e.target.setAttribute disabled.
Na przykład na wartość true i teraz będzie ciekawie działać, bo jeżeli klikniemy, ustawiliśmy jego atrybut disabled na true
i zauważ, że teraz, po kliknięciu w ten element, już nie wyskakują nam żadne zdarzenia, czyli zdarzenie
click nie jest zarejestrowane na przyciskach, które mają atrybut disabled ustawione na true, natomiast to zdarzenie
nie zostało w żaden sposób odbindowane, jeżeli bym sobie teraz tutaj przeszedł, w ten sposób.
Klikając na ten element i usunął mu ten atrybut disabled, to znowu jeżeli będę kliknął, to to zdarzenie,
jak widzisz, w konsoli jest ponownie odpalane.
Kod
Obiekt event i target · 1 min
var btn = document.querySelector("#btn");
btn.onclick = function(e) {
console.log(this);
console.log(e.target);
e.target.setAttribute("disabled", true);
};
document.body.onclick = function(e) {
console.log(this);
console.log(e.target);
};