Przejdź do treści

Zdarzenia HTML5

Jakie są rodzaje zdarzeń HTML5 i do czego służą?

Zdarzenie HTML to określona sytuacja lub akcja, która zachodzi w interfejsie użytkownika i może wywołać reakcję przeglądarki lub skryptu (JavaScript). Przykładami zdarzeń są kliknięcie myszą, załadowanie strony, zmiana wartości w formularzu czy rozpoczęcie odtwarzania pliku multimedialnego. Zdarzenia pozwalają tworzyć dynamiczne i interaktywne strony internetowe, reagujące na działania użytkownika.

Zdarzenia w HTML można przypisywać bezpośrednio do elementów jako atrybuty, dodając przedrostek on przed nazwą zdarzenia. Na przykład, aby wykonać akcję po kliknięciu przycisku, można użyć atrybutu onclick="...":

<button onclick="alert('Kliknięto przycisk!')">Kliknij mnie</button>

Każdy element oraz inne obiekty występujące w języku HTML mają ściśle określoną listę zdarzeń, które obsługują. Poniżej przedstawiono trzy główne grupy zdarzeń dostępnych w HTML5:

  • Podstawowe zdarzenia - związane z ogólną interakcją użytkownika z elementami strony, np. klikaniem lub zmianą wartości.
  • Zdarzenia multimedialne - wywoływane podczas odtwarzania audio i wideo, np. gdy rozpoczyna się lub kończy odtwarzanie.
  • Zdarzenia drag-and-drop - umożliwiają implementację przeciągania i upuszczania elementów w obrębie strony.

Zdarzenia te stanowią podstawę dla budowy bardziej dynamicznych i responsywnych interfejsów użytkownika. Poniższa tabela zawiera zestawienie nazw zdarzeń, elementów i obiektów do których mają one zastosowanie oraz opisu momentu ich uruchomienia.

ZdarzenieZastosowanieOpis
DOMContentLoadedDocumentUruchamia się, gdy parser zakończy przetwarzanie dokumentu Document.
afterprintWindowUruchamia się w Window po zakończeniu drukowania.
beforeprintWindowUruchamia się w Window przed rozpoczęciem drukowania.
beforematchElementyUruchamia się na elementach z atrybutem hidden=until-found przed ich ujawnieniem.
beforetoggleElementyUruchamia się na elementach z atrybutem popover, gdy przechodzą z widocznego na ukryty stan lub odwrotnie.
beforeunloadWindowUruchamia się w Window, gdy strona ma zostać zamknięta, umożliwiając wyświetlenie ostrzeżenia.
blurElementy, WindowUruchamia się na węzłach, gdy przestają być one fokusowane.
cancelElementy CloseWatcher, dialog, inputUruchamia się na obiektach CloseWatcher lub elementach dialog, gdy otrzymują żądanie zamknięcia, lub na elementach input, gdy nie dokonano zmiany wyboru pliku.
changeElementy formularzaUruchamia się, gdy użytkownik zmienia wartość formularza (patrz również zdarzenie input).
clickElementyNormalnie jest to zdarzenie myszy; wywoływane również sztucznie na elemencie przed uruchomieniem jego aktywacji, gdy element jest aktywowany za pomocą urządzenia wejściowego, które nie jest wskaźnikiem (np. klawiatura).
closeElementy CloseWatcher, dialog, MessagePortUruchamia się na obiektach CloseWatcher lub elementach dialog, gdy są one zamykane za pomocą żądania lub kodu, lub na obiektach MessagePort po rozłączeniu.
commandElementyUruchamia się na elementach, gdy obsługują one wywołanie przez użytkownika za pomocą atrybutu commandfor.
connectSharedWorkerGlobalScopeUruchamia się, gdy nowy klient łączy się z globalnym zakresem współdzielonego pracownika.
contextlostElementy canvas, obiekty OffscreenCanvasUruchamia się, gdy kontekst renderowania CanvasRenderingContext2D lub OffscreenCanvasRenderingContext2D zostaje utracony.
contextrestoredElementy canvas, obiekty OffscreenCanvasUruchamia się, gdy kontekst renderowania CanvasRenderingContext2D lub OffscreenCanvasRenderingContext2D zostaje przywrócony po utracie.
currententrychangeNavigationUruchamia się, gdy zmienia się navigation.currentEntry.
disposeNavigationHistoryEntryUruchamia się, gdy wpis historii sesji związany z NavigationHistoryEntry zostaje trwale usunięty z historii sesji i nie można do niego już przejść.
errorObiekty globalne, elementy Worker, obiekty związane z sieciąUruchamia się, gdy wystąpią niespodziewane błędy (np. błędy sieciowe, błędy skryptów, błędy dekodowania).
focusElementy, WindowUruchamia się na węzłach, które zyskują fokus.
formdataElementy formUruchamia się na elemencie form, gdy jest tworzona lista wpisów formularza.
hashchangeWindowUruchamia się w Window, gdy fragment URL dokumentu się zmienia.
inputElementyUruchamia się, gdy użytkownik zmienia zawartość elementu contenteditable lub wartość kontrolki formularza. Patrz również zdarzenie change dla kontrolek formularza.
invalidElementy formularzaUruchamia się na kontrolkach formularza podczas walidacji, gdy nie spełniają one swoich ograniczeń.
languagechangeObiekty globalneUruchamia się na obiektach globalnych, gdy zmieniają się preferencje językowe użytkownika.
loadWindow, elementyUruchamia się w Window, gdy dokument zakończył ładowanie; wydarzają się także na elementach zawierających zasób (np. img, embed), gdy zasób został załadowany.
messageWindow, EventSource, MessagePort, BroadcastChannel, DedicatedWorkerGlobalScope, Worker, ServiceWorkerContainerUruchamia się na obiekcie, gdy otrzymuje on wiadomość.
Zdarzenia multimedialne
loadstartaudio i videoAgent użytkownika rozpoczyna wyszukiwanie danych multimedialnych jako część algorytmu wyboru zasobów.
progressaudio i videoAgent użytkownika pobiera dane multimedialne.
suspendaudio i videoAgent użytkownika celowo nie pobiera obecnie danych multimedialnych.
abortaudio i videoAgent użytkownika przestaje pobierać dane multimedialne przed ich całkowitym załadowaniem, ale nie z powodu błędu.
erroraudio i videoWystępuje błąd podczas pobierania danych multimedialnych lub typ zasobu nie jest obsługiwanym formatem multimedialnym.
emptiedaudio i videoElement multimedialny przechodzi do stanu NETWORK_EMPTY z innego stanu.
stalledaudio i videoAgent użytkownika próbuje pobierać dane multimedialne, ale dane nie są dostępne tak jak oczekiwano.
loadedmetadataaudio i videoAgent użytkownika właśnie określił czas trwania i wymiary zasobu multimedialnego, a ścieżki tekstowe są gotowe.
loadeddataaudio i videoAgent użytkownika po raz pierwszy może odtworzyć dane multimedialne w bieżącym położeniu odtwarzania.
canplayaudio i videoAgent użytkownika może wznowić odtwarzanie, ale szacuje, że nie dotrwa do końca bez buforowania.
canplaythroughaudio i videoAgent użytkownika szacuje, że odtworzy zasób do końca bez konieczności dalszego buforowania.
playingaudio i videoOdtwarzanie jest gotowe do rozpoczęcia po wstrzymaniu lub opóźnieniu spowodowanym brakiem danych.
waitingaudio i videoOdtwarzanie zostało zatrzymane, ponieważ kolejna klatka nie jest dostępna, ale agent użytkownika oczekuje jej pojawienia się.
seekingaudio i videoRozpoczęto przewijanie do nowej pozycji - atrybut seeking zmienia się na true.
seekedaudio i videoPrzewijanie zakończone - atrybut seeking zmienia się na false.
endedaudio i videoOdtwarzanie zakończyło się, bo osiągnięto koniec zasobu.
durationchangeaudio i videoAtrybut duration został właśnie zaktualizowany.
timeupdateaudio i videoPozycja odtwarzania zmieniła się jako część normalnego odtwarzania lub w sposób szczególny.
playaudio i videoElement nie jest już wstrzymany - odtwarzanie rozpoczęło się.
pauseaudio i videoElement został wstrzymany.
ratechangeaudio i videoAtrybut defaultPlaybackRate lub playbackRate został zaktualizowany.
resizeaudio i videoZaktualizowano jeden z atrybutów videoWidth lub videoHeight.
volumechangeaudio i videoZmieniono atrybut volume lub muted.
errorsourceWystąpił błąd podczas pobierania danych multimedialnych lub format nie jest obsługiwany.
errorAudioTrackList, VideoTrackList, TextTrackListWystąpił błąd podczas pobierania danych multimedialnych lub format nie jest obsługiwany.
cuechangeTextTrack, trackJedna lub więcej etykiet (cue) w ścieżce stała się aktywna lub przestała być aktywna.
errortrackWystąpił błąd podczas pobierania danych ścieżki lub format ścieżki tekstowej nie jest obsługiwany.
loadtrackDane ścieżki zostały pobrane i poprawnie przetworzone.
enterTextTrackCueEtykieta (cue) stała się aktywna.
exitTextTrackCueEtykieta (cue) przestała być aktywna.
Zdarzenia drag-and-drop
dragstartElement źródłowyUżytkownik rozpoczyna przeciąganie elementu.
dragElement źródłowyElement jest przeciągany.
dragenterBezpośrednio wskazany element lub element bodyPrzeciągany element wchodzi w obszar docelowy.
dragleavePoprzedni element docelowyPrzeciągany element opuszcza obszar docelowy.
dragoverBieżący element docelowyPrzeciągany element znajduje się nad obszarem docelowym (zdarzenie wyzwalane wielokrotnie).
dropBieżący element docelowyPrzeciągany element zostaje upuszczony na docelowy obszar.
dragendElement źródłowyKończy się operacja przeciągania (niezależnie od tego, czy zakończyła się upuszczeniem).

Żródło: HTML Standard

Komentarze

Zobacz więcej komentarzy

Facebook