Ahoj! V této lekci chci mluvit o tak důležitém konceptu, jako je probublávání a zachycování událostí. Bublinkování je jev, při kterém když kliknete na podřízený prvek, událost se rozšíří k jeho nadřazenému prvku.

To může být velmi užitečné při zpracování velkých vnořených seznamů nebo tabulek, abyste každému prvku nepřiřazovali obsluhu události, můžete přiřadit jednu obsluhu nadřazený prvek a událost se již rozšíří do všech vnořených prvků v nadřazeném prvku. Podívejme se na příklad.

Tento ovladač je pro

bude fungovat, pokud kliknete na vnořenou značku nebo :

Klikněte na EM, handler na DIV bude fungovat

Jak můžete vidět, když kliknete na vnořený prvek em, spustí se obslužná rutina na div. Proč se tohle děje? Čtěte dál a zjistěte.

Výstup

Takže základní princip výstupu:

U jakékoli události nezáleží na tom, zda se na prvek klikne myší, událost bude nejprve fungovat na nadřazeném prvku a poté se podél řetězce rozšíří na všechny vnořené prvky.

Řekněme například, že existují 3 vnořené prvky FORM > DIV > P s obslužnou rutinou události na každém z nich:

FORMULÁŘ
DIV

Probublávání zajišťuje zacvaknutí vnitřního prvku

Nejprve zavolá obsluhu kliknutí (pokud existuje).

Takový proces se nazývá probublávání, protože události takříkajíc „plují“ z vnitřního živlu nahoru přes své rodiče, stejně jako vzduchová bublina plave ve vodě, takže můžete také najít definici bublání, no, prostě z anglického slova bubling – vznášet se.

Přístup k cílovému prvku event.target

Abychom zjistili, na kterém prvku jsme zachytili tu či onu událost, existuje metoda event.target. (přečtěte si o objektu události).

  • událost.cíl- jedná se o samotný původní prvek, na kterém k události došlo.
  • tento- toto je vždy aktuální prvek, kterého bublání dosáhlo, a handler na něm právě provádí.

Pokud máte například nainstalovaný pouze jeden obslužný program form.onclick, „zachytí“ všechna kliknutí uvnitř formuláře. Zároveň všude tam, kde dojde ke kliknutí uvnitř, stále vyskočí k prvku

, na kterém bude psovod pracovat.

kde:

  • tento(=event.currentTarget) bude vždy samotný formulář, protože na něm pracoval handler.
  • událost.cíl bude obsahovat odkaz na konkrétní prvek uvnitř formuláře, ten nejvíce vnořený, na který došlo ke kliknutí.

V zásadě to může být stejné jako event.target, pokud se na formulář klikne a ve formuláři nejsou žádné další prvky.

Zastavení stoupání

Obvykle se bublání události dostane přímo nahoru a dosáhne objektu kořenového okna.

Ale je možné zastavit výstup na nějakém mezičlánku.

Chcete-li zastavit bublání, zavolejte metodu event.stopPropagation().

Podívejme se na příklad, kdy obslužný program body.onclick nebude fungovat po kliknutí na tlačítko:

Pokud má prvek pro stejnou událost několik handlerů, pak i když bublání ustane, budou provedeny všechny.

StopPropagation tedy zabrání dalšímu šíření události, ale všechny handlery budou pracovat na prvku, ale ne dále na dalším prvku.

Chcete-li zastavit zpracování na aktuálním prvku, prohlížeče podporují metodu event.stopImmediatePropagation(). Tato metoda nejen zabrání bublání, ale také zastaví zpracování události na aktuálním prvku.

Ponoření

Ve standardu je kromě „vzniku“ událostí také „ponoření“.

Potápění je na rozdíl od výstupu méně žádané, ale i tak se bude hodit vědět o něm.

Průběh akce má tedy 3 fáze:

  1. Událost jde shora dolů. Tato fáze se nazývá „etapa zachycení“.
  2. Událost dosáhla konkrétního prvku. Toto je cílová fáze.
  3. Koneckonců, událost začne vyskakovat. Toto je „plovoucí fáze“.

To je uvedeno ve standardu takto:

Když se tedy klikne na TD, událost projde řetězem rodičů, nejprve dolů k elementu („potopí se“) a poté nahoru („plave“), přičemž se podle toho po cestě aktivují handleři.

Nahoře jsem psal pouze o stoupání, protože ostatní stupně samy o sobě nejsou využívány a zůstávají u nás bez povšimnutí.

Psovodi nevědí nic o fázi zachycení, ale začínají pracovat od bublání.

A abyste zachytili událost ve fázi zachycení, stačí použít:

  • Argument pravdivý, pak bude událost zachycena na cestě dolů.
  • Argument je nepravdivý, pak bude událost zachycena při bublání.

Příklady

V příkladu na ,

,

Jsou zde stejní psovodi jako dříve, ale tentokrát - ve fázi ponoření. Chcete-li vidět zachycení v akci, klikněte na prvek v něm

Ovladače budou pracovat v pořadí shora dolů: FORM → DIV → P.

JS kód je takto:

varelems = document.querySelectorAll("form,div,p"); // na každý prvek pověsíme handler ve fázi zachycení pro (var i = 0; i< elems.length; i++) { elems[i].addEventListener("click", highlightThis, true); }


Nikdo vás neobtěžuje přidělovat handlery pro obě fáze, jako je tento:

varelems = document.querySelectorAll("form,div,p"); for (var i = 0; i< elems.length; i++) { elems[i].addEventListener("click", highlightThis, true); elems[i].addEventListener("click", highlightThis, false); }

Klikněte na vnitřní prvek

Chcete-li zobrazit pořadí, ve kterém událost prochází:
Mělo by být FORM → DIV → P → P → DIV → FORM. Všimněte si, že prvek

Zúčastní se obou etap.

Výsledek

  • Když dojde k události, prvek, na kterém k události došlo, je označen jako event.target.
  • Událost se nejprve přesune dolů z kořenového adresáře dokumentu do event.target , přičemž během cesty zavolá obslužné programy dodávané prostřednictvím addEventListener(…., true).
  • Událost se přesune z event.target až na začátek dokumentu, zatímco volá handlery dodané přes addEventListener(…., false).

Každý handler bude mít přístup k vlastnostem události:

  • event.target je nejhlubší prvek, na kterém se událost skutečně stala.
  • event.currentTarget (=toto) je prvek, na kterém je tento moment pracoval self-handler (ke kterému se událost „dostala“).
  • event.eventPhase – v jaké fázi se obsluha události spustila (ponor = 1, plovoucí = 3).

Bublinkování lze zastavit voláním metody event.stopPropagation(), ale to se nedoporučuje, protože událost můžete potřebovat pro neočekávané účely.

Nyní se podíváme na některé pokročilé věci při práci s objektem Event, konkrétně: probublávání a zachycování a také delegování událostí.

Událost bublá

Představte si, že máte několik vnořených bloků:

nejvnitřnější blok

Když kliknete na nejvnitřnější blok, událost při kliknutí vyskytuje se nejprve v něm a pak se spouští v jeho nadřazeném prvku, v nadřazeném prvku jeho rodiče atd., dokud nedosáhne této značky tělo a na značku html(pak do dokument a předtím okno).

A to je logické, protože kliknutím na vnitřní blok současně kliknete na všechny vnější.

Podívejme se na to v následujícím příkladu: máme 3 bloky, ke každému z nich je připojena událost onclick:

Klikněte na nejvnitřnější červený blok - a uvidíte, jak bude fungovat nejprve kliknutí červeného bloku, poté modrého a poté zeleného:

Toto chování se nazývá povrchová úprava události - analogicky se vzestupem vzduchové bubliny ze dna. Stejně jako bublina se zdá, že naše kliknutí na vnitřní prvek vyplave nahoru a pokaždé se spustí na vyšších blocích.

událost.cíl

Řekněme, že máme dva prvky: div a odstavec p, který leží uvnitř tohoto divu. Pojďme onlick svázat do diva:

Když klikneme na tento div, můžeme přejít na odstavec, nebo můžeme přejít na místo, kde tento odstavec neexistuje.

Jak to může být - podívejte se na následující příklad: zelená je náš div a modrá je náš odstavec:

Pokud kliknete na zelenou část, klikneme na div, a pokud kliknete na modrou část, dojde ke kliknutí nejprve na odstavec a poté na div. Ale protože onclick je připojen konkrétně k div, obecně si nemusíme všimnout přítomnosti odstavce.

Někdy bychom však rádi věděli, zda ke kliknutí došlo přímo na div nebo na jeho následný odstavec. K tomu nám pomůže objekt Event a jeho vlastnost. událost.cíl- ukládá přesně ten prvek, ve kterém došlo ke kliknutí.

V následujícím příkladu máme div, uvnitř leží p a uvnitř - rozpětí.

Navažme událost onclick na nejvyšší prvek (div) a klikneme na různé prvky: div, p, span. Používáním událost.cíl získejte nejspodnější prvek, kde k události došlo, a zobrazte jeho název pomocí tagName .

Kliknete-li např. na rozpětí, událost zachytí náš div (koneckonců je k němu připojen onclick), ale v událost.cíl bude přesně lhát rozpětí:

Klikněte na různé bloky - uvidíte výsledek:

Zastavení stoupání

Takže už víte, že všechny události vyskakují až nahoru (až html tag a pak do dokumentu a pak do okna). Někdy je potřeba toto stoupání zastavit. To lze provést libovolným prvkem, přes který událost vyskočí. Chcete-li to provést, v kódu prvku zavolejte metodu event.stopPropagation().

V následujícím příkladu bude kliknutí na červený blok fungovat samo, pak na modrý blok a je to - modrý blok zastaví další stoupání a zelený blok nebude nijak reagovat:

Klikněte na červený blok - uvidíte výsledek:

Ponoření

Kromě bublání akcí existuje také potápět se(podle vědeckých etapa odposlechu). To znamená, že událost jde nejprve shora dolů (záchytná fáze), dosáhne našeho prvku (cílová fáze) a teprve poté se začne vznášet (etapa bublání).

Obsluhu události můžete zavěsit s ohledem na fázi zachycení pouze pomocí addEventListener. K tomu má třetí parametr: pokud je to pravda, událost se spustí ve fázi zachycení, a pokud je nepravda, ve fázi bublání (toto je ve výchozím nastavení):

Vargreen = document.getElementById("zelená"); green.addEventListener("click", func, true); func(událost) ( )

Pomocí vlastnosti lze určit fázi, ve které k události došlo event.eventPhase. Může nabývat následujících hodnot: 1 - záchytný stupeň, 2 - cílový stupeň, 3 - stupeň stoupání.

Úvod do delegace

Představte si situaci: nechte nás ul S několika li. Ke každému li je připojena následující událost: po kliknutí na li se na jeho konec přidá „!“.

Pojďme implementovat výše uvedené:

  • odstavec 1
  • bod 2
  • bod 3
  • bod 4
  • bod 5
var li = document.querySelectorAll("#ul li"); //Ve smyčce zavěsíme funkci addSign na každé li: for (var i = 0; i

Klikněte na li - uvidíte, jak se na jejich konec přidá "!":

  • odstavec 1
  • bod 2
  • bod 3
  • bod 4
  • bod 5

Nechť nyní máme také tlačítko, kliknutím na které se přidá nové na konec ul li s textem "položka". Čeká nás překvapení: přiložená akce nebude fungovat za nové li! Přesvědčte se o tom:

  • odstavec 1
  • bod 2
  • bod 3
  • bod 4
  • bod 5

Klikněte na tlačítko pro přidání li a poté na toto nové li – nebude reagovat:

  • odstavec 1
  • bod 2
  • bod 3
  • bod 4
  • bod 5
Přidejte li

Chcete-li problém vyřešit, v době vytváření nového li na něj zavěste funkci addSign přes addEventListener. Pojďme to implementovat:

  • odstavec 1
  • bod 2
  • bod 3
  • bod 4
  • bod 5
var li = document.querySelectorAll("#ul li"); for (var i = 0; i

  • odstavec 1
  • bod 2
  • bod 3
  • bod 4
  • bod 5
Přidejte li

Existuje druhý způsob, jak problém obejít - delegování události. Pojďme to analyzovat.

Delegace akce

Podstata delegování je následující: nezavěsíme událost na každého li, ale na jejich rodiče - na ul.

Zároveň by měl být zachován výkon našeho skriptu: stejně jako dříve se při kliknutí na li na jeho konec přidá „!“. Pouze událost v nové verzi bude zavěšena na ul:

var ul = document.getElementById("ul"); //Zavěste událost na ul: ul.addEventListener("click", addSign); funkce addSign() ( )

Jak to uděláme: protože událost je zavěšena na ul, uvnitř funkce můžeme zachytit li událost.cíl. Dovolte mi připomenout, co je event.target - to je přesně tag, ve kterém došlo ke kliknutí, v našem případě tomu tak je li.

Zde je tedy řešení našeho problému prostřednictvím delegování:

  • odstavec 1
  • bod 2
  • bod 3
  • bod 4
  • bod 5

Výsledek spuštění kódu:

  • odstavec 1
  • bod 2
  • bod 3
  • bod 4
  • bod 5

V tomto případě bude naše řešení fungovat automaticky i pro nové li, protože událost není zavěšena na li, ale na ul:

  • odstavec 1
  • bod 2
  • bod 3
  • bod 4
  • bod 5
var ul = document.getElementById("ul"); ul.addEventListener("click", addSign); function addSign() ( event.target.innerHTML = event.target.innerHTML + "!"; ) //Implementace tlačítka pro přidání nového li: var button = document.getElementById("button"); button.addEventListener("klikni", addLi); funkce addLi() ( var li = document.createElement("li"); li.innerHTML = "nové li"; ul.appendChild(li); )

Klikněte na tlačítko pro přidání li a poté na toto nové li - bude reagovat:

  • odstavec 1
  • bod 2
  • bod 3
  • bod 4
  • bod 5
Přidejte li

Náš kód funguje, ale ne bez chyb. Pojďme si tyto nedostatky rozebrat a napsat univerzálnější řešení.

Delegování obecné události

Nevýhoda našeho kódu se projeví, když jsou uvnitř li nějaké vnořené značky. V našem případě budiž tagy i:

V tomto případě stiskněte i bude mít za následek přidání vykřičníku konec značky i, nikoli štítek li, jak bychom chtěli (pokud kliknete na li mimo kurzívu, pak bude vše v pořádku):

  • odstavec kurzíva 1
  • odstavec kurzíva 2
  • odstavec kurzíva 3
  • odstavec kurzíva 4
  • odstavec kurzíva 5
var ul = document.getElementById("ul"); ul.addEventListener("click", addSign); funkce addSign() ( event.target.innerHTML = event.target.innerHTML + "!"; )

Klikněte na kurzívu - uvidíte, jak "!" bude přidáno na jeho konec (stisknutí mimo kurzívu bude fungovat dobře):

Problém je vyřešen následovně (popsaná metoda není jediná, ale nejjednodušší): pomocí nejbližší metody najdeme nejbližší li, která je rodičem event.target takto: event.target.closest("li").

Jak to funguje: pokud bylo kliknutí zapnuto i, pak dovnitř událost.cíl to lžu a v event.target.closest("li")- naše li, pro kterou by událost měla vypálit.

Pokud bylo kliknutí na li, pak dovnitř událost.cíl a v event.target.closest("li") naše li bude lhát.

Pojďme zkontrolovat:

  • odstavec kurzíva 1
  • odstavec kurzíva 2
  • odstavec kurzíva 3
  • odstavec kurzíva 4
  • odstavec kurzíva 5
var ul = document.getElementById("ul"); ul.addEventListener("click", function(event) ( var li = event.target.closest("li"); if (li) ( //zkontrolujte, zda vůbec neexistuje žádný nadřazený li li.innerHTML = li.innerHTML + "!";)));

Výsledek spuštění kódu:

Bez ohledu na to, jak hluboké je vnoření: tag i může být ve značce b a ten ve značce rozpětí a teprve potom dovnitř li- to je jedno: stavba event.target.closest("li") najde rodiče z libovolné úrovně vnoření.

Když dojde k události, obslužné rutiny vystřelí nejprve na samotný vnořený prvek, poté na jeho nadřazený prvek, poté nad ním a tak dále v řetězci vnoření.

Například existují 3 vnořené prvky FORM > DIV > P , s obslužnou rutinou na každém:

Kód: FORMULÁŘ

DIV

Bublinkování zajišťuje kliknutí na vnitřní straně

Nejprve zavolá obsluhu onclick (pokud existuje).

Pokud tedy kliknete na P ve výše uvedeném příkladu, zobrazí se upozornění postupně: p → div → formulář.

Tento proces se nazývá bublání, protože události probublávají z vnitřního elementu nahoru přes rodiče, podobně jako vzduchová bublina plave ve vodě.

událost.cíl

Na jakémkoli prvku, který událost zachytíme, vždy můžete zjistit, kde přesně se stala.
Nejhlubší prvek, který událost spustí, se nazývá prvek „target“ nebo „source“ a je dostupný jako event.target.

Rozdíly od tohoto (=event.currentTarget):

  • event.target je zdrojový prvek, na kterém událost nastala, během procesu probublávání se nemění.
  • toto je aktuální prvek, kterého bublání dosáhlo, handler na něm právě provádí.

Pokud například existuje pouze jeden obslužný program form.onclick, „zachytí“ všechna kliknutí uvnitř formuláře. Všude, kde uvnitř dojde ke kliknutí - vyskočí na prvek

Na které psovod poběží.

kde:

  • toto (=event.currentTarget) bude vždy samotný formulář, protože na něj obsluha vystřelila.
  • event.target bude obsahovat odkaz na konkrétní prvek uvnitř formuláře, na ten nejvíce vnořený, na který bylo kliknuto.

Je také možné, že event.target a toto jsou stejný prvek, například pokud ve formuláři nejsou žádné další značky a kliknutí bylo na samotný prvek .

Přestaňte probublávat událost

Výstup jde přímo nahoru. Normálně bude událost bublat nahoru a nahoru až do prvku a pak až do document , a někdy i window , které zavolají všechny obslužné rutiny v jeho cestě.

Ale jakýkoli middleware může rozhodnout, že událost je plně zpracována, a zastavit bublání.

Chcete-li zastavit bublání, musíte zavolat metodu event.stopPropagation().

Například zde při kliknutí na tlačítko handler body.onclick nebude fungovat:

Kód:

Zachycení události. event.stopImmediatePropagation()

Pokud má prvek pro jednu událost několik handlerů, pak i když bublání ustane, budou provedeny všechny.

to znamená, stopPropagation zabrání tomu, aby událost pokračovala dále, ale na aktuálním prvku budou fungovat všechny handlery.

Chcete-li zcela zastavit zpracování, moderní prohlížeče podpůrná metoda event.stopImmediatePropagation(). Nejen, že zabrání bublání, ale také zastaví zpracování události na aktuálním prvku.

Rozdíly IE8

Abychom usnadnili navigaci, shromáždil jsem rozdíly IE8, které souvisí s probubláváním, do jedné sekce.

Jejich znalost bude potřeba, pokud se rozhodnete psát v čistém JS, bez frameworků a potřebujete podporu IE8.

Žádná vlastnost event.currentTarget

Všimněte si, že při přiřazování obslužné rutiny prostřednictvím vlastnosti on máme toto , takže event.currentTarget obvykle není potřeba, ale když je přiřazena prostřednictvím attachmentEvent , obslužná rutina toto neobdrží , takže aktuální prvek, pokud je potřeba, lze převzít pouze z uzávěry.

Event.srcElement se používá místo event.target v IE8

Pokud píšeme handler, který bude podporovat IE8 i moderní prohlížeče, můžeme jej spustit takto:

Kód: elem.onclick = function(event) (
událost = událost || okno.událost;
var target = event.target || event.srcElement;

// ... nyní máme objekt události a cíl
...
}

Chcete-li zastavit bublání, použijte kód event.cancelBubble=true

Vyskakovací prohlížeč můžete zastavit takto:

Kód: event.stopPropagation ? event.stopPropagation() : (event.cancelBubble=true);

Celkový

  • Když nastane událost, prvek, na kterém k ní došlo, je označen jako „target“ (event.target).
  • Dále se událost nejprve přesune dolů z kořenového adresáře dokumentu do event.target a zároveň zavolá obslužné rutiny dodané pomocí addEventListener(...., true).
  • Událost se poté přesune z event.target do kořenového adresáře dokumentu a během cesty zavolá obslužné programy, které jsou dodávány prostřednictvím on* a addEventListener(...., false).
  • event.target je nejhlubší prvek, na kterém k události došlo.
  • event.currentTarget (=toto) – prvek, na kterém je právě spuštěn handler (na který událost „připlula“).
  • event.eventPhase - v jaké fázi to fungovalo (ponor = 1, výstup = 3).

Události jsou akce nebo události, které se stanou v systému, který programujete a o kterých vám systém říká můžeš v případě potřeby na ně nějakým způsobem reagovat. Pokud například uživatel klepne na tlačítko na webové stránce, můžete na tuto akci reagovat zobrazením informačního pole. V tomto článku diskutujeme o některých důležitých konceptech okolních událostí a podíváme se, jak fungují v prohlížečích. Toto nebude vyčerpávající studie; jen to, co potřebujete vědět v této fázi.

Předpoklady: Základní počítačová gramotnost, základní znalost HTML a CSS, JavaScript první kroky .
objektivní: Pochopit základní teorii událostí, jak fungují v prohlížečích a jak se události mohou lišit v různých programovacích prostředích.

Řada šťastných událostí

jak je uvedeno výše, Události jsou akce nebo události, které se dějí v systému, který programujete – systém produkuje (nebo „vystřelí“) signál určitého druhu, když nastane událost, a také poskytuje mechanismus, kterým lze automaticky provést nějaký druh akce (tj. , běží nějaký kód), když k události dojde. Například na letišti, když je dráha volná pro vzlet letadla, je pilotovi předán signál a v důsledku toho začnou pilotovat letadlo.

V případě webu se události spouštějí uvnitř okna prohlížeče a mají tendenci být připojeny ke konkrétní položce, která se v něm nachází – může to být jeden prvek, sada prvků, dokument HTML načtený na aktuální kartě nebo celé okno prohlížeče. Existuje mnoho různých typů událostí, které mohou nastat, například:

  • Uživatel klikne myší na určitý prvek nebo najede kurzorem na určitý prvek.
  • Uživatel stiskne klávesu na klávesnici.
  • Uživatel změní velikost nebo zavře okno prohlížeče.
  • Odesílá se formulář.
  • Video, které se přehrává, pozastavuje nebo dokončuje přehrávání.
  • Došlo k chybě.

Z toho (a z pohledu na referenci události MDN) můžete zjistit, že existují mnoho událostí, na které lze reagovat.

Každá dostupná událost má obsluha události, což je blok kódu (obvykle funkce JavaScriptu, kterou jako programátor vytvoříte), který se spustí při spuštění události. Když je takový blok kódu definován, aby byl spuštěn v reakci na spuštění události, říkáme, že jsme registrace obsluhy události. Všimněte si, že někdy se nazývají obslužné rutiny událostí posluchači událostí- jsou pro naše účely do značné míry zaměnitelné, i když přísně vzato, spolupracují. Posluchač poslouchá, zda se událost děje, a handler je kód, který je spuštěn v reakci na událost.

Poznámka: Webové události nejsou součástí základního jazyka JavaScript – jsou definovány jako součást rozhraní API zabudovaných v prohlížeči.

Jednoduchý příklad

Podívejme se na jednoduchý příklad, abychom vysvětlili, co zde máme na mysli. Události a obslužné nástroje událostí jste již viděli v mnoha příkladech v tomto kurzu, ale pojďme si to zrekapitulovat, abychom upevnili naše znalosti. V následujícím příkladu máme single , jehož stisknutím se pozadí změní na náhodnou barvu:

Tlačítko ( okraj: 10px );

JavaScript vypadá takto:

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

V tomto kódu ukládáme odkaz na tlačítko uvnitř konstanty nazvané btn pomocí funkce Document.querySelector(). Definujeme také funkci, která vrací náhodné číslo. Třetí částí kódu je obslužná rutina události. Konstanta btn ukazuje na a funkce bgChange() ( const rndCol = "rgb(" + random(255) + "," + random(255) + "," + random(255) + ")"; document.body.style.backgroundColor = rndCol; )

Nejstarší metoda registrace obslužných rutin událostí nalezená na příslušném webu atributy HTML obslužné rutiny události(nebo inline obslužné programy událostí) jako ten, který je zobrazen výše – hodnota atributu je doslova kód JavaScriptu, který chcete spustit, když dojde k události. Výše uvedený příklad vyvolá funkci definovanou uvnitř prvku, která se používá k vložení nebo odkazu na spustitelný kód; toto se obvykle používá pro vložení kódu JavaScript nebo odkaz na něj.">

Většina obslužných rutin událostí, se kterými se setkáte, má pouze standardní sadu vlastností a funkcí (metod) k dispozici na objektu události; úplný seznam najdete v odkazu na objekt události. Některé pokročilejší obslužné rutiny však přidávají speciální vlastnosti obsahující další data, která třeba fungovat. Rozhraní Media Recorder API má například událost dataavailable, která se spustí, když se nahraje nějaký zvuk nebo video, a je k dispozici pro provedení nějaké akce (například uložení nebo přehrání). má k dispozici vlastnost data obsahující zaznamenaná zvuková nebo obrazová data, abyste k nim měli přístup a mohli s nimi něco dělat.

Zabránění výchozímu chování

Někdy narazíte na situaci, kdy chcete události zabránit v tom, co dělá ve výchozím nastavení. Nejběžnějším příkladem je webový formulář, například vlastní registrační formulář. Když vyplníte podrobnosti a stiskněte tlačítko Odeslat, přirozené chování je, že data jsou odeslána na určitou stránku na serveru ke zpracování a prohlížeč bude přesměrován na stránku se zprávou o úspěchu (nebo na stejnou stránku, pokud je jiná nespecifikováno.)

Problém nastává, když uživatel neodeslal data správně - jako vývojář chcete zabránit odesílání na server a zobrazit chybovou zprávu, která říká, co je špatně a co je třeba udělat, aby bylo vše v pořádku. Některé prohlížeče podporují funkce automatického ověřování dat formulářů, ale protože mnoho z nich tak neučiní, doporučujeme vám na ně nespoléhat a implementovat vlastní kontroly ověření. Podívejme se na jednoduchý příklad.

Nejprve jednoduchý HTML formulář, který vyžaduje zadání vašeho jména a příjmení:

Div ( margin-bottom: 10px; )

Nyní trochu JavaScriptu - zde implementujeme velmi jednoduchou kontrolu uvnitř obslužné rutiny události onsubmit (událost submit se spustí na formuláři při jeho odeslání), která testuje, zda jsou textová pole prázdná. Pokud ano, zavoláme funkci preventDefault() na objektu události – která zastaví odesílání formuláře – a poté zobrazíme chybovou zprávu v odstavci pod formulářem, abychom uživateli řekli, co je špatně:

Const form = document.querySelector("form"); 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 = "Musíte vyplnit oba názvy! ";))

Je zřejmé, že je to dost slabé ověření formuláře - nezabrání uživateli ověřovat formulář například mezerami nebo čísly zadanými do polí - ale je to v pořádku například pro účely. Výstup je následující:

Událost bublá a zachycuje

Poslední téma, které je zde třeba probrat, je něco, s čím se často nesetkáte, ale pokud mu nerozumíte, může to být opravdu nepříjemné. Probublávání událostí a zachycení jsou dva mechanismy, které popisují, co se stane, když jsou na jednom prvku aktivovány dva handlery stejného typu události. Podívejme se na příklad, abychom si to usnadnili – otevřete ukázku show-video-box.html na nové kartě (a na jiné kartě.) Níže je také k dispozici živě:

Příklad skrytého videa
Zobrazit příklad video boxu

Toto je docela jednoduchý příklad, který ukazuje a skrývá a) je obecný kontejner pro obsah toku. Nemá žádný vliv na obsah nebo rozvržení, dokud nebude stylizován pomocí CSS.">

s a) vloží do dokumentu přehrávač médií, který podporuje přehrávání videa. Můžeš použít