Pokażę jeszcze jedną rzecz, którą można zrobić z obiektem "event" (zdarzenie).
Moja strona odpowiada na odwieczne pytanie:
"Co mówi Koleżka-O-Nie?".
A dokładniej:
"Jak brzmiałby jego głos, gdybyście mogli go słyszeć?".
Kliknięcie na link odeśle was do pliku mp3;
powinien otworzyć się w przeglądarce i odpowiedzieć na to palące pytanie.
Tylko że ja nie chcę, by użytkownik musiał opuszczać stronę.
Powinniśmy słyszeć głos bezpośrednio na stronie.
Możemy to zrobić za pomocą JavaScript,
wykonując tag "audio", gdy użytkownik kliknie na link.
Najpierw umieśćmy link w zmiennej:
"var ohnoesEl ="...
"document.getElementById("ohnoes").
A teraz zdefiniujmy wywołanie zwrotne. Będzie ciekawe!
To wywołanie zwrotne
ma dynamicznie tworzyć tag audio:
var audioEl = document.createElement("audio")...
to jest nowy tag dostępny w nowoczesnych przeglądarkach.
Piszemy: "audio.src ="
i damy tu "href" stąd.
Tag audio przypomina tagi obrazu.
Dopiszemy także "audioEl.autoplay = true",
więc gdy tylko dodamy tag, zacznie się odtwarzanie.
I w końcu dodajemy to do strony.
Nie ma znaczenia, w którym miejscu, bo nie będzie wizualizacji.
Gdy użytkownik kliknie, program ma stworzyć audio, określić źródło,
wykonać autoodtwarzanie i dodać to do strony.
Na koniec upewnijmy się, że przy kliknięciu na link
zostaje przywołany detektor zdarzeń:
ohnoesEl.addEventlistener("click")...
i wpiszemy nazwę funkcji.
No dobrze. Wiecie, co teraz:
przerwijcie odtwarzanie i wypróbujcie program.
Co się wydarzyło?
U mnie odtworzył się dźwięk
- głębokie, niskie pomruki Koleżki...
ale link wciąż otwiera się w nowym oknie.
Idealnie, po odtworzeniu dźwięku
przeglądarka nie powinna kierować użytkownika do linku,
bo dźwięk został odsłuchany.
W tym celu musimy zawiadomić przeglądarkę,
żeby anulowała zachowanie domyślne.
Bo domyślnie, gdy użytkownik kliknie na link,
przeglądarka do niego kieruje.
Jeśli jednak zmieniliśmy działanie linku poprzez JavaScript...
często nie chcemy, by przeglądarka kierowała do linku.
Każemy jej przestać.
Potraktujemy własność "event" w sposób, który nazywa się "preventDefault()".
Musimy zrobić odniesienie
do obiektu zdarzenia, który wprowadzamy.
Wewnątrz piszemy:
"e.preventDefault()".
To ma poinformować przeglądarkę,
by nie wykonywała domyślnych kroków kojarzonych z tym zdarzeniem.
Przerwijcie odtwarzanie i wypróbujcie program.
Usłyszeliście dźwięk, tak?
To przyjemniejsze doświadczenie dla użytkownika.
Tak zwane "progresywne wzbogacanie".
Strona zaczyna działać w HTML,
z domyślnym zachowaniem przeglądarki,
ale potem wzbogacamy ją za pomocą JavaScript.
Często będziecie chcieli używać "preventDefault",
łącząc detektor zdarzeń klikania z linkami.
Używajcie tego podczas przetwarzania formularzy,
bo przeglądarka też może zachowywać się domyślnie,
przekazując informacje do serwera.
Ważne, żeby pamiętać o wygodzie użytkownika.
Jeśli wasza strona nie jest pod tym względem optymalna,
wymyślajcie, jak to zmienić.
Nie zdołamy tu nauczyć was wszystkiego,
ale w Internecie czeka tysiące odpowiedzi!