Zdarzenia 1/5: zdarzenie - przeglądarka mówi „coś się stało”
Plan tematu (5 godzin):
Godzina 1 (dziś): zdarzenie, addEventListener, obiekt zdarzenia
Godzina 2: nie tylko klik - inne zdarzenia (keydown, submit)
Godzina 3: budujemy planszę 3×3 (kółko i krzyżyk)
Godzina 4: kliknięcie pola zapisuje ruch
Godzina 5: kto wygrał - sprawdzamy planszę
Rozgrzewka · 3 minuty
Rozgrzewka: dział DOM z poprzednich lekcji
Co robi document.getElementById("info")?
Do czego służy właściwość innerHTML elementu?
Jaka metoda tworzy zupełnie nowy element w dokumencie (np. document.createElement("p"))?
Część 1 · Co to jest zdarzenie
Zdarzenie: sygnał, że coś się stało
Zdarzenie (ang. event) to informacja, że w przeglądarce coś się właśnie wydarzyło - na przykład ktoś kliknął przycisk. Trochę jak dzwonek do drzwi: dzwonek „dzwoni” (zdarzenie się zdarza), a Wy dopiero wtedy reagujecie.
MDN: Learn_web_development/Core/Scripting/Events, sekcja „What is an event?” („the system produces (or ”fires") a signal of some kind when an event occurs, and provides a mechanism by which an action can be automatically taken (that is, some code running) when the event occurs.”, tłum. własne: „system wytwarza (czyli „wystrzeliwuje”) sygnał jakiegoś rodzaju, gdy zdarzenie następuje, i udostępnia mechanizm, dzięki któremu można automatycznie podjąć działanie (czyli uruchomić jakiś kod), gdy zdarzenie nastąpi.”)
Część 2 · Podpinamy nasłuch
addEventListener: metoda, którą wywołujecie na elemencie
element.addEventListener("click", functionName);
addEventListener przyjmuje dwa argumenty: nazwę zdarzenia jako tekst ("click" - kliknięcie) oraz funkcję, która ma się wykonać, gdy to zdarzenie nastąpi. Podajecie nazwę funkcji bez nawiasów - z nawiasami funkcja wykonałaby się od razu, a nie dopiero po kliknięciu.
MDN: Learn_web_development/Core/Scripting/Events, sekcja „Using addEventListener()” („objects that can fire events have an addEventListener() method, and this is the recommended mechanism for adding event listeners.”, tłum. własne: „obiekty, które mogą wystrzeliwać zdarzenia, mają metodę addEventListener(), i to jest zalecany mechanizm dodawania nasłuchiwaczy zdarzeń.”; „The HTML <button> element will fire a click event when the user clicks it. We call the addEventListener() method on it to add an event listener; this takes two parameters: the string ”click", to indicate that we want to listen to the click event.”, tłum. własne: „Element HTML <button> wystrzeli zdarzenie click, gdy użytkownik go kliknie. Wywołujemy na nim metodę addEventListener(), żeby dodać nasłuchiwacz zdarzenia; przyjmuje ona dwa parametry: ciąg znaków „click”, żeby wskazać, że chcemy nasłuchiwać zdarzenia click.”)
Część 3 · Dwa sposoby podpięcia funkcji
onclick w HTML kontra addEventListener w JS
Ciekawostka z MDN: addEventListener ma jeszcze trzeci, opcjonalny argument - obiekt z opcją capture. Jest domyślnie wyłączona, więc nasłuch reaguje dopiero na klikniętym elemencie. Włączenie { capture: true } sprawia, że ten sam nasłuch odpala się wcześniej, zanim kliknięcie w ogóle dotrze do elementu, na którym go podpięliście.
MDN: Learn_web_development/Core/Scripting/Events, sekcja „Inline event handlers” („those are outdated, and using them is bad practice.”, tłum. własne: „są przestarzałe, a ich stosowanie to zła praktyka.”); sekcja „Event handler properties” („Event handler properties have disadvantages compared to addEventListener(). One of the most significant is that you can't add more than one listener for a single event.”, tłum. własne: „Właściwości obsługi zdarzeń mają wady w porównaniu z addEventListener(). Jedną z najważniejszych jest to, że nie można dodać więcej niż jednego nasłuchiwacza dla pojedynczego zdarzenia.”)
Część 4 · Funkcja obsługi zdarzenia
Funkcja obsługi zdarzenia: kod, który reaguje
Funkcja obsługi zdarzenia (ang. event handler) to zwykła funkcja - piszecie ją tak samo jak każdą inną (dział Funkcje, lekcje 16-19). Różni się tylko tym, że nie wywołujecie jej sami: wywołuje ją przeglądarka, gdy nastąpi zdarzenie, do którego ją podpięliście.
const button = document.getElementById("action");
functionhandleClick() {
// to jest funkcja obsługi zdarzenia
console.log("Kliknięto!");
}
button.addEventListener("click", handleClick);
MDN: Learn_web_development/Core/Scripting/Events, sekcja „What is an event?” („To react to an event, you attach an event listener to it. This is a code feature that listens out for the event firing. When the event fires, an event handler function (referenced by, or contained inside the event listener) is called to respond to the event firing.”, tłum. własne: „Żeby zareagować na zdarzenie, podpinacie do niego nasłuchiwacz zdarzenia. To fragment kodu, który czeka na wystąpienie zdarzenia. Gdy zdarzenie nastąpi, wywoływana jest funkcja obsługi zdarzenia, do której odwołuje się nasłuchiwacz albo która jest w nim zawarta, żeby zareagować na to zdarzenie.”)
Część 5 · Obiekt zdarzenia
Obiekt zdarzenia e: e.target wskazuje, co kliknięto
MDN: Learn_web_development/Core/Scripting/Events, sekcja „Event objects” („Sometimes, inside an event handler function, you'll see a parameter specified with a name such as event, evt, or e. This is called the event object, and it is automatically passed to event handlers to provide extra features and information.”, tłum. własne: „Czasami wewnątrz funkcji obsługi zdarzenia zobaczycie parametr o nazwie takiej jak event, evt albo e. Nazywa się to obiektem zdarzenia i jest automatycznie przekazywany do funkcji obsługi, żeby dostarczyć dodatkowych informacji i możliwości.”; „The target property of the event object is always a reference to the element the event occurred upon.”, tłum. własne: „Właściwość target obiektu zdarzenia jest zawsze odniesieniem do elementu, na którym zdarzenie wystąpiło.”)
Egzamin E.14 i EE.09
Tak pytają na egzaminie
1.
<img id="i1" src="image1.gif">
<button onclick="document.getElementById('i1').src='image2.gif'">
test
</button>
Kod JavaScript wywołany zdarzeniem kliknięcia przycisku ma za zadanie
ukryć image2.gif.
zamienić image1.gif na image2.gif.
zmienić styl obrazu o id równym i1.
wyświetlić image2.gif obok image1.gif.
2.
Zdarzenie JavaScript, będące reakcją na pojedynczo kliknięty dowolny element strony, nosi nazwę
onKeyDown
onDblClick
onLoad
onClick
CKE, EE.09, czerwiec 2021, zadanie 39 · CKE, E.14, czerwiec 2015, zadanie 34