Witam! W tej lekcji chcę opowiedzieć o tak ważnej koncepcji, jak bulgotanie i przechwytywanie zdarzeń. Bąbelkowanie to zjawisko, w którym kliknięcie elementu podrzędnego powoduje rozchodzenie się zdarzenia do jego elementu nadrzędnego.

Może to być bardzo przydatne podczas przetwarzania dużych zagnieżdżonych list lub tabel, aby nie przypisywać obsługi zdarzeń do każdego elementu, możesz przypisać jeden uchwyt na element nadrzędny, a zdarzenie będzie już propagowane do wszystkich zagnieżdżonych elementów w rodzicu. Spójrzmy na przykład.

Ten przewodnik jest przeznaczony dla

zadziała, jeśli klikniesz zagnieżdżony tag lub :

Kliknij na EM, handler na DIV będzie działać

Jak widać, gdy klikniesz na zagnieżdżony element em, zostanie wyzwolony uchwyt na div. Dlaczego to się dzieje? Czytaj dalej i dowiedz się.

Wzniesienie się

A więc podstawowa zasada wynurzania:

W przypadku każdego zdarzenia nie ma znaczenia, czy klikniemy myszą na elemencie, zdarzenie najpierw zadziała na elemencie nadrzędnym, a następnie wzdłuż łańcucha rozprzestrzeni się na wszystkie zagnieżdżone elementy.

Na przykład załóżmy, że są 3 zagnieżdżone elementy FORM > DIV > P, z obsługą zdarzeń na każdym:

FORMULARZ
DIV

Bąbelkowanie zapewnia kliknięcie wewnętrznego elementu

Wywoła obsługę kliknięć (jeśli istnieje) najpierw na

Taki proces nazywa się bulgotaniem, ponieważ zdarzenia niejako „pływają” od elementu wewnętrznego w górę przez rodziców, tak jak bańka powietrza unosi się w wodzie, więc można również znaleźć definicję bulgotania, cóż, po prostu od angielskiego słowa bulgotanie - unosić się.

Dostęp do elementu docelowego event.target

Aby dowiedzieć się, na którym elemencie złapaliśmy to lub tamto zdarzenie, służy metoda event.target. (przeczytaj o obiekcie zdarzenia).

  • event.cel- jest to sam oryginalny element, na którym miało miejsce zdarzenie.
  • ten- jest to zawsze bieżący element, do którego dotarło bąbelkowanie, a procedura obsługi jest na nim aktualnie wykonywana.

Na przykład, jeśli masz zainstalowaną tylko jedną procedurę obsługi form.onclick, to „złapie” wszystkie kliknięcia wewnątrz formularza. W tym samym czasie, gdziekolwiek jest kliknięcie w środku, nadal wyskakuje do elementu

, na którym będzie pracował handler.

W którym:

  • ten(=event.currentTarget) zawsze będzie samym formularzem, ponieważ handler nad nim pracował.
  • event.cel będzie zawierać link do konkretnego elementu wewnątrz formularza, najbardziej zagnieżdżonego, na którym nastąpiło kliknięcie.

W zasadzie może to być to samo, co event.target, jeśli formularz został kliknięty i nie ma więcej elementów w formularzu.

Zaprzestanie wynurzania

Zazwyczaj propagacja zdarzenia trafia prosto na górę i dociera do głównego obiektu okna.

Ale możliwe jest zatrzymanie wynurzania na jakimś pośrednim elemencie.

Aby zatrzymać propagację, wywołaj metodę event.stopPropagation().

Spójrzmy na przykład, w którym moduł obsługi body.onclick nie będzie działał po kliknięciu przycisku:

Jeśli element ma kilka funkcji obsługi dla tego samego zdarzenia, to nawet jeśli propagacja zostanie zatrzymana, wszystkie zostaną wykonane.

W ten sposób stopPropagation zapobiegnie dalszemu propagowaniu zdarzenia, ale wszystkie programy obsługi będą działać na elemencie, ale nie na następnym elemencie.

Aby zatrzymać przetwarzanie bieżącego elementu, przeglądarki obsługują metodę event.stopImmediatePropagation(). Ta metoda nie tylko zapobiegnie propagacji, ale także zatrzyma przetwarzanie zdarzeń w bieżącym elemencie.

Zanurzenie

W standardzie oprócz „powstania” wydarzeń jest też „zanurzenie”.

Nurkowanie, w przeciwieństwie do wynurzania, jest mniej popularne, ale nadal warto o nim wiedzieć.

Przepustka na wydarzenie składa się z 3 etapów:

  1. Wydarzenie przebiega od góry do dołu. Ten etap nazywa się „etapem przechwytywania”.
  2. Wydarzenie osiągnęło określony element. To jest etap celu.
  3. W końcu wydarzenie zaczyna się pojawiać. To jest „pływająca scena”.

Jest to pokazane w normie w następujący sposób:

Tak więc, gdy TD zostanie kliknięty, zdarzenie przejdzie przez łańcuch rodziców, najpierw w dół do elementu („zapada”), a następnie w górę („pływa”), odpowiednio aktywując po drodze procedury obsługi.

Wyżej pisałem tylko o podejściu, bo same pozostałe stopnie nie są wykorzystywane i pozostają przez nas niezauważone.

Opiekunowie nie wiedzą nic o etapie przechwytywania, ale zaczynają pracę od bulgotania.

Aby złapać zdarzenie na etapie przechwytywania, wystarczy użyć:

  • Argument prawdziwy, wtedy zdarzenie zostanie przechwycone w drodze w dół.
  • Argument jest fałszywy, wtedy zdarzenie zostanie przechwycone podczas bąblowania.

Przykłady

W przykładzie na ,

,

Są te same handlery co poprzednio, ale tym razem – na etapie immersji. Cóż, aby zobaczyć przechwycenie w akcji, kliknij element w nim

Programy obsługi będą działały w kolejności odgórnej: FORM → DIV → P.

Kod JS wygląda tak:

varelems = document.querySelectorAll("formularz,dział,p"); // na każdym elemencie zawiesimy handler na etapie przechwytywania for (var i = 0; i< elems.length; i++) { elems[i].addEventListener("click", highlightThis, true); }


Nikt ci nie przeszkadza, aby przypisać obsługę do obu etapów, w ten sposób:

varelems = document.querySelectorAll("formularz,dział,p"); dla (zmienna i = 0; i< elems.length; i++) { elems[i].addEventListener("click", highlightThis, true); elems[i].addEventListener("click", highlightThis, false); }

Kliknij element wewnętrzny

Aby zobaczyć kolejność przekazywania wydarzenia:
Powinien być FORM → DIV → P → P → DIV → FORM. Zauważ, że element

Weźmie udział w obu etapach.

Wyniki

  • Po wystąpieniu zdarzenia element, na którym zdarzenie miało miejsce, jest oznaczony jako event.target.
  • Zdarzenie najpierw przemieszcza się w dół z katalogu głównego dokumentu do event.target , wywołując po drodze procedury obsługi dostarczone przez addEventListener(…., true).
  • Zdarzenie przemieszcza się od event.target do początku dokumentu, po drodze wywołuje procedury obsługi dostarczone przez addEventListener(…., false).

Każdy handler będzie miał dostęp do właściwości zdarzenia:

  • event.target to najgłębszy element, na którym zdarzenie faktycznie miało miejsce.
  • event.currentTarget (=this) to element, na którym ten moment samoobsługa pracowała (do czego „doszła” impreza).
  • event.eventPhase - w jakiej fazie uruchomiono procedurę obsługi zdarzenia (dive = 1, float = 3).

Propagowanie można zatrzymać, wywołując metodę event.stopPropagation(), ale nie jest to zalecane, ponieważ może być potrzebne zdarzenie do nieoczekiwanych celów.

Teraz przyjrzymy się niektórym zaawansowanym rzeczom podczas pracy z obiektem Event, a mianowicie: propagacji i przechwytywaniu, a także delegowaniu zdarzeń.

Bąbelkowanie zdarzeń

Wyobraź sobie, że masz kilka zagnieżdżonych bloków:

najbardziej wewnętrzny blok

Kiedy klikniesz na najbardziej wewnętrzny blok, zdarzenie na kliknięcie występuje najpierw w nim, a następnie uruchamia się w jego rodzicu, w rodzicu swojego rodzica i tak dalej, aż osiągnie ten tag ciało i na metce html(następnie do dokument a wcześniej okno).

I to jest logiczne, ponieważ klikając na blok wewnętrzny, jednocześnie klikasz wszystkie zewnętrzne.

Zobaczmy to na poniższym przykładzie: mamy 3 bloki, każdy z nich ma dołączone zdarzenie onclick:

Kliknij najbardziej wewnętrzny czerwony klocek - a zobaczysz, jak zadziała najpierw kliknięcie czerwonego klocka, potem niebieskiego, a następnie zielonego:

To zachowanie nazywa się wynurzenie zdarzenia - przez analogię do wznoszenia się pęcherzyka powietrza od dołu. Podobnie jak bańka, nasze kliknięcie na wewnętrzny element wydaje się unosić do góry, za każdym razem uruchamiając się na wyższych blokach.

event.cel

Powiedzmy, że mamy dwa elementy: div i paragraf p, które znajdują się wewnątrz tego div. Połączmy onlicka z divą:

Kiedy klikniemy na ten div, możemy przejść do akapitu, lub możemy przejść do miejsca, w którym ten akapit nie istnieje.

Jak to możliwe - spójrz na następujący przykład: zielony to nasz div, a niebieski to nasz akapit:

Jeśli klikniesz na zieloną część, klikniemy na div, a jeśli klikniesz na niebieską część, kliknięcie nastąpi najpierw na akapicie, a następnie na div. Ale ponieważ onclick jest dołączony konkretnie do div, na ogół możemy nie zauważyć obecności akapitu.

Czasami jednak chcielibyśmy wiedzieć, czy kliknięcie nastąpiło bezpośrednio na div, czy na jego akapicie podrzędnym. Pomoże nam w tym obiekt Event i jego właściwość. event.cel- przechowuje dokładnie ten element, w którym nastąpiło kliknięcie.

W poniższym przykładzie mamy div, w środku leży p, a w nim - Zakres.

Powiążmy zdarzenie onclick z najwyższym elementem (div) i kliknijmy różne elementy: div, p, span. Używając event.cel pobierz najniższy element, w którym wydarzyło się zdarzenie, i wyświetl jego nazwę za pomocą tagName .

Jeśli klikniesz np. na span, to zdarzenie złapie naszego div (przecież onclick jest do niego podpięty), ale w event.cel skłamie dokładnie Zakres:

Kliknij na różne bloki - zobaczysz wynik:

Zaprzestanie wynurzania

Więc już wiesz, że wszystkie wydarzenia pojawiają się na samym szczycie (do tag html a następnie do dokumentu, a następnie do okna). Czasami istnieje potrzeba przerwania tego wynurzania. Może to zrobić dowolny element, przez który pojawia się zdarzenie. Aby to zrobić, w kodzie elementu wywołaj metodę event.stopPropagacja().

W poniższym przykładzie kliknięcie na czerwony klocek zadziała samo na siebie, potem na niebieski klocek i to wszystko - niebieski klocek zatrzyma dalsze wznoszenie, a zielony klocek nie zareaguje w żaden sposób:

Kliknij czerwony blok - zobaczysz wynik:

Zanurzenie

Oprócz bulgotania wydarzeń jest też nurkować(według naukowym etap przechwytywania). Oznacza to, że zdarzenie najpierw przechodzi od góry do dołu (etap przechwytywania), dociera do naszego elementu (etap celu), a dopiero potem zaczyna się unosić (etap bąbelkowania).

Możesz zawiesić obsługę zdarzeń biorąc pod uwagę etap przechwycenia tylko przy pomocy addEventListener. Aby to zrobić, ma trzeci parametr: jeśli jest równa true, zdarzenie zostanie uruchomione na etapie przechwytywania, a jeśli false, na etapie propagacji (domyślnie):

Vargreen = document.getElementById("zielony"); green.addEventListener("klik", func, prawda); funkcja(zdarzenie) ( )

Etap, na którym doszło do zdarzenia, można określić za pomocą właściwości event.eventPhase. Może przyjmować następujące wartości: 1 – etap przechwycenia, 2 – etap docelowy, 3 – etap wynurzania.

Wprowadzenie do delegacji

Wyobraź sobie sytuację: pozwól nam mieć ul Z kilkoma Li. Do każdego li dołączane jest następujące zdarzenie: po kliknięciu li na jego końcu dodawany jest znak „!”.

Zaimplementujmy powyższe:

  • paragraf 1
  • punkt 2
  • punkt 3
  • punkt 4
  • punkt 5
var li = document.querySelectorAll("#ul li"); //W pętli zawieszamy funkcję addSign na każdym li: for (var i = 0; i

Kliknij na li - zobaczysz, jak "!" jest dodawane na ich końcu:

  • paragraf 1
  • punkt 2
  • punkt 3
  • punkt 4
  • punkt 5

Niech teraz mamy też przycisk, po kliknięciu którego dodawany jest nowy na końcu ul Li z tekstem „pozycja”. Czeka nas niespodzianka: załączone wydarzenie nie zadziała dla nowych ja! Upewnijmy się, że:

  • paragraf 1
  • punkt 2
  • punkt 3
  • punkt 4
  • punkt 5

Kliknij przycisk, aby dodać li, a następnie ten nowy li - nie zareaguje:

  • paragraf 1
  • punkt 2
  • punkt 3
  • punkt 4
  • punkt 5
Dodaj li

Aby rozwiązać problem, w momencie tworzenia nowego li zawieś na nim funkcję addSign przez addEventListener. Zaimplementujmy to:

  • paragraf 1
  • punkt 2
  • punkt 3
  • punkt 4
  • punkt 5
var li = document.querySelectorAll("#ul li"); dla (zmienna i = 0; i

  • paragraf 1
  • punkt 2
  • punkt 3
  • punkt 4
  • punkt 5
Dodaj li

Jest drugi sposób obejścia problemu - delegowanie wydarzeń. Przeanalizujmy to.

Delegacja wydarzeń

Istota delegacji jest następująca: zawiesimy wydarzenie nie na każdym li, ale na ich rodzicu - na ul.

Jednocześnie należy zachować wydajność naszego skryptu: tak jak poprzednio, po kliknięciu li na jego końcu zostanie dodany znak „!”. Tylko wydarzenie w nowej odsłonie zawiśnie na ul:

var ul = document.getElementById("ul"); //Zawieś wydarzenie na ul: ul.addEventListener("klik", addSign); funkcja addSign() ( )

Jak to zrobić: skoro zdarzenie jest zawieszone na ul, wewnątrz funkcji możemy złapać li event.cel. Przypomnę, czym jest event.target - to jest dokładnie ten tag, w którym nastąpiło kliknięcie, w naszym przypadku tak jest Li.

Oto rozwiązanie naszego problemu poprzez delegację:

  • paragraf 1
  • punkt 2
  • punkt 3
  • punkt 4
  • punkt 5

Wynik wykonania kodu:

  • paragraf 1
  • punkt 2
  • punkt 3
  • punkt 4
  • punkt 5

W takim przypadku nasze rozwiązanie zadziała automatycznie nawet dla nowego li, bo impreza wisi nie na li, a na ul:

  • paragraf 1
  • punkt 2
  • punkt 3
  • punkt 4
  • punkt 5
var ul = document.getElementById("ul"); ul.addEventListener("kliknij", addSign); function addSign() ( event.target.innerHTML = event.target.innerHTML + "!"; ) //Implementacja przycisku dodawania nowego li: var button = document.getElementById("button"); button.addEventListener("klik", addLi); funkcja addLi() ( var li = document.createElement("li"); li.innerHTML = "new li"; ul.appendChild(li); )

Kliknij na przycisk, aby dodać li, a następnie na to nowe li - zareaguje:

  • paragraf 1
  • punkt 2
  • punkt 3
  • punkt 4
  • punkt 5
Dodaj li

Nasz kod działa, ale nie bez wad. Przeanalizujmy te niedociągnięcia i napiszmy bardziej uniwersalne rozwiązanie.

Ogólne delegowanie zdarzeń

Wada naszego kodu objawi się, gdy wewnątrz li znajdzie się kilka zagnieżdżonych tagów. W naszym przypadku niech to będą tagi i:

W takim przypadku naciśnięcie i spowoduje dodanie wykrzyknika do koniec tagu, nie tag Li, jak byśmy sobie życzyli (jeśli klikniesz li poza kursywą, to wszystko będzie ok):

  • ustęp kursywa 1
  • ustęp kursywa 2
  • ustęp kursywa 3
  • ustęp kursywa 4
  • ustęp kursywa 5
var ul = document.getElementById("ul"); ul.addEventListener("kliknij", addSign); funkcja addSign() ( event.target.innerHTML = event.target.innerHTML + "!"; )

Kliknij kursywę - zobaczysz, jak „!” zostanie dodany na końcu (naciśnięcie poza kursywą zadziała):

Problem jest rozwiązany w następujący sposób (opisana metoda nie jest jedyna, ale najprostsza): używając najbliższej metody znajdujemy najbliższe li, które jest rodzicem event.target w następujący sposób: event.target.closest("li").

Jak to działa: jeśli kliknięcie było włączone i, potem w event.cel to kłamię i w event.target.closest("li")- nasze li, za które impreza powinna odpalić.

Jeśli kliknięcie było na Li, potem w event.cel, i w event.target.closest("li") nasze li będzie kłamać.

Sprawdźmy:

  • ustęp kursywa 1
  • ustęp kursywa 2
  • ustęp kursywa 3
  • ustęp kursywa 4
  • ustęp kursywa 5
var ul = document.getElementById("ul"); ul.addEventListener("klik", function(event) ( var li = event.target.closest("li"); if (li) ( //sprawdź, czy w ogóle nie ma li nadrzędnego li.innerHTML = li.innerHTML + "!";) ));

Wynik wykonania kodu:

Bez względu na głębokość zagnieżdżenia: tag i może być w tagu b i ten w tagu Zakres i dopiero wtedy w Li- nieważne: budowa event.target.closest("li") znajdzie rodzica z dowolnego poziomu zagnieżdżenia.

Gdy wystąpi zdarzenie, programy obsługi uruchamiają się najpierw na samym zagnieżdżonym elemencie, następnie na jego rodzicu, a następnie powyżej i tak dalej, w górę łańcucha zagnieżdżania.

Na przykład są 3 zagnieżdżone elementy FORM > DIV > P , z obsługą na każdym:

Kod: FORMULARZ

DIV

Bąbelkowanie zapewnia, że ​​kliknięcie na wewnętrznej stronie

Wywoła obsługę onclick (jeśli istnieje) najpierw na

Dlatego jeśli klikniesz na P w powyższym przykładzie, to alert będzie wyświetlany kolejno: p → div → forma.

Ten proces nazywa się bulgotaniem, ponieważ wydarzenia bulgoczące od elementu wewnętrznego w górę przez rodziców, podobnie jak pęcherzyk powietrza unoszą się w wodzie.

event.cel

Niezależnie od tego, na jakim elemencie złapiemy wydarzenie, zawsze możesz dowiedzieć się dokładnie, gdzie się ono wydarzyło.
Najgłębszy element, który uruchamia zdarzenie, nazywa się elementem „target” lub „source” i jest dostępny jako event.target.

Różnice w stosunku do tego (=event.currentTarget):

  • event.target jest elementem źródłowym, na którym wystąpiło zdarzenie, nie zmienia się podczas procesu propagacji.
  • jest to bieżący element, do którego dotarło bąbelkowanie, na którym aktualnie wykonuje procedurę obsługi.

Na przykład, jeśli istnieje tylko jeden moduł obsługi form.onclick, to „łapie” wszystkie kliknięcia wewnątrz formularza. Wszędzie tam, gdzie w środku jest kliknięcie - wyskoczy do elementu

Ten, na którym będzie przebiegał przewodnik.

W którym:

  • this (=event.currentTarget) zawsze będzie samym formularzem, ponieważ funkcja obsługi na nim uruchomiła.
  • event.target będzie zawierał link do określonego elementu wewnątrz formularza, najbardziej zagnieżdżonego, który został kliknięty.

Możliwe jest również, że event.target i to ten sam element, na przykład jeśli nie ma innych tagów w formularzu, a kliknięcie było na samym elemencie .

Przestań bulgotać wydarzenie

Podjazd idzie prosto w górę. Zwykle wydarzenie będzie rosło i rosło, aż do elementu , a następnie do document , a czasem nawet window , wywołując wszystkie procedury obsługi na swojej ścieżce.

Jednak każde oprogramowanie pośredniczące może zdecydować, że zdarzenie zostało w pełni przetworzone i zatrzymać propagację.

Aby zatrzymać bulgotanie, musisz wywołać metodę event.stopPropagacja().

Na przykład tutaj, po kliknięciu przycisku, przewodnik body.onclick nie zadziała:

Kod:

Przechwytywanie zdarzeń. event.stopImmediatePropagation()

Jeśli element ma kilka funkcji obsługi dla jednego zdarzenia, to nawet jeśli propagacja ustanie, wszystkie zostaną wykonane.

To znaczy, stopPropagacja zapobiega dalszemu postępowi zdarzenia, ale na bieżącym elemencie wszystkie procedury obsługi będą działać.

Aby całkowicie zatrzymać przetwarzanie, nowoczesne przeglądarki metoda wsparcia event.stopImmediatePropagation(). Nie tylko zapobiega bąblowaniu, ale także zatrzymuje przetwarzanie zdarzeń w bieżącym elemencie.

Różnice IE8

Aby ułatwić nawigację, zebrałem w jednej sekcji różnice w IE8, które mają związek z bąblowaniem.

Ich wiedza będzie potrzebna, jeśli zdecydujesz się pisać w czystym JS, bez frameworków i potrzebujesz wsparcia IE8.

Brak właściwości event.currentTarget

Zauważ, że podczas przypisywania obsługi przez właściwość on mamy to , więc event.currentTarget zwykle nie jest potrzebny, ale po przypisaniu przez attachEvent , procedura obsługi nie otrzymuje tego , więc bieżący element, jeśli to konieczne, może być pobrany tylko z domknięcia.

Event.srcElement jest używany zamiast event.target w IE8

Jeśli piszemy handler, który będzie obsługiwał zarówno IE8, jak i nowoczesne przeglądarki, możemy uruchomić go w ten sposób:

Kod: elem.onclick = funkcja(zdarzenie) (
zdarzenie = zdarzenie || okno.zdarzenie;
var cel = zdarzenie.cel || zdarzenie.srcElement;

// ... teraz mamy obiekt zdarzenia i cel
...
}

Aby zatrzymać propagację, użyj kodu event.cancelBubble=true

Możesz zatrzymać wyskakujące okienko w różnych przeglądarkach w ten sposób:

Kod: event.stopPropagacja ? event.stopPropagation() : (event.cancelBubble=true);

Całkowity

  • W momencie wystąpienia zdarzenia element, na którym ono wystąpiło, jest oznaczony jako „target” (event.target).
  • Następnie zdarzenie najpierw przemieszcza się w dół z katalogu głównego dokumentu do event.target , wywołując po drodze procedury obsługi dostarczone przez addEventListener(...., true).
  • Zdarzenie przemieszcza się następnie z event.target do katalogu głównego dokumentu, po drodze wywołując programy obsługi, dostarczane przez on* i addEventListener(...., false).
  • event.target to najgłębszy element, na którym wystąpiło zdarzenie.
  • event.currentTarget (=this) – element, na którym aktualnie uruchomiony jest handler (do którego „przepłynęło” zdarzenie).
  • event.eventPhase - na jakim etapie zadziałało (nurkowanie = 1, wynurzanie = 3).

Zdarzenia to akcje lub zdarzenia, które mają miejsce w programowanym systemie, o których system informuje tak możesz w razie potrzeby odpowiedzieć na nie w jakiś sposób. Na przykład, jeśli użytkownik kliknie przycisk na stronie internetowej, możesz chcieć odpowiedzieć na tę akcję, wyświetlając pole informacyjne. W tym artykule omówimy kilka ważnych koncepcji wydarzeń towarzyszących i przyjrzymy się, jak działają w przeglądarkach. To nie będzie wyczerpujące badanie; tylko to, co musisz wiedzieć na tym etapie.

Wymagania wstępne: Podstawowa znajomość obsługi komputera, podstawowa znajomość HTML i CSS, pierwsze kroki w JavaScript.
cel: Aby zrozumieć podstawową teorię zdarzeń, sposób ich działania w przeglądarkach oraz różnice w zdarzeniach w różnych środowiskach programistycznych.

Seria szczęśliwych wydarzeń

jak powyżej, wydarzenia są akcjami lub zdarzeniami, które mają miejsce w programowanym systemie - system wytwarza (lub "odpala") pewnego rodzaju sygnał w momencie wystąpienia zdarzenia, a także zapewnia mechanizm, dzięki któremu pewne działanie może zostać automatycznie podjęte (tj. , jakiś kod jest uruchomiony) po wystąpieniu zdarzenia. Na przykład na lotnisku, gdy pas startowy jest wolny dla samolotu do startu, pilot otrzymuje sygnał, w wyniku czego rozpoczyna on pilotowanie samolotu.

W przypadku sieci zdarzenia są uruchamiane w oknie przeglądarki i zwykle są dołączane do określonego elementu, który się w nim znajduje – może to być pojedynczy element, zestaw elementów, dokument HTML załadowany na bieżącej karcie lub całe okno przeglądarki. Istnieje wiele różnych rodzajów zdarzeń, które mogą wystąpić, na przykład:

  • Użytkownik klikający myszką na określony element lub najeżdżający kursorem na określony element.
  • Użytkownik naciskający klawisz na klawiaturze.
  • Użytkownik zmieniający rozmiar lub zamykający okno przeglądarki.
  • Wysyłany formularz.
  • Film jest odtwarzany, wstrzymywany lub kończony.
  • Wystąpił błąd.

Możesz dowiedzieć się z tego (i patrząc na odniesienie do wydarzenia MDN), że istnieją dużo wydarzeń, na które można odpowiedzieć.

Każde dostępne wydarzenie ma obsługa zdarzeń, który jest blokiem kodu (zwykle funkcją JavaScript, którą tworzysz jako programista), który zostanie uruchomiony po uruchomieniu zdarzenia. Kiedy taki blok kodu jest zdefiniowany do uruchomienia w odpowiedzi na uruchomienie zdarzenia, mówimy, że jesteśmy rejestracja obsługi zdarzeń. Zauważ, że programy obsługi zdarzeń są czasami nazywane słuchacze zdarzeń- dla naszych celów są one w zasadzie wymienne, chociaż ściśle mówiąc, działają razem. Odbiornik nasłuchuje zdarzenia, a moduł obsługi to kod uruchamiany w odpowiedzi na to zdarzenie.

Notatka: Zdarzenia internetowe nie są częścią podstawowego języka JavaScript — są zdefiniowane jako część interfejsów API wbudowanych w przeglądarkę.

Prosty przykład

Spójrzmy na prosty przykład, aby wyjaśnić, co tutaj mamy na myśli. Widziałeś już zdarzenia i programy obsługi zdarzeń używane już w wielu przykładach w tym kursie, ale podsumujmy tylko po to, aby ugruntować naszą wiedzę. W poniższym przykładzie , mamy pojedynczy , który po naciśnięciu zmienia tło na losowy kolor:

Przycisk ( margines: 10px );

JavaScript wygląda tak:

Const btn = document.querySelector("przycisk"); function random(liczba) ( return Math.floor(Math.random() * (number+1)); ) btn.onclick = function() ( const rndCol = "rgb(" + random(255) + "," + random(255) + "," + random(255) + ")"; document.body.style.backgroundColor = rndCol; )

W tym kodzie przechowujemy odwołanie do przycisku wewnątrz stałej o nazwie btn , używając funkcji Document.querySelector(). Definiujemy również funkcję, która zwraca liczbę losową. Trzecią częścią kodu jest procedura obsługi zdarzeń. Stała btn wskazuje na a function bgChange() ( const rndCol = "rgb(" + random(255) + "," + random(255) + "," + random(255) + ")"; document.body.style.backgroundColor = rndCol; )

Najwcześniejsza metoda rejestracji programów obsługi zdarzeń znaleziona w sieci zaangażowana Atrybuty HTML programu obsługi zdarzeń(lub wbudowane programy obsługi zdarzeń) jak ten pokazany powyżej - wartość atrybutu to dosłownie kod JavaScript, który chcesz uruchomić, gdy wystąpi zdarzenie. Powyższy przykład wywołuje funkcję zdefiniowaną wewnątrz elementu, która służy do osadzenia lub odwoływania się do kodu wykonywalnego; jest to zwykle używane do osadzania lub odwoływania się do kodu JavaScript.">

Większość programów obsługi zdarzeń, z którymi się spotkasz, ma po prostu standardowy zestaw właściwości i funkcji (metod) dostępnych w obiekcie zdarzenia; pełna lista znajduje się w dokumentacji obiektu Event. Jednak niektóre bardziej zaawansowane procedury obsługi dodają specjalistyczne właściwości zawierające dodatkowe dane, które musi działać. Interfejs API Media Recorder ma na przykład zdarzenie dataavailable, które jest uruchamiane, gdy jakiś dźwięk lub wideo został nagrany i jest dostępny do zrobienia czegoś (na przykład zapisania go lub odtworzenia). ma dostępną właściwość danych zawierającą nagrane dane audio lub wideo, aby umożliwić Ci dostęp do nich i zrobienie z nimi czegoś.

Zapobieganie domyślnemu zachowaniu

Czasami możesz natknąć się na sytuację, w której chcesz uniemożliwić zdarzeniu wykonywanie tego, co domyślnie. Najczęstszym przykładem jest formularz internetowy, na przykład niestandardowy formularz rejestracyjny. nacisnąć przycisk przesyłania, naturalnym zachowaniem jest przesłanie danych do określonej strony na serwerze w celu przetworzenia, a przeglądarka przekierowana na pewnego rodzaju stronę „komunikat o powodzeniu” (lub tę samą stronę, jeśli inna jest nieokreślony.)

Problem pojawia się, gdy użytkownik nie przesłał danych poprawnie - jako programista chcesz uniemożliwić przesyłanie danych na serwer i wyświetlić komunikat o błędzie informujący, co jest nie tak i co należy zrobić, aby wszystko naprawić. Niektóre przeglądarki obsługują funkcje automatycznej walidacji danych formularza, ale ponieważ wiele z nich tego nie robi, radzimy nie polegać na nich i wdrażać własne kontrole walidacji. Spójrzmy na prosty przykład.

Najpierw prosty formularz HTML, który wymaga podania imienia i nazwiska:

Div (margin-dolny: 10px; )

Teraz trochę JavaScript - tutaj zaimplementujemy bardzo proste sprawdzenie wewnątrz procedury obsługi zdarzenia onsubmit (zdarzenie submit jest uruchamiane w formularzu, gdy jest on przesyłany), który sprawdza, czy pola tekstowe są puste. Jeśli tak, wywołujemy funkcję PreventDefault() obiektu zdarzenia — która zatrzymuje przesyłanie formularza — a następnie wyświetlamy komunikat o błędzie w akapicie poniżej naszego formularza, aby poinformować użytkownika, co jest nie tak:

Const form = document.querySelector("formularz"); const fname = document.getElementById("fname"); const lname = document.getElementById("lname"); const para = document.querySelector("p"); form.onsubmit = function(e) ( if (fname.value === "" || lname.value === "") ( e.preventDefault(); para.textContent = "Musisz wpisać obie nazwy! "; ) )

Oczywiście jest to dość słaba walidacja formularza - na przykład nie zatrzymałaby użytkownika walidacji formularza za pomocą spacji lub liczb wprowadzonych w pola - ale jest OK na przykład dla celów.Wyjście jest następujące:

Propagowanie i przechwytywanie zdarzeń

Ostatnim tematem do omówienia jest coś, z czym nie będziesz się często spotykać, ale może to być prawdziwy ból, jeśli go nie rozumiesz. Propagowanie i przechwytywanie zdarzeń to dwa mechanizmy opisujące, co się dzieje, gdy dwa programy obsługi tego samego typu zdarzenia są aktywowane na jednym elemencie. Spójrzmy na przykład, aby to ułatwić - otwórz przykład show-video-box.html w nowej karcie (iw innej karcie). Jest on również dostępny na żywo poniżej:

Ukryty przykład wideo
Pokaż przykład skrzynki wideo

Jest to dość prosty przykład, który pokazuje i ukrywa a ) jest ogólnym kontenerem zawartości przepływu. Nie ma wpływu na treść ani układ, dopóki nie zostanie stylizowany za pomocą CSS.">

z ) osadza odtwarzacz multimedialny, który obsługuje odtwarzanie wideo w dokumencie. Możesz użyć