Schopnost JavaScriptu vytvářet dynamické html stránky stojí na třech pilířích. O dvou z nich již byla řeč v předchozích článcích. A třetí jsou události.

• Správa oken prohlížeče pomocí objektu okna.
• Správa objektů uvnitř okna je DOM.
• Spouštět kód JavaScript na událostech.

Událost je reakce počítače na akci uživatele. Například s t.z. Za javaScriptovou událost je považováno stisknutí tlačítka na klávesnici, pohyb a kliknutí tlačítek myši a zavření okna prohlížeče. Všechny akce s t.z. javaScript jsou generovány objekty dokumentu a prohlížeče (neexistuje žádná koncepce „uživatele“). Když například kliknete na odstavec, událost kliknutí myší je generována objektem - odstavcem.

Abyste mohli spouštět nějaký JavaScript kód, který reaguje na události, musíte tento kód přiřadit k události generované z konkrétního objektu, tzn. s konkrétní událostí z konkrétního objektu. Tato akce se nazývá přihlášení k odběru události.

Předplatné znamená, že navážeme funkci na konkrétní událost z konkrétního objektu v objektovém modelu prohlížeče. A když tento objekt vytvoří (vygeneruje) tuto událost, tato funkce bude automaticky fungovat.

• onclick - kliknutí tlačítkem myši.
• ondblclick - dvojité kliknutí tlačítkem myši.
• onmousedown - tlačítko myši je stisknuto (posunuto dolů).
• onmousemove - myš se pohybuje nad objektem (dochází k mnoha událostem, pohyb myši 1px = 1 událost).
• onmouseout - myš opustí objekt.
• onmouseover - myš se pohybuje nad požadovaným objektem.
• onmouseup – tlačítko myši je uvolněno (zvednuté).
• onkeydown – tlačítko klávesnice je stisknuto (posunuto dolů).
• onkeypress – stisknutí tlačítka na klávesnici.
• onkeyup – tlačítko klávesnice je uvolněno (zvednuté).
• onblur – ztráta vstupního zaostření (blikající kurzor).
• onfocus - okamžik, kdy je vstupní fokus přijat tímto prvkem.
• onchange – generuje ovládací prvek po ztrátě fokusu, pokud se text změnil (například v textovém poli). Výjimkou je prvek seznamu 'select', ve kterém je tato událost generována okamžitě, a nikoli po ztrátě fokusu.
• onload – vygeneruje se, když se stránka v okně načte. Obvykle se používá, když potřebujete spustit nějaký kód JavaScript po úplném načtení stránky.
• onunload – nastává před vyjmutím dokumentu z okna (tedy když tento dokument zavřeme nebo se přesuneme do jiného dokumentu).
• onreset – formulář byl resetován.
• onsubmit – datový formulář byl odeslán.

Odebírejte události

• Předplatné přes JavaScript. Tato metoda se používá ve většině případů. Nejprve musíme najít objekt prvku, ze kterého se chceme přihlásit, například pomocí metody getElementById (uveďte id k požadovanému prvku).

function myFunc () ( //vytvořila výstrahu jednoduché funkce ("ahoj"); ) function pageInit () ( var p= document. getElementById ("1"); p. onclick= myFunc; ) //zavolala funkci ke spuštění událost okna. onload=pageInit; //událost se spustí při načtení stránky< p id= 1 >Odstavec 1 //nastaví ID odstavce

• Přihlásit se k odběru přes html kód. Nevýhodou této metody je, že html kód je zanesený kódem JavaScript; Kromě toho existuje několik omezení a ve složitých případech je použití nepohodlné.

< script type= "text/javascript" >function myFunc () ( //vytvořilo jednoduché upozornění na funkci ("ahoj"); )< p onclick= "myFunc()" >Odstavec 2 //nazývá funkci Event Processing Model

Když dojde k události u prvku, podobné události by se měly vyskytnout na všech jeho nadřazených prvcích až do úplného horního okraje stránky (až po ‚tělo‘, protože jde o hlavní oblast dokumentu). Jakákoli událost, která na stránce nastane, se proto vyskytuje v těle.

Vyvstává tedy otázka, v jakém pořadí k takovým událostem dojde? V moderních prohlížečích se model zpracování událostí nazývá „bublinový model“. Jeho podstata: nejprve dojde k události u prvku, na který bylo kliknuto, poté u jeho rodiče a tak dále až úplně nahoru – až k „tělu“.

Prvek --> prvek 2 --> dokument --> okno

Parametry události (objekt události)

Existuje objekt události, který má mnoho vlastností. Přečtením těchto vlastností můžete získat informace o událostech. Chcete-li získat informace, musíte nejprve získat samotný objekt.

Hlavní vlastnosti tohoto objektu:

• x, y - souřadnice myši v okamžiku výskytu události.
• clientX, clientY - totéž.
• offsetX, offsetY - totéž, ale toto je relativní posunutí myši rodičovský prvek.
• screenX, screenY - souřadnice obrazovky.
• tlačítko - které tlačítko myši bylo stisknuto (0 - nestisknuto, 1 - stisknuto levé tlačítko, 2 - stisknuto pravé tlačítko, 4 - stisknuto prostřední tlačítko).
• keyCode - číselný kód stisknuté klávesy klávesnice.
• srcElement - prvek, který vygeneroval událost.
• fromElement - prvek, ze kterého se myš přesunula.
• toElement - označení objektu, přes který myš přejela.
• cancelBubble je nestandardní způsob, pokud to dáte skutečný, pak bude „vyskakovací bublina“ zrušena; nebo můžete nahradit kód klávesy, kterou uživatel stiskl.

V této lekci se podíváme na hlavní typy událostí, které můžete zachytit pomocí JavaScriptu a spustit nějaký kód.

Kategorie událostí

Všechny události JavaScriptu lze rozdělit do následujících kategorií: události myši, události klávesnice, události snímku/objektu, události formuláře, události přetažení, události animace, události schránky, události médií, události přechodu, události odeslané serverem, události dotyku, události tisku (Print Events), různé události (Misc Events).

Pozor: všechny události v JavaScriptu jsou psány malými (malými) písmeny.

Myší události

• mousedown - událost nastane, když je tlačítko myši stisknuto nad nějakým prvkem, ale ještě nebylo uvolněno.
• mouseup - událost nastane, když tlačítko myši nad některým prvkem přejde ze stisknutého stavu do uvolněného stavu.
• click – událost nastane, když uživatel klikne na prvek. Pořadí, ve kterém se události kliknutí vyskytují (u levého a středního tlačítka myši), je mousedown -> mouseup -> click .
• kontextové menu - událost nastane, když uživatel klikne pravým tlačítkem myši na prvek. Pořadí událostí spojených s kontextovou nabídkou (pro pravé tlačítko myši) je mousedown -> mouseup -> contextmenu .
• dblclick - událost nastane, když uživatel dvakrát klikne na prvek. Pořadí výskytu událostí spojených s dblclick je: mousedown -> mouseup -> click -> mousedown -> mouseup -> click -> dblclick .
• mouseover - událost nastane, když kurzor myši vstoupí do oblasti vlastněné prvkem nebo jedním z jeho potomků.
• mouseout - událost nastane, když se kurzor myši přesune z oblasti vlastněné prvkem nebo jedním z jeho potomků.
• mousemove - událost nastane, když se kurzor myši přesune do oblasti patřící prvku.
• mouseenter - událost nastane, když ukazatel myši vstoupí do oblasti vlastněné prvkem. Tato událost se často používá ve spojení s událostí mouseleave, ke které dochází, když ukazatel myši opustí oblast vlastněnou prvkem. Událost mouseenter je podobná události mouseover a liší se pouze tím, že událost mouseenter neprobublává (s pojmem probublávání události se seznámíme o něco později).
• mouseleave - událost nastane, když ukazatel myši opustí oblast vlastněnou prvkem. Událost mouseleave je podobná události mouseout a liší se pouze tím, že událost mouseleave neprobublává (s konceptem bublin událostí se seznámíme o něco později).

Události na klávesnici

Pořadí výskytu událostí je: keydown -> keypress -> keyup .

• keydown - událost nastane, když je klávesa na klávesnici nad prvkem stisknuta, ale ještě není uvolněna.
• keyup - událost nastane, když stisknutá klávesa na klávesnici nad prvkem přejde do uvolněného stavu.
• keypress - událost nastane, když uživatel stiskne klávesu na klávesnici nad prvkem.

Objektové a rámcové události

• beforeunload - událost nastane před uvolněním dokumentu. Tato událost vám umožňuje zobrazit v potvrzovacím dialogu další zprávu: "Opravdu chcete opustit tuto stránku?" Standardní zpráva, která se objeví při zavírání dokumentu, se může lišit v závislosti na typu různé prohlížeče. Nemůžete ji však změnit ani smazat, můžete ji použít pouze k přidání vlastní zprávy, která se zobrazí spolu s výchozí zprávou.
• chyba - událost se spustí, když dojde k chybě, ke které dojde při načítání externího souboru (například dokumentu nebo obrázku).
• hashchange - událost nastane, když se změní kotevní část (začíná symbolem "#") aktuální URL.
• load - událost nastane po dokončení načítání objektu. Událost load se nejčastěji používá na elementu body ke spuštění skriptu ihned po úplném načtení webové stránky.
• unload - událost nastane při uvolnění stránky (například při zavření karty (okna) prohlížeče).
• pageshow - událost nastane, když uživatel přejde na webovou stránku, tzn. poté, co bude stránka dostupná uživateli. Událost pagehow je podobná události load s tím rozdílem, že se spouští při každém načtení stránky, i když je načtena z mezipaměti. Při prvním načtení stránky se událost pagehow spustí bezprostředně po události načtení.
• pagehide - událost nastane, když uživatel opustí stránku (událost pagehide nastane před událostí unload). Tato událost navíc na rozdíl od události unload nebrání ukládání stránky do mezipaměti.
• resize - událost nastane při změně velikosti okna prohlížeče.
• scroll – událost nastane, když posouváte obsah prvku, který má posuvník.

Události formuláře a kontroly

• fokus - událost nastane, když prvek dostane fokus. Tato událost se neobjeví.
• rozostření - událost nastane, když objekt ztratí zaostření. Tato událost se neobjeví.
• focusin - událost nastane, když prvek obdrží fokus. Událost focusin je podobná události focus, ale liší se od ní tím, že bublinky. Proto jej lze použít, když potřebujete zjistit, kdo ztrácí pozornost: prvek nebo jeho dítě?
• focusout - událost nastane, když prvek ztratí fokus. Událost focusout je podobná události rozostření, ale liší se od ní tím, že probublává. Proto jej lze použít, když potřebujete zjistit, kdo ztrácí pozornost: prvek nebo jeho dítě?
• změna - událost nastane, když se změní hodnota prvku, ale poté, co prvek ztratil fokus. Kromě události change má JavaScript také podobnou vstupní událost, která se od události change liší tím, že k ní dochází bezprostředně po změně hodnoty prvku. Událost change na rozdíl od události input funguje také s prvky keygen a select. U přepínacích tlačítek a zaškrtávacích políček dojde k události změny, když se změní stav těchto prvků.
• input - událost nastane poté, co se změní hodnota vstupního prvku nebo prvku textarea.
• invalid - Událost nastane, když vstupní prvek, jehož data je třeba odeslat spolu s dalšími daty formuláře na server, obsahuje neplatná data.
• reset - událost nastane před vymazáním formuláře, což se provádí vstupním prvkem s type="reset" .
• search – K události dojde poté, co uživatel stiskne klávesu Enter nebo klepne na tlačítko „ x “ (zrušit) na vstupním prvku s type="search" .
• vybrat - událost nastane poté, co vyberete nějaký text v prvku. Událost select se používá hlavně pro vstupní prvek s type="text" nebo textarea .
• odeslat - událost nastane před odesláním formuláře na server.

Přetáhněte události

Události spojené s přetaženým objektem (přetahovatelný cíl, zdrojový objekt):

• dragstart – událost nastane, když uživatel začne přetahovat prvek;
• drag – událost nastane, když uživatel přetáhne prvek;
• dragend – událost nastane, když uživatel dokončí přetahování prvku, tzn. když jsem pustil kurzor myši.

Události spojené s cílem přetažení, který přijímá přetahovací cíl:

• dragenter – událost nastane, když přetahovací cíl vstoupí do oblasti přetažení, která může přijmout přetahovací cíl.
• ragleave - událost nastane, když tažený objekt (dragable target) opustí hranice prvku (drop target), který jej může přijmout.
• dragover - událost nastane, když se přetahovací cíl přesune do oblasti prvku (cíl přetažení), který jej může přijmout.
• drop - událost nastane, když uživatel uvolní přetahovatelný objekt do oblasti prvku (cíl dropu), který jej může přijmout.

Animační akce

Tři události, ke kterým může dojít, když je spuštěna animace CSS:

• animationstart – Vyvolá se, když se spustila animace CSS.
• animace - Vyskytuje se, když se animace CSS provádí opakovaně.
• animationend - nastane, když CSS animace skončilo.

Události schránky

• copy - událost nastane, když uživatel zkopíruje obsah prvku. Událost kopírování také nastane, když uživatel zkopíruje prvek (například obrázky vytvořené pomocí prvku img). Událost copy se používá především pro vstupní prvky s type="text" .
• cut - událost nastane, když uživatel vyjme obsah prvku.
• vložit – událost nastane, když uživatel vloží nějaký obsah do prvku.

Tisk událostí

• afterprint - Událost nastane, když se stránka začne tisknout (tj. po kliknutí na tlačítko Tisk v dialogovém okně) nebo pokud bylo dialogové okno Tisk zavřeno.
• před tiskem - událost nastane před tiskem stránky, tzn. před otevřením dialogového okna Tisk.

Přechodové události

• transitionend - událost se spustí po dokončení přechodu CSS. Poznámka: Pokud je přechod odstraněn před dokončením (např Vlastnost CSS přechod-vlastnost byla odstraněna), pak se událost transitionend nespustí.

Události odeslané serverem

• chyba - událost nastane, když dojde k chybě se zdrojem události. K chybě obvykle dochází při přerušení komunikace. Pokud k tomu dojde, objekt EventSource se automaticky pokusí připojit k serveru.
• open - událost nastane, když je otevřené připojení ke zdroji události.
• zpráva - událost nastane, když je zpráva přijata přes zdroj události.
  Objekt události zprávy podporuje následující vlastnosti:
  • data – obsahuje zprávu.
  • origin – URL dokumentu, který událost spustil.
  • lastEventId - identifikátor (id) poslední přijaté zprávy.

Mediální události

Během procesu načítání zvuku/videa dochází k událostem v následujícím pořadí: loadstart -> Durationchange ->loadmetadata ->loaddata -> progress -> canplay -> canplaythrough .

• abort - událost nastane, když je přerušeno načítání zvuku/videa. K této události dochází, když bylo stahování mediálních dat přerušeno (zrušeno), nikoli proto, že došlo k chybě.
• error - událost nastane, když dojde k chybě při načítání zvuku/videa.
• zastaveno – událost nastane, když se prohlížeč pokusí přijmout mediální data, ale data nejsou dostupná.
• - událost nastane, když prohlížeč začne vyhledávat zadané audio/video, tzn. až začne proces stahování.
• Durationchange - událost nastane, když se změní délka audio/video. Pokud je načten zvuk/video, bude se délka lišit od „NaN“ po skutečnou dobu trvání zvuku/videa.
• loadingmetadata - událost se spustí, když byla načtena metadata pro zadaný zvuk/video. Audio/video metadata se skládají z: trvání, velikosti (pouze video) a textové stopy.
• loaddata - událost nastane po načtení prvního snímku média.
• progress - událost nastane, když prohlížeč stáhne zadané audio/video.
• canplay – událost nastane, když prohlížeč může začít přehrávat zadaný zvuk/video (to znamená, když je stream zvuku/videa dostatečně vyrovnávací paměť, aby jej prohlížeč mohl začít přehrávat).
• canplaythrough – událost nastane v okamžiku, kdy může prohlížeč přehrát zadaná média bez zastavení kvůli ukládání do vyrovnávací paměti.
• ukončeno - událost nastane po dokončení přehrávání audia/videa (dosaženo konce). Tuto událost lze použít k zobrazení zpráv jako „Děkuji za pozornost“, „Děkuji za sledování“ atd.
• pauza - událost nastane, když je přehrávání zvuku/videa pozastaveno uživatelem nebo kódem (programově).
• play - událost nastane, když se spustí přehrávání zvuku/videa. K tomu také dochází, když bylo pozastaveno audio/video a začne se přehrávat.
• přehrávání - Událost nastane, když se audio/video přehrává poté, co bylo pozastaveno nebo zastaveno kvůli ukládání do vyrovnávací paměti.
• ratechange - událost nastane, když se změní rychlost přehrávání zvuku/videa.
• hledání - událost nastane, když uživatel začne přesouvat posuvník (přechod) na novou časovou pozici přehrávaného audia/videa.
• hledané - událost nastane, když uživatel dokončí přesun jezdce (přechod) do nové dočasné pozice přehrávaného audia/videa. Hledaná událost je opakem hledané události. Chcete-li získat aktuální pozici přehrávání, použijte vlastnost currentTime objektu Audio / Video.
• timeupdate - událost nastane, když se změní časová pozice přehrávaného audia/videa.
  K této události dochází:
  • při přehrávání audio/video streamu.
  • při přesouvání posuvníku na novou časovou pozici přehrávaného zvuku/videa.
  Událost timeupdate se často používá ve spojení s vlastností currentTime objektu Audio/Video, která vrací aktuální časovou pozici aktuálně přehrávaného zvuku/videa v sekundách.
• změna hlasitosti – událost nastane pokaždé, když se změní hlasitost přehrávaného video/audio streamu.
  Tato událost nastane, když:
  • zvýšení nebo snížení hlasitosti;
  • ztlumení nebo zrušení ztlumení zvuku.
• čekání – událost nastane, když je video zastaveno kvůli ukládání do vyrovnávací paměti.

Různé akce

• toggle - Událost nastane, když uživatel otevře nebo zavře prvek podrobností. Prvek podrobností je navržen tak, aby vytvářel další informace, které může uživatel podle potřeby zobrazit nebo skrýt.
• kolečko - událost nastane, když se kolečko myši posune vpřed nebo vzad nad prvkem.

Úkoly

Je událost „Keypress on keyboard (onkeypress)“ složitá? A pokud ano, pak v důsledku jakých jednoduchých událostí vzniká?

Máte například 2 prvky p a uživatel přesune myš z oblasti patřící jednomu prvku p do oblasti patřící jinému prvku p. K jakým událostem v tomto případě dochází a jaké prvky je generují?

Téma akcí je velmi důležité a velmi zajímavé. Díky němu můžete dělat spoustu zajímavých věcí, které uživatele potěší. Událost v JavaScriptu je specifická akce, kterou spouští buď uživatel, nebo prohlížeč. Událostí může být například kliknutí myší na tlačítko, pohyb myši, zaměření na prvek, změna hodnoty v textovém poli, změna velikosti okna prohlížeče a tak dále.

Připravil jsem tabulku se všemi akcemi (které znám alespoň) v JavaScriptu. Naleznete v něm jednak název události, prvky, které mohou tuto událost generovat a popis samotné JavaScriptové události.

událost	Objekt	Příčina výskytu
Potrat	obraz	Přerušení načítání obrázku
Rozmazat		Ztracené zaměření prvku
Změna	FileUpload, Select, Text, Textarea	Změňte hodnotu
Klikněte	Oblast, Tlačítko, Zaškrtávací políčko, Dokument, Odkaz, Rádio, Resetovat, Odeslat	Klikněte myší na prvek
DblClick	Oblast, Dokument, Odkaz	Dvakrát klikněte na prvek
DragDrop	Okno	Přejít do okna prohlížeče
Soustředit se	Tlačítko, Zaškrtávací políčko, Nahrání souboru, Rám, Vrstva, Heslo, Rádio, Resetovat, Vybrat, Odeslat, Text, Textová oblast, Okno	Nastavení fokusu na prvek
KeyDown		Stisknutí klávesy na klávesnici
KeyPress	Dokument, obrázek, odkaz, textová oblast	Držení klávesy na klávesnici
KeyUp	Dokument, obrázek, odkaz, textová oblast	Uvolnění klávesy na klávesnici
Zatížení	Dokument, Obrázek, Vrstva, Okno
Myší dolů	Tlačítko, dokument, odkaz	Stisknuto tlačítko myši
MouseMove	Okno	Myš v pohybu
MouseOut	Oblast, Vrstva, Odkaz	Myš jde za hranice prvku
Přejet myší	Oblast, Vrstva, Odkaz	Myš je nad prvkem
MouseUp	Tlačítko, dokument, odkaz	Tlačítko myši uvolněno
Hýbat se	Rám	Přesouvání prvku
Resetovat	Formulář	Obnovit formulář
Změnit velikost	Rám, Okno	Změna velikosti
Vybrat	Text, Textarea	Výběr textu
Předložit	Formulář	Přenos dat
Vyložit	Okno	Uvolnění aktuální stránky

Nyní pojďme zjistit, jak používat události v JavaScriptu. Existují tzv. event handlery. Obslužné rutiny událostí určují, co se stane, když dojde k určité události. Obslužné rutiny událostí v JavaScriptu mají následující obecný tvar:

Název události

To znamená, že nejprve přijde předpona „on“ a poté název události, například následující obslužné rutiny události: onFocus, onClick, onSubmit a tak dále. Myslím, že zde nejsou žádné otázky. A nyní hlavní otázka: “Jak používat události v JavaScriptu?”. Rozsah jejich uplatnění je obrovský a nyní se podíváme na jeden problém. Na stránce jsou tři odkazy. Každý z odkazů je zodpovědný za jinou barvu pozadí (například bílou, žlutou a zelenou). Pozadí je zpočátku bílé. Když najedete myší na konkrétní odkaz, změní se barva pozadí. Když oddálíte myš, barva pozadí se vrátí na výchozí barvu. Když kliknete na odkaz, barva pozadí se zachová jako výchozí.

a (
barva:modrá;
text-dekorace: podtržení;
kurzor: ukazatel;
}


var default_color = "bílá";

funkce setTempColor(barva) (
document.bgColor = barva;
}

function setDefaultColor(color) (
default_color = barva;
}

funkce defaultColor() (
document.bgColor = výchozí_barva;
}



Bílý
Žlutá
Zelená

Podívejme se na tento skript, respektive celou HTML stránku s podporou JavaScriptu a CSS (jinými slovy jde o příklad DHTML). Nejprve přicházejí na řadu obvyklé HTML značky, kterými začíná jakákoli HTML stránka. Dále si vytvoříme styl, ve kterém požadujeme, aby všechny odkazy na dané stránce byly modré, podtržené a ukazatel myši na nich byl ve tvaru „Ukazatele“. Můžete říci: "Proč potřebujete nastavit styl? Koneckonců, odkazy budou úplně stejné." To je pravda, odkazy, ale odkazy jako takové nemáme (ostatně v tagu není žádný atribut href), takže budou ve výchozím nastavení jednoduchý černý text (můžete však na text také kliknout). Proto je styl nutností. Můžete jej odstranit a uvidíte, co se stane. Ještě lépe přidejte atribut href (s libovolnou hodnotou, dokonce i prázdnou) a vysvětlete, proč skript přestal fungovat. Poté začne JavaScript. Vytvoříme proměnnou default_color zodpovědnou za výchozí barvu. Dále následují tři funkce:

Funkce setTempColor() je zodpovědná za dočasnou změnu barvy.

Funkce setDefaultColor() je zodpovědná za změnu výchozí barvy.

Funkce defaultColor() nastaví výchozí barvu pozadí.

Dále jsou zde odkazy s atributy ve formě obslužných rutin událostí. Když najedete myší na odkaz, dojde k události MouseOver; podle toho obslužná rutina události onMouseOver zavolá funkci setTempColor() a předá odpovídající parametr. Když odeberete myš z prvku, vyvolá se událost MouseOut a poté se zavolá funkce defaultColor(), která nastaví barvu pozadí na výchozí barvu. A nakonec, když myš klikne na odkaz (onClick handler), zavolá se funkce setDefaultColor(), která nastaví barvu zadanou v parametru na výchozí barvu pozadí. Jak vidíte, vše je docela jednoduché.

To byl princip využití událostí v JavaScriptu a pak už vše záleží jen na vaší fantazii!

Některé programy používají JavaScript událost pracovat přímo s uživatelským vstupem. Okamžik výskytu a pořadí takových interakcí nelze předem předvídat.

Obsluha událostí

Na stisk klávesy můžete reagovat neustálým čtením jejího stavu, abyste zachytili okamžik stisknutí klávesy, než ji znovu uvolníte.

Takto byl zpracován vstup dat na primitivních strojích. Pokročilejší je detekce stisknutí klávesy a její zařazení do fronty. Program pak může periodicky kontrolovat frontu nových událostí a reagovat na to, co tam najde. V tomto případě musí program pamatovat na skenování fronty a to často.

V době od stisku klávesy do chvíle, kdy program tuto událost detekuje, ve skutečnosti na požadavky nereaguje. Tento přístup se nazývá polling (průzkum).

Většina programátorů se tomu snaží pokud možno vyhnout.

Nejlepším způsobem je implementovat systém, který dává kódu schopnost reagovat na události, když k nim dojde. Prohlížeče to implementují tím, že poskytují možnost zaregistrovat funkce obsluhy pro konkrétní události JavaScriptu:

Kliknutím na tento dokument aktivujete handler.

addEventListener("click", function() ( console.log("Klikli jste!"); ));

Funkce addEventListener je registrována, takže její druhý argument je volán vždy, když nastane událost popsaná prvním argumentem.

Události a uzly DOM

Každá obslužná rutina události prohlížeče je registrována s kontextem. Když je volána funkce addEventListener, je volána jako metoda pro celé okno, protože v prohlížeči je globální rozsah ekvivalentní okenní objekt. Každý prvek DOM má svou vlastní metodu addEventListener, která vám umožňuje naslouchat událostem konkrétně v tomto prvku:

Klikněte na mě

Není zde žádný psovod.

var button = document.querySelector("tlačítko"); button.addEventListener("click", function() ( console.log("Tlačítko kliklo."); ));

V v tomto příkladu handler je připojen k uzlu tlačítka. Události myši JavaScript spustí obslužnou rutinu, ale kliknutí ve zbytku dokumentu nikoli.

Nastavením atributu onclick uzlu získáme stejný výsledek. Ale uzel má pouze jeden atribut onclick, takže můžete zaregistrovat pouze jeden handler na uzel. Metoda addEventListener umožňuje přidat libovolný počet obslužných rutin. Jsme tak pojištěni proti náhodné výměně již registrovaného procesoru.

Metoda removeEventListener se volá s argumenty podobnými metodě addEventListener . Odebere manipulátor:

Jednorázové tlačítko var button = document.querySelector("tlačítko"); function once() ( console.log("Hotovo."); button.removeEventListener("kliknout", jednou); ) button.addEventListener("kliknout", jednou);

Chcete-li funkci handleru zrušit, pojmenujeme ji (například jednou ). Takže to předáme jak addEventListener, tak removeEventListener.

Objekty událostí

Ačkoli jsme to ve výše uvedených příkladech nezmínili, funkci obslužných rutin JavaScriptu je předán argument: objekt události. Poskytuje další informace o události. Pokud například chceme vědět, která klávesa myši byla stisknuta, musíme získat hodnotu vlastnosti objektu které události:

Klikněte na mě libovolnou klávesou myši var button = document.querySelector("button"); button.addEventListener("mousedown", function(event) ( if (event.which == 1) console.log("Levé tlačítko"); else if (event.which == 2) console.log("Střední tlačítko" ); else if (event.which == 3) console.log("Pravé tlačítko"); ));

Informace uložené v objektu se liší v závislosti na typu události. Vlastnost type objektu vždy obsahuje řetězec identifikující událost (například „click“ nebo „mousedown“).

Šíření

Obslužné rutiny událostí (jako jsou události dotyku JavaScriptu) registrované pro nadřazené uzly také obdrží události, které se vyskytují u podřízených prvků. Pokud bylo klepnuto na tlačítko uvnitř odstavce, obdrží také obslužné rutiny události odstavce klikněte na událost.

Událost se šíří z uzlu, ve kterém k ní došlo, do nadřazeného uzlu a do kořenového adresáře dokumentu. Poté, co všechny obslužné rutiny registrované v určitém uzlu postupně provedou akci, mohou na událost reagovat obslužné rutiny registrované pro celé okno.

Obsluha události může kdykoli zavolat metodu stopPropagation na objektu události, aby zabránila dalšímu šíření události. To může být užitečné, když máte tlačítko uvnitř jiného interaktivního prvku a nechcete, aby kliknutí na tlačítko spustilo chování definované pro kliknutí na externí prvky.

V následujícím příkladu zaregistrujeme obslužné rutiny "MouseDown" pro tlačítko i odstavec. Když klepnete pravým tlačítkem myši (události myši JavaScript), obslužná rutina zavolá metodu stopPropagation, která zabrání spuštění obslužné rutiny odstavce. Když kliknete na tlačítko jinou klávesou myši, spustí se oba ovladače:

Odstavec a v něm tlačítko.

var para = document.querySelector("p"); var button = document.querySelector("tlačítko"); para.addEventListener("myší", function() ( console.log("Handler pro odstavec."); )); button.addEventListener("myš", function(event) ( console.log("Handler for button."); if (event.which == 3) event.stopPropagation(); ));

Většina objektů událostí má vlastnost target, která ukazuje na uzel, kde k nim došlo. Tuto vlastnost můžete použít, abyste se vyhnuli náhodnému zpracování nějaké události, která se šíří nahoru z uzlu.

Můžete také použít cíl události JavaScript k rozšíření rozsahu události určitého typu. Máte-li například uzel obsahující dlouhý seznam tlačítek, je pohodlnější zaregistrovat jeden obslužný program kliknutí pro vnější uzel a pomocí vlastnosti target sledovat, zda bylo tlačítko klepnuto, než registrovat instance obslužného programu pro všechna tlačítka:

A B C document.body.addEventListener("click", function(event) ( if (event.target.nodeName == "BUTTON") console.log("Clicked", event.target.textContent); ));

Výchozí akce

K mnoha událostem jsou přiřazeny výchozí akce. Pokud kliknete na odkaz, dostanete se na cílový prvek odkazu. Pokud kliknete na šipku dolů, prohlížeč se posune na stránce dolů. Pokud kliknete pravým tlačítkem myši, otevře se kontextová nabídka.

U většiny typů událostí jsou obslužné rutiny událostí JavaScript volány před provedením výchozích akcí. Pokud nechcete, aby došlo k výchozímu chování, musíte na objektu události zavolat metodu preventDefault.

Použijte jej k implementaci vlastních klávesových zkratek nebo kontextových nabídek. Nebo přepíše chování, které uživatelé očekávají. Níže je odkaz, který nelze sledovat:

MDN var link = document.querySelector("a"); link.addEventListener("click", function(event) ( console.log("Ne."); event.preventDefault(); ));

Snažte se to nedělat, pokud k tomu nemáte dobrý důvod.

V závislosti na prohlížeči nemusí být některé události zachyceny. V Google Chrome například klávesovou zkratku (kód události JavaScript) pro zavření aktuální karty (Ctrl-W nebo Command-W) nelze zpracovat pomocí JavaScriptu.

Klíčové události

Když uživatel stiskne klávesu na klávesnici, prohlížeč spustí událost „keydown“. Když uvolní klíč, spustí se událost „keyup“:

Tato stránka se změní na fialovou, když stisknete klávesu V.

addEventListener("keydown", function(event) ( if (event.keyCode == 86) document.body.style.background = "violet"; )); addEventListener("keyup", function(event) ( if (event.keyCode == 86) document.body.style.background = ""; ));

Tato událost se také spustí, když uživatel stiskne a podrží klávesu nebo když je klávesa stisknuta. Pokud například chcete zvýšit rychlost postavy ve hře stisknutím klávesy se šipkou a znovu ji snížit uvolněním klávesy, musíte být opatrní, abyste rychlost nezvýšili při každém stisknutí klávesy.

Předchozí příklad používal vlastnost keycode JavaScript objektu události. S jeho pomocí se zjistí, která klávesa byla stisknuta nebo uvolněna. Není vždy zřejmé, jak převést číselný kód klíče na skutečný klíč.

Znakový kód Unicode se používá ke čtení hodnot písmen a čísel. Je spojeno s písmenem (velkým písmenem) nebo číslem uvedeným na klíči. Metoda charCodeAt pro řetězce vám umožňuje získat tuto hodnotu:

console.log("Violet".charCodeAt(0)); // → 86 console.log("1".charCodeAt(0)); // → 49

S ostatními klíči jsou spojeny méně předvídatelné kódy klíčů. Nejlepší způsob Určení kódu, který potřebujete, je věcí experimentování. Zaregistrujte obsluhu události stisknutí klávesy, která zachytí přijaté kódy kláves a stiskne požadovanou klávesu.

Klávesy jako Shift , Ctrl , Alt generují události jako běžné klávesy. Ale při sledování kombinací kláves můžete také určit, zda jsou tyto klávesy stisknuty vlastnostmi událostí klávesnice a událostí myši JavaScript: shiftKey , ctrlKey , altKey a metaKey :

Chcete-li pokračovat, stiskněte Ctrl-Mezerník.

addEventListener("keydown", function(event) ( if (event.keyCode == 32 && event.ctrlKey) console.log("Pokračuje!"); ));

Události „keydown“ a „keyup“ poskytují informace o skutečných stizích kláves. Co když ale potřebujeme samotný vstupní text? Načítání textu z kódů kláves je nepohodlné. K tomu existuje událost „keypress“, která se spustí ihned po „keydown“. Opakuje se spolu s „klávesou dolů“, dokud je klávesa stisknuta. Ale pouze pro klávesy, kterými se zadávají znaky.

Vlastnost charCode na objektu události obsahuje kód, který lze interpretovat jako kód znaku Unicode. K převedení tohoto kódu na jeden znakový řetězec můžeme použít funkci String.fromCharCode.

Nastavte vstupní fokus na tuto stránku a něco napište.

addEventListener("stisk klávesy", funkce(událost) ( console.log(String.fromCharCode(event.charCode)); ));

Uzel DOM, ve kterém událost nastane, závisí na prvku, který měl při stisknutí klávesy vstupní fokus. Běžné uzly nemohou mít vstupní fokus (pokud jim nenastavíte atribut tabindex), ale prvky jako odkazy, tlačítka a pole formuláře ano.

Pokud žádný konkrétní prvek nemá vstupní fokus, pak je cílovým uzlem pro klíčové události a události dotyku JavaScriptu document.body .

kliknutí myší

Stisknutí tlačítka myši také spustí řadu událostí. Události "mousedown" a "mouseup" jsou podobné událostem "keydown" a "keyup". Spouštějí se při stisknutí a uvolnění tlačítka myši. K těmto událostem dochází v uzlech DOM, nad nimiž bylo přemístěno, když k události došlo.

U sdíleného uzlu, který má stisknutí i uvolnění myši, se událost kliknutí spustí po události mouseup. Pokud například stisknete tlačítko myši na jedné položce a poté přesunete kurzor na jinou položku a tlačítko uvolníte, dojde k události kliknutí na prvku, který obsahuje obě tyto položky.

Pokud dojde ke dvěma kliknutím blízko sebe, spustí se také událost „dblclick“ (dvojité kliknutí). Objeví se po druhém kliknutí. Chcete-li získat přesné informace o místě, kde došlo k události myši, musíte získat hodnotu vlastností pageX a pageY, které obsahují souřadnice události (v pixelech) vzhledem k levému hornímu rohu dokumentu.

Níže je implementace primitivního kreslícího programu. Při každém kliknutí myší v dokumentu (pod kurzorem) se přidá tečka:

body ( výška: 200px; pozadí: béžová; ) .dot (výška: 8px; šířka: 8px; border-radius: 4px; /* zaoblené rohy */ pozadí: modrá; pozice: absolutní; ) addEventListener("click", funkce (událost) ( var tečka = document.createElement("div"); dot.className = "tečka"; dot.style.left = (událost.stránkaX - 4) + "px"; tečka.style.top = (událost .pageY - 4) + "px"; document.body.appendChild(tečka); ));

Vlastnosti clientX a clientY jsou podobné stránkám X a pageY, ale vztahují se k viditelné části dokumentu. Lze je použít k porovnání souřadnic myši se souřadnicemi vrácenými funkcí getBoundingClientRect.

Pohyb myši

Při každém pohybu myši se spustí událost „mousemove“ ze sady událostí myši v JavaScriptu. Lze jej použít ke sledování polohy myši. To se používá při implementaci možnosti přetahování prvků pomocí myši.

V následujícím příkladu program zobrazí panel a nastaví obslužné rutiny událostí tak, že při přetažení se panel zúží nebo rozšíří:

Přetažením okraje panelu změňte jeho šířku:

var lastX; // Sleduje poslední X pozici myši var rect = document.querySelector("div"); rect.addEventListener("mousedown", function(event) ( if (event.which == 1) ( lastX = event.pageX; addEventListener("mousemove", posunuto); event.preventDefault(); // Zabrání výběru ) ) ); function buttonPressed(event) ( if (event.buttons == null) return event.which != 0; else return event.buttons != 0; ) function moves(event) ( if (!buttonPressed(event)) ( removeEventListener( "mousemove", přesunuto); ) else ( var dist = event.pageX - lastX; var newWidth = Math.max(10, rect.offsetWidth + dist); rect.style.width = newWidth + "px"; lastX = událost .stranaX; ))

Všimněte si, že obslužná rutina "mousemove" je registrována pro celé okno. I když se myš při změně velikosti přesune z panelu, stále aktualizujeme šířku panelu a ukončujeme události dotyku JavaScriptu, když je tlačítko myši uvolněno.

Když uživatel uvolní tlačítko myši, musíme přestat měnit velikost panelu. Bohužel ne všechny prohlížeče nastavují vlastnost which pro události mousemove. Existuje vlastnost standardních tlačítek, která poskytuje podobné informace, ale také není podporována ve všech prohlížečích. Naštěstí všechny hlavní prohlížeče podporují jednu věc: buď tlačítka nebo které . Funkce buttonPressed ve výše uvedeném příkladu se nejprve pokusí použít vlastnost buttons, a pokud není dostupná, přejde na kterou .

Když se kurzor myši přesune nad uzel nebo jej opustí, spustí se události "mouseover" nebo "mouseout". Lze je použít k vytvoření efektů přechodu, zobrazení nějakého druhu titulku nebo ke změně stylu prvku.

K vytvoření takového efektu nestačí jednoduše jej začít zobrazovat při události mouseover a skončit po události mouseout. Když se myš přesune z uzlu do jednoho z jeho potomků, dojde u nadřazeného uzlu k události "mouseout". I když ukazatel myši neopustil rozsah šíření uzlu.

Aby toho nebylo málo, tyto události JavaScriptu se šíří stejně jako jiné události. Když myš opustí jeden z podřízených uzlů, pro který je registrován handler, bude vyvolána událost "mouseout".

Chcete-li tento problém vyřešit, můžete použít vlastnost objektu události relatedTarget. Když dojde k události "mouseover", indikuje to, na který prvek byl předtím umístěn ukazatel myši. A v případě „vysunutí myši“ - na který prvek se přesune ukazatel. Efekt přejetí myší změníme pouze tehdy, když je související cíl mimo náš cílový uzel.

V tomto případě měníme chování, protože myš najížděla na uzel zvenčí (nebo naopak):

Najeďte myší na tento odstavec.

var para = document.querySelector("p"); function isInside(node, target) ( for (; node != null; node = node.parentNode) if (node ​​​​== target) return true; ) para.addEventListener("mouseover", function(event) ( if ( !isInside (event.relatedTarget, para)) para.style.color = "red"; )); para.addEventListener("mouseout", function(event) ( if (!isInside(event.relatedTarget, para)) para.style.color = ""; ));

Funkce isInside sleduje nadřazené odkazy daného uzlu nebo dokud není dosaženo nejlepší část dokument (když má uzel hodnotu null ). Nebo nebude nalezen nadřazený prvek, který potřebujeme.

Efekt hover je mnohem jednodušší vytvořit pomocí pseudoselektoru CSS:hover, jak ukazuje následující příklad. Ale když efekt hoveru zahrnuje něco složitějšího než jen změnu stylu cílového uzlu, pak musíte použít trik pomocí událostí mouseover a mouseout (události myši v JavaScriptu):

Posunout Události

Pokaždé, když se prvek posune, spustí se u něj událost posouvání v JavaScriptu. Lze jej použít ke sledování toho, co je in tento moment prohlíženo uživatelem; zakázat animaci umístěnou mimo výřez.

V následujícím příkladu zobrazíme ukazatel průběhu v pravém horním rohu dokumentu a aktualizujeme jej tak, aby se při posouvání stránky po částech vyplnil jinou barvou:

.progress ( orámování: 1px plná modrá; šířka: 100px; pozice: pevná; nahoře: 10px; pravá: 10px; ) .progress > div (výška: 12px; pozadí: modrá; šířka: 0%; ) tělo (výška: 2000px ;)

Posuň mě...

var bar = document.querySelector(".progress div"); addEventListener("scroll", function() ( var max = document.body.scrollHeight - innerHeight; var procent = (pageYOffset / max) * 100; bar.style.width = procenta + "%"; ));

Nastavením pozice prvku nebo pevné vlastnosti získáme stejný výsledek jako nastavením position:absolute . To však také zablokuje posouvání prvku spolu se zbytkem dokumentu. V důsledku toho bude indikátor průběhu staticky fixován v horním rohu. Uvnitř je další prvek, jehož velikost se mění v souladu s aktuálním pokrokem.

Jako měrnou jednotku při nastavování šířky používáme spíše % než px, aby se rozměry prvku měnily úměrně velikosti ukazatele průběhu.

Globální proměnná innerHeight obsahuje výšku okna, kterou musíme odečíst od celkové dostupné rolovatelné výšky dokumentu. Když se dostanete na konec dokumentu, nemůžete posouvat okno dolů. S innerHeight lze také použít innerWidth. Vydělením pageYOffset (aktuální pozice rolovacího pole) maximální povolenou pozicí rolování a vynásobením 100 získáme procento pro ukazatel průběhu.

Volání preventDefault u události posouvání JavaScriptu nezabrání posouvání. Obslužná rutina události je volána až po rolování.

Vstupní události zaměření

Když má prvek vstupní fokus, prohlížeč na něj spustí událost "focus". Když je vstupní fokus odstraněn, spustí se událost "rozostření".

Tyto dvě události se nešíří. Obslužná rutina nadřazeného prvku není upozorněna, když má podřízený prvek vstupní fokus.

Následující příklad zobrazuje nápovědu pro textové pole, který má aktuálně vstupní fokus:

Název:

Stáří:

var help = document.querySelector("#help"); var pole = document.querySelectorAll("vstup"); for (var i = 0; i< fields.length; i++) { fields[i].addEventListener("focus", function(event) { var text = event.target.getAttribute("data-help"); help.textContent = text; }); fields[i].addEventListener("blur", function(event) { help.textContent = ""; }); }

Objekt okna přijímá události „focus“ a „blur“, když uživatel přejde na kartu, okno prohlížeče, ve kterém je dokument zobrazen, nebo je opustí.

Načíst událost

Po dokončení načítání stránky se pro tělo dokumentu a objekty okna vyvolá událost JavaScriptu „load“. Slouží k naplánování inicializace akcí, které vyžadují načtení celého dokumentu. Nezapomeňte, že obsah se spustí okamžitě, když narazí na tento tag. Někdy je příliš brzy. Například když skript potřebuje něco udělat s částmi dokumentu, které se načítají po .

a značky skriptů, které načítají externí soubory, také obsahují událost "load". Označuje, že soubor, který k nim byl přidružen, byl stažen. Stejně jako události vstupního fokusu se události zatížení nešíří.

Když zavřeme stránku nebo se přesuneme na jinou (například kliknutím na odkaz), spustí se událost „beforeunload“. Slouží k tomu, aby uživatel po zavření dokumentu náhodou neztratil to, na čem pracoval.

Zabránění uvolnění stránky se neprovádí pomocí metody preventDefault. Místo toho je z obslužné rutiny vrácen řetězec. Používá se v dialogovém okně, které se uživatele zeptá, zda chce na stránce zůstat nebo ji opustit. Tento mechanismus zajišťuje, že uživatel bude mít možnost opustit stránku, i když běží škodlivý skript, jehož účelem je udržet návštěvníka na stránce.

Sekvence provádění skriptu

Spuštění skriptu mohou vyvolat různé faktory: čtení značky, výskyt události. Metoda requestAnimationFrame určuje volání funkce před přestavěním další stránky. Toto je další způsob, jak lze spouštět skripty.

JavaScript select události a všechny ostatní se mohou spustit kdykoli, ale dva skripty se nikdy nespustí současně ve stejném dokumentu. Pokud je skript již spuštěn, obslužné rutiny událostí a úryvky kódu naplánované jiným skriptem budou muset počkat, až na ně přijde řada. To je důvod, proč dokument zamrzne, když skript běží dlouhou dobu. Prohlížeč nereaguje na kliknutí a další události, protože nemůže spustit obslužné rutiny událostí, dokud nedokončí běh aktuálního skriptu.

Některá programovací prostředí umožňují vytvořit více podprocesů provádění, které běží současně. Poskytnutím možnosti provádět více úloh současně můžete zvýšit rychlost provádění programu. Ale když máme více akcí, které ovlivňují stejné části systému současně, je pro program obtížnější je provést.

Pokud potřebujete spouštět procesy v Pozadí Bez zmrazení stránky nám prohlížeče poskytují to, čemu se říká weboví pracovníci. Je to sandbox JavaScript, který běží na dokumentu vedle hlavního programu a může s ním komunikovat pouze odesíláním a přijímáním zpráv.

Řekněme, že v souboru s názvem code/squareworker.js máme následující kód:

addEventListener("zpráva", funkce(událost) ( postMessage(event.data * event.data); ));

Představte si, že číslo, které umocňujete, je velmi velké, zdlouhavé na výpočet a musíte provést výpočet na vláknu na pozadí. Tento kód spustí pracovníky webu, odešle mu nějaké zprávy a vytiskne odpovědi:

var squareWorker = new Worker("code/squareworker.js"); squareWorker.addEventListener("zpráva", funkce(událost) ( console.log("Pracovník odpověděl:", event.data); )); squareWorker.postMessage(10); squareWorker.postMessage(24);

Funkce postMessage odešle zprávu, která spustí událost zprávy u příjemce. Skript, který vytvořil webové pracovníky, odesílá a přijímá zprávy prostřednictvím objektu Worker. Pomocí tohoto objektu prostředí interaguje se skriptem, který jej vytvořil, odesílá informace a poslouchá je v globálním měřítku s původním skriptem.

Nastavení časovačů

Funkce setTimeout je podobná funkci requestAnimationFrame. Volá další funkci, která bude volána později. Ale místo volání funkce při příštím vykreslení stránky čeká určitý počet milisekund. V tomto Příklad JavaScriptu v případě, že se pozadí stránky po dvou sekundách změní z modré na žlutou:

document.body.style.background = "modrá"; setTimeout(function() ( document.body.style.background = "yellow"; ), 2000);

Někdy potřebujeme zrušit funkci, kterou jsme si naplánovali. To se provádí uložením návratové hodnoty setTimeout a voláním clearTimeout:

var bombTimer = setTimeout(function() ( console.log("BOOM!"); ), 500); if (Math.random()< 0.5) { // 50% chance console.log("Defused."); clearTimeout(bombTimer); }

Funkce cancelAnimationFrame funguje stejně jako clearTimeout . Je volána hodnotou vrácenou requestAnimationFrame ke zrušení rámce (pokud již nebyl volán).

Podobná sada funkcí setInterval a clearInterval se používá k nastavení časovače, který by měl akci opakovat každých X milisekund:

var klíšťata = 0; var clock = setInterval(function() ( console.log("tick", ticks++); if (ticky == 10) ( clearInterval(clock); console.log("stop."); ) ), 200);

Rozdělení

Některé typy událostí lze spustit mnohokrát během krátké doby (například událost „mousemove“ a javascript scroll). Při zpracovávání takových událostí musíte dávat pozor, aby to netrvalo příliš dlouho, jinak bude handleru trvat tak dlouho, než provede akci, že interakce s dokumentem bude pomalá a trhaná.

Pokud potřebujete v takovém handleru udělat něco nestandardního, můžete použít setTimeout, abyste se ujistili, že to nebude trvat příliš dlouho. To se běžně nazývá dělení událostí. Existuje několik různých přístupů k drcení.

V prvním příkladu chceme něco udělat, zatímco uživatel píše. Ale nechceme to dělat po každém stisknutí klávesy. Když uživatel píše rychle, musíte počkat, dokud nenastane pauza. Místo okamžitého provedení akce v obsluze události nastavíme zpoždění. Vymažeme také předchozí zpoždění (pokud existuje). Pokud se události vyskytují v krátkých intervalech (méně než zpoždění, které jsme nastavili), zpoždění od předchozí události se zruší:

Sem napište něco... var textarea = document.querySelector("textarea"); var timeout; textarea.addEventListener("keydown", function() ( clearTimeout(timeout); timeout = setTimeout(function() ( console.log("Přestali jste psát."); ), 500); ));

Předání nedefinované hodnoty pro clearTimeout nebo její volání na zpoždění, které již běží, nebude mít žádný účinek. Už si nemusíme dávat pozor na to, kdy to svolat, prostě to děláme u každé akce.

Pokud potřebujete oddělit odpovědi na krátkou dobu, můžete použít jiný skript. Zároveň by ale měly být spuštěny během řady akcí, a nejen po ní. Můžete například odeslat aktuální souřadnice myši v reakci na události pohybu myší (události myši v jazyce JavaScript), ale pouze každých 250 milisekund:

function displayCoords(event) ( document.body.textContent = "myš je na " + event.pageX + ", " + event.pageY; ) var naplánované = false, lastEvent; addEventListener("mousemove", function(event) ( lastEvent = událost; if (!plánováno) (plánováno = true; setTimeout(function() (naplánováno = false; displayCoords(lastEvent); ), 250); ) ));

Závěr

Obslužné programy událostí nám umožňují detekovat a reagovat na události, nad kterými nemáme přímou kontrolu. K registraci takového handleru použijte metodu addEventListener.

Každá událost má specifický typ („keydown“, „focus“ atd.), který ji identifikuje. Většina událostí je vyvolána na konkrétním prvku DOM a poté šířena do nadřazených uzlů prvku. To umožňuje manipulátorům spojeným s těmito prvky je zpracovávat.

Když je zavolán handler, je mu předán objekt události s dodatečné informace o akci. Tento objekt také obsahuje metody, jak zastavit další šíření události (stopPropagation) nebo zabránit výchozímu prohlížeči ve zpracování události (preventDefault).

Stisky kláves generují události „stisknutí klávesy“, „stisknutí klávesy“ a „přitažení klávesy“. Kliknutí myší generuje události "mousedown", "mouseup" a "click". Pohyb myši - "mousemove", "mouseenter" a "mouseout".

Událost posouvání JavaScriptu lze definovat pomocí události „scroll“ a změnu zaměření lze definovat pomocí „focus“ a „blur“. Po dokončení načítání dokumentu se pro okno vyvolá událost „načíst“.

Najednou může běžet pouze jedna část programu JavaScript. Obslužné rutiny událostí a další naplánované skripty musí čekat na dokončení provádění ostatních skriptů ve frontě.

Tato publikace je překladem článku „Handling Events“, který připravil přátelský projektový tým

Události JavaScriptu

JavaScript, stejně jako ostatní objektově orientované jazyky, definuje řadu událostí spojených s prvky dokumentu. Handlery umožňují organizovat reakci na výskyt událostí ze skriptu. V tomto případě je odpovídající handler specifikován jako atribut elementu HTML dokumentu; hodnota tohoto atributu je JavaScriptový výraz. Například,

- najetí kurzorem myši na prvek je doprovázeno změnou barvy pozadí.

- když se uživatel pokusí zavřít okno a vyjmout dokument, zobrazí se zpráva

- když kliknete na obrázek, provede se určitá funkce showPict().

Polovina obslužných programů je podporována téměř všemi HTML prvky (). Některé události lze simulovat pomocí vhodných metod. Níže je uveden seznam akcí podle HTML specifikace 4.0 a některé události podporované MS IE. Interpretace prohlížečů se může lišit od standardu z hlediska použitelnosti handleru na určité prvky

Obsluha události	Podpora prvků HTML	Popis	Metoda imitace
onAbort	IMG	Přerušení načítání obrázku
onBlur		Aktuální prvek ztrácí fokus, tzn. přejít na jiný prvek. Vyskytuje se, když klepnete myší mimo prvek nebo stisknete klávesu tabulátoru.	rozmazat()
při změně	INPUT, SELECT, TEXTAREA	Změna hodnot prvků formuláře. Vyskytuje se poté, co prvek ztratí fokus, tzn. po události rozmazání	změna()
při kliknutí		Jediné kliknutí (stisknuto a uvolněno tlačítko myši)	klikni()
onDblClick	Téměř všechny prvky HTML	Dvojklik
onError	IMG, OKNO	Dojde k chybě při provádění skriptu
onFocus	A, OBLAST, TLAČÍTKO, VSTUP, ŠTÍTEK, SELECT, TEXTAREA	Zaměření prvku (kliknutí na prvek nebo opětovné stisknutí klávesy Tab)	soustředit se()
onKeyDown	Téměř všechny prvky HTML	Na klávesnici je stisknuta klávesa
onKeyPress	Téměř všechny prvky HTML	Klávesa na klávesnici je stisknuta a uvolněna
onKeyUp	Téměř všechny prvky HTML	Klávesa klávesnice uvolněna
onLoad	TĚLESO, SADA RÁMU
onMouseDown	Téměř všechny prvky HTML	Tlačítko myši stisknuté v rámci aktuálního prvku
onMouseMove	Téměř všechny prvky HTML	Přesuňte kurzor myši v rámci aktuálního prvku
onMouseOut	Téměř všechny prvky HTML	Kurzor myši je mimo aktuální prvek
onMouseOver	Téměř všechny prvky HTML	Kurzor myši je nad aktuálním prvkem
onMouseUp	Téměř všechny prvky HTML	Tlačítko myši uvolněné v rámci aktuálního prvku
onMove	OKNO	Přesouvání okna
onReset	FORMULÁŘ	Obnovte data formuláře (klikněte na tlačítko )	reset()
onResize	OKNO	Změna velikosti okna
onSelect	VSTUP, TEXTAREA	Vyberte text v aktuálním prvku
na Odeslat	FORMULÁŘ	Odeslání údajů z formuláře (kliknutím na tlačítko )	Předložit()
onVyložit	TĚLESO, SADA RÁMU	Pokus o zavření okna prohlížeče a uvolnění dokumentu