Dokumentujte události javascriptu. JavaScript - Typy událostí. Připojte události ke správným prvkům

Téma akcí je velmi důležité a velmi zajímavé. Díky ní můžete dělat spoustu zajímavých věcí, které uživatele potěší. JavaScript událost 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 nějakém textovém poli, změna velikosti okna prohlížeče a podobně.

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

událost	Objekt	Příčina výskytu
Přerušit	obraz	Přerušení načítání obrázku
Rozmazat		Ztráta zaměření prvku
Změna	FileUpload, Select, Text, Textarea	Změna hodnoty
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š je mimo hranice prvku
Přejet myší	Oblast, Vrstva, Odkaz	Myš je nad prvkem
MouseUp	Tlačítko, dokument, odkaz	Tlačítko myši uvolněno
Přestěhovat se	Rám	Přesouvání položky
Resetovat	Formulář	Resetování formuláře
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

Teď pojďme zjistit jak používat události v JavaScriptu... Existují tzv manipulátory událostí. Obslužné programy událostí stačí určit, co se stane, když dojde k určité události. Obslužné rutiny událostí JavaScriptu má následující obecný tvar:

OnNameEvents

To znamená, že nejprve přichází předpona " na“, tak co bude dál název události, například takový manipulátory událostí: onFocus, při kliknutí, na Odeslat atd. Myslím, že zde nebyly žádné otázky. A teď hlavní otázka: " Jak mohu používat události v JavaScriptu?". Oblast jejich použití je obrovská a nyní s vámi zvážíme jeden problém. Na stránce jsou tři odkazy. Každý z odkazů je zodpovědný za jinou barvu pozadí (například bílá, žlutá a zelená ). Zpočátku je pozadí bílé. Když najedete myší na určitý odkaz, změní se barva pozadí. Po najetí myší se barva pozadí vrátí na výchozí. Po kliknutí myší na odkaz se barva pozadí zachová jako výchozí.

Bílý
Žlutá
Zelená

Pojďme se zabývat tímto scénářem, respektive celým HTML stránku s podporou JavaScript a CSS(jinými slovy, toto je příklad DHTML). Na prvním místě jsou ty obvyklé HTML tagy, kterým každý začíná HTML stránku... Dále vytvoříme styl, ve kterém požadujeme, aby všechny odkazy na této stránce byly modré, podtržené a aby na nich byl ukazatel myši ve tvaru „Ukazatel“. Možná si řeknete: "Proč potřebujete nastavit styl? Koneckonců, odkazy budou stejně úplně stejné." To je pravda, odkazy, ale odkazy jako takové nemáme (koneckonců neexistuje žádný atribut href ve značce), takže ve výchozím nastavení budou prostý černý text (i když na text můžete kliknout také). Styl je proto nutností. Můžete jej odstranit a uvidíte, co se stane. Ještě lépe řečeno atribut href(jakákoli hodnota, i prázdná) a vysvětlete, proč skript přestal fungovat. Dále už to začíná JavaScript... Vytvoříme proměnnou výchozí_barva který je zodpovědný za výchozí barvu. Pak existují tři funkce:

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

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

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

Dále jsou ve formuláři odkazy s atributy manipulátory událostí... Když najedete myší na odkaz, Událost MouseOver, resp. obsluha události onMouseOver volá funkci setTempColor () a předá odpovídající parametr. Když odeberete myš z prvku, Událost MouseOut a pak zavolal funkce defaultColor ()., díky čemuž je barva pozadí výchozí. A nakonec, když kliknete na odkaz ( obslužný program onClick) funkce se volá setDefaultColor (), který nastaví barvu zadanou v parametru na výchozí barvu pozadí. Jak vidíte, vše je docela jednoduché.

to bylo princip použití událostí v JavaScriptu, a pak už vše záleží jen na vaší fantazii!

Schopnost JavaScriptu vytvářet dynamické html stránky je založena na třech pilířích. Dvěma z nich jsme se již věnovali 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ění kódu JavaScript na událostech.

událost- reakce počítače na akci uživatele. Například s T. Za událost javaScript se považuje stisknutí tlačítka na klávesnici, pohyb myši a kliknutí a zavření okna prohlížeče. Všechny akce s t. javaScript je generován objekty dokumentu a prohlížeče (bez pojmu „uživatel“). Když například kliknete na odstavec, událost kliknutí myší je generována objektem – odstavcem.

Abyste mohli spouštět nějaký javascriptový 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ředplatné akce.

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, pak se tato funkce automaticky spustí.

• onclick - kliknutí tlačítkem myši.
• ondblclick - dvojité kliknutí tlačítkem myši.
• onmousedown - tlačítko myši je stisknuto (dolů).
• onmousemove - myš se pohybuje nad objektem (dochází k mnoha událostem, pohyb myši o 1px = 1 událost).
• onmouseout - myš opustí objekt.
• onmouseover - myš se pohybuje nad požadovaným objektem.
• onmouseup - tlačítko myši se uvolní (zvedne).
• onkeydown - stisknuté tlačítko klávesnice (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 tento prvek obdrží vstupní fokus.
• onchange - generuje ovládací prvek po ztrátě fokusu, pokud se text změnil (například v textovém poli). Výjimkou je položka seznamu ‚vybrat‘, ve které je tato událost generována okamžitě, 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 (tj. když tento dokument zavřeme nebo přepneme na jiný dokument).
• onreset - formulář byl resetován.
• onsubmit - datový formulář byl odeslán.

Předplatné akcí

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

funkce myFunc () ( // vytvořil jednoduchou funkci upozornění ("ahoj"); ) function pageInit () (var p = document. getElementById ("1"); p. onclick = myFunc;) // zavolal funkci pro spuštění události okno. onload = pageInit; // událost se spustí při načtení stránky < p id= 1 >odstavec 1 // nastavení id odstavce

• Předplatné prostřednictvím html kódu. Nevýhodou této metody je, že zahlcuje html kód svým kódem JavaScript; kromě toho existuje několik omezení a ve složitých případech je použití nepohodlné.

< script type= "text/javascript" >funkce myFunc () ( // vytvořil jednoduchou funkci upozornění ("ahoj"); ) < p onclick= "myFunc()" >odstavec 2 // zavolal funkci

Model zpracování událostí

Když dojde k události pro prvek, pak by podobné události měly nastat také pro všechny jeho nadřazené prvky 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 tedy spustí na těle.

Pak vyvstává 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 pro prvek, na který bylo kliknuto, poté pro jeho nadřazený prvek a tak dále až úplně nahoru – k ‚tělu‘.

Prvek -> prvek 2 -> dokument -> okno

Parametry události (objekt události)

Existuje takový objekt událost 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 události.
• clientX, clientY jsou stejné.
• offsetX, offsetY - totéž, ale toto je odsazení myši vzhledem k rodičovskému prvku.
• 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ý vyvolal událost.
• fromElement - prvek, ze kterého se myš přesunula.
• toElement - označení objektu, přes který myš přejela.
• cancelBubble – nestandardní způsob, pokud mu dáte hodnotu true, pak bude ‚vyskakovací bublina‘ zrušena; nebo můžete změnit kód tlačítka, které uživatel stiskl.

Od autora: Poté, co je webová stránka plně načtena a připravena, spustí se v JavaScriptu celá kaskáda událostí, které se ještě zvětší, když uživatel začne se stránkou tak či onak interagovat. Události zahrnují načtení stránky, posouvání dolů, kliknutí na tlačítko nebo dokonce vyplnění formuláře. Ke spouštění událostí v JavaScriptu potřebujete speciální kód, který si sami navrhnete a napíšete, čímž vytvoříte hlubší interakci.

Události v JS lze rozdělit do 4 velkých skupin:

Události uživatelského rozhraní: spustí se, když uživatel interaguje s uživatelským rozhraním prohlížeče (tlačítka kolem webové stránky, která jsou součástí rozhraní prohlížeče). Tyto události mohou také zahrnovat akce, které stránka provádí nezávisle na uživateli. Tyto události zahrnují změnu velikosti okna, posouvání stránky a načítání a vyjímání obsahu.

Události klávesnice, myši a dotykové obrazovky: Spustí se, když uživatel stiskne nebo uvolní tlačítka na klávesnici, ovládá myš, trackpad nebo používá dotykovou obrazovku.

Zaměření a handicapové události. Většinou spojené s formuláři: vstupní pole „přijímá fokus“, když je uživatel připraven s ním pracovat. Jiné události sledují odesílání formulářů, změny hodnot polí formuláře a tak dále.

JavaScript. Rychlý start

Mutační události a pozorovatelé. Mutující prvky jsou sledovány, když se změní struktura DOM: například když jsou prvky na stránce vloženy nebo odstraněny skriptem.

Vazba obslužné rutiny události

Vlastní kód, který se spustí pouze pro konkrétní prvek DOM, vytvoří obslužnou rutinu události. V JS existují tři způsoby, jak vytvořit obsluhu události:

1. Standardní obsluha událostí HTML prostřednictvím atributů

Nejstarší způsob vázání akcí, jeden z dosud nejpoužívanějších. Metoda používá speciální atributy v označení. Například:

< input type = "text" id = "username" onblur = "checkName()" >

Ve výše uvedeném příkladu poté, co pole získá fokus a uživatel přejde k vyplnění dalšího pole (například pomocí TAB nebo normálního kliknutí), prvek zavolá funkci checkName, která je napsána v JS.
Standardní obslužné rutiny událostí HTML se v moderním vývoji nedoporučují, hlavně kvůli skutečnosti, že funkčnost je smíchána s označením, což ztěžuje práci a ladění kódu.

2. Standardní obslužné rutiny událostí v DOM

Tato technika odděluje JS a značkování, ale má stejné omezení – událostem lze přiřadit pouze jednu funkci. HTML ekvivalent obslužné rutiny události v DOM by byl:

var uživatelské jméno = document.getElementbyId ("uživatelské jméno"); username.onblur = checkName;

uživatelské jméno. onblur = checkName;

JavaScript. Rychlý start

Naučte se základy JavaScriptu s praktickým příkladem tvorby webové aplikace

Stejně jako v předchozím příkladu se funkce checkName spustí poté, co prvek formuláře ztratí fokus.

3. Posluchači událostí

Moderní metoda pro přidání obsluhy události, která vám umožní řetězit více událostí a funkcí:

var uživatelské jméno = document.getElementbyId ("uživatelské jméno"); username.addEventListener ("blur", checkName, false);

var uživatelské jméno = dokument. getElementbyId ("uživatelské jméno"); uživatelské jméno. addEventListener ("blur", checkName, false);

Booleovská hodnota na konci označuje, zda se má událost zachytit. Obvykle nastaveno na false. V jednoduchých skriptech je událost často zapsána jako anonymní funkce:

var uživatelské jméno = document.getElementbyId ("uživatelské jméno"); username.addEventListener ("blur", function () (// akce ke spuštění události))

Ne všechny události jsou stejné Je důležité pochopit, že ne všechny události lze řešit stejným způsobem. Události scroll a resize se spouštějí velmi často, a proto je třeba s nimi být velmi opatrní, abyste nezpomalili výkon skriptu. Totéž platí pro zdánlivě neškodné vstupní události. Výkon skriptu může být vážně snížen, pokud se snaží neustále reagovat na často spouštěnou vstupní událost na posuvníku rozsahu. Ne všechny události jsou sledovány Sledovatelé mutace aktuálně nemohou sledovat všechny změny všech prvků na stránce. Neexistuje například způsob, jak sledovat změnu výšky prvku (když se kontejner v responzivním designu zmenší, text uvnitř se přeuspořádá a prvky se prodlouží). Stále existují způsoby, jak sledovat změny, o tom budu mluvit v příštím článku. Připojte události ke správným prvkům Událost onclick se vztahuje na mnoho prvků, včetně odkazů. Existuje obecné pravidlo – nedoporučuje se připojovat JS kód k odkazům. Kliknutím na odkaz by měl uživatel přejít do jiné oblasti webu nebo na kotvu. Pokud potřebujete prvek uživatelského rozhraní, který lze použít ke změně něčeho na stejné stránce, tlačítko se vám bude hodit. JavaScript na tlačítko zavěsíte bez problémů. Pokud to umíte pomocí CSS, nepoužívejte JavaScript Ve srovnání s CSS je JavaScript pomalý a nespolehlivý. V zásadě by se CSS mělo používat jako alternativa ke složitému skriptování, kdykoli je to možné. CSS však nedělá všechno. Dobře funguje s: hover (v mnoha případech nahrazuje události dotyku) a v některých případech může také nahradit události kliknutí s: target. Animace CSS se automaticky spouštějí po načtení stránky a existují speciální stavy CSS, které lze spustit pro prvky, jako jsou přepínače. Něco složitějšího je však obvykle lepší ponechat JavaScriptu.

Při práci se stránkou uživatel provádí různé akce: kliká na tlačítka myši, zadává text na klávesnici. Každá taková akce je událostí prohlížeče. Může být sledován a vykonáván určitými řádky programu, když nastanou. JavaScript pro to má obslužné rutiny událostí. Kromě uživatelských akcí existují další události prohlížeče, jako je úplné načtení stránky.

Každá akce má svůj název. kliknutí je stisk levého tlačítka myši, stisknutá klávesa je stisk klávesy, focus je ohnisko prvku formuláře,

Zpracování událostí

Zavolá se funkce, která se provede při spuštění události obsluha události... Každý typ události má svůj vlastní handler. Název handleru se skládá ze slova on a názvu události. Například obslužná rutina události click se nazývá onclick. Události se nedějí na stránce obecně, ale na konkrétním prvku. Obsluha tedy není samostatnou funkcí. Obslužný program je umístěn na některém prvku stránky.

Existují různé způsoby, jak přiřadit obslužnou rutinu události k prvku. Obslužnou rutinu můžete přiřadit pomocí atributu tag. Kód, který se má provést při spuštění události, je zapsán v hodnotě atributu. Pojďme vytvořit stránku, přidat na ni tlačítko a přiřadit k ní obsluhu události kliknutí:

1 2 3 4 5 6 7

JavaScript:

JavaScript:

17 18 19 20 21 22

var inform = funkce () (upozornění ("Další tlačítko");); var mbutton = document.getElementById ("mbutton"); mbutton.onclick = informovat;

Když je funkce přiřazena k handleru, nejsou za názvem funkce žádné závorky. Pokud dáte závorky, pak to nebude přiřazení funkce, ale výzva k provedení.

Existuje metoda addEventListener (), která prvku také přiřadí obsluhu události. Je považován za modernější. Nyní se příliš často nepoužívá, ale v JavaScriptu jsou nové události, které lze zpracovat pouze touto metodou.

element.addEventListener (událost, funkce)

Možnosti:

událost - událost, kterou je potřeba zpracovat

funkce - funkce, která se stává handlerem

V parametrech této metody je název události zapsán v uvozovkách a slovo před ním nemusíte psát.

HTML kód:

Nové tlačítko

JavaScript:

24 25 26 27 28 29

var newinform = funkce () (upozornění ("Stisknuto nové tlačítko");); var newbutton = document.getElementById ("nové tlačítko"); newbutton.addEventListener ("kliknout", newinform);

Metoda removeEventListener () umožňuje odebrat obslužnou rutinu.

element.removeEventListener (událost, funkce)

Pomocí uvažované metody lze prvku přiřadit více obslužných rutin pro stejnou událost. Poté je třeba odstranit každý z nich samostatně.

Objekt události

Při každém spuštění události se vygeneruje objekt události. Objekt obsahuje informace o události. Různé typy událostí mají různé předměty. Existují ale také vlastnosti, které má každý objekt. Například vlastnost type obsahuje typ události.

Objekt události je předán jako parametr funkci, která je obslužnou rutinou. Pro přístup k objektu je potřeba vytvořit parametr ve funkci. Tento parametr se používá k odkazování na objekt. Pokud funkce vyžaduje i další parametry, pak objekt události musí být prvním parametrem. Změňme handler pro tlačítko s id rovným "tlačítko". Pojďme získat přístup k objektu události. Místo hlášení o stisknutí tlačítka zobrazíme typ události. Nyní bude handler vypadat takto:

13 14 15 16

button.onclick = funkce (událost) (upozornění (typ události););

Kliknutím na tlačítko se zobrazí typ spouštěné události.

Všechny objekty událostí mají vlastnost currentTarget. Vrátí prvek, který událost spustil. To se může zdát zbytečné. Koneckonců, handler je přiřazen ke konkrétnímu prvku. Proč tento prvek znovu vracet? Ale s událostmi prohlížeče jsou věci trochu složitější. Jak se to používá, se dozvíte o něco později. Další vlastnosti zvážíme při studiu konkrétních událostí.

Typy událostí

Na úsvitu rozvoje World Wide Web se weboví vývojáři museli vypořádat pouze s malým počtem událostí: „načíst“, „kliknout“, „přejet myší“ a další. Tyto poměrně staré typy událostí jsou dobře podporovány všemi prohlížeči. Jak se webová platforma vyvíjela, byla zahrnuta výkonnější API a počet událostí se výrazně zvýšil. Neexistuje žádný standard, který by definoval kompletní sadu událostí, a počet podporovaných událostí stále rychle roste. Tyto nové události jsou identifikovány v následujících dvou zdrojích:

Specifikace DOM Level 3 Events, která se po mnoha letech stagnace začala aktivně rozvíjet pod záštitou konsorcia W3C.

Mnoho nových API ve specifikaci HTML5 (a souvisejících dalších specifikacích) definuje nové události používané například pro správu historie, přetahování, výměnu zpráv mezi dokumenty a přehrávání zvuku a videa.

Všimněte si, že mnoho z těchto nových typů událostí ještě není široce podporováno a jsou definovány standardy, které jsou stále ve fázi návrhu. Události, které budete ve svých webových aplikacích nejčastěji využívat, budou obvykle spadat do kategorie dlouhodobých a podporovaných všemi prohlížeči: jsou to události pro práci s myší, klávesnicí, HTML formuláři a objektem Window. Tyto události zvážíme.

Události načítání dokumentů

Většina webových aplikací bezpodmínečně potřebuje webový prohlížeč, aby je upozornil, když je dokument dokončen a je připraven s ním provádět operace. Tomuto účelu akce slouží zatížení v objektu Window. Událost load je vyvolána až po úplném načtení dokumentu a všech jeho obrázků. Skripty však lze obvykle spustit hned po analýze dokumentu, ještě před načtením obrázků. Dobu spouštění webové aplikace můžete výrazně zkrátit spuštěním skriptování při jiných událostech než načítání.

událost DOMContentLoaded spustí se, jakmile je dokument načten, analyzován analyzátorem a všechny odložené skripty byly provedeny. V tomto okamžiku mohou obrázky a skripty s atributem async pokračovat v načítání, ale samotný dokument bude připraven k provádění operací. Tato událost byla poprvé představena ve Firefoxu a od té doby byla přijata všemi ostatními výrobci prohlížečů, včetně Microsoftu, který přidal podporu pro tuto událost v IE9. Navzdory předponě DOM v názvu tato událost není součástí standardu událostí DOM úrovně 3, ale je standardizována specifikací HTML5.

Při načítání dokumentu se mění hodnota vlastnosti document.readyState. Každá změna hodnoty této vlastnosti v IE je doprovázena událostí readystatechange na objektu Document, takže v IE lze tuto událost použít k určení, kdy nastane úplný stav. Specifikace HTML5 standardizuje událost readystatechange, ale instruuje jej spustit bezprostředně před událostí load, takže není zcela jasné, jaká je výhoda události readystatechange oproti zátěži.

Níže uvedený příklad definuje funkci whenReady (). Funkce předaná do whenReady () je volána (jako metoda objektu Document), jakmile je dokument připraven k provádění operací. whenReady () naslouchá událostem DOMContentLoaded a readystatechange a používá událost load pouze jako záložní v případě, že je použita ve starších prohlížečích, které nepodporují první dvě události. Funkce whenReady () bude použita v některých z následujících scénářů:

/ * Předejte svou funkci whenReady () a ta ji zavolá (jako metodu objektu dokumentu), jakmile je dokument analyzován a připraven k provádění operací. Registrované funkce jsou volány při první události DOMContentLoaded, readystatechange nebo load. Jakmile je dokument připraven a jsou volány všechny funkce, whenReady () okamžitě zavolá všechny funkce, které mu byly předány. * / var whenReady = (funkce () (// Tato funkce je vrácena funkcí whenReady () var funcs =; // Funkce, které mají být volány při události var ready = false; // Získat hodnotu true, když je zavolána funkce handleru / / Obslužná rutina události , která je volána, jakmile je dokument // připraven k provádění operací handler funkce (e) (// Pokud již byla obslužná rutina volána, stačí vrátit řízení, pokud (připraveno) return; // Pokud je tato událost readystatechange a stav je // výborný od "complete", což znamená, že dokument ještě není připraven, pokud (e.type === "readystatechange" && document.readyState! == "complete") se vrátí; // Volat všem registrovaným funkce. // Všimněte si, že každá hodnota // vlastnosti funcs.length je zkontrolována jednou, v případě, že jedna z volaných funkcí // registruje další funkce.for (var i = 0; i

Události s myší

S myší je spojeno poměrně dost událostí. Všechny jsou uvedeny v tabulce níže. Všechny události myši kromě mouseenter a mouseleave vybuchnou. Události kliknutí na odkazy a tlačítka pro odeslání formuláře mají výchozí akce, které lze vrátit zpět. Teoreticky je možné zrušit událost kontextového menu a zabránit zobrazení kontextového menu, ale některé prohlížeče mají nastavení, která činí tuto událost nezrušitelnou.

Události myši JavaScript

Typ	Popis
klikněte	Událost na vysoké úrovni vyvolaná, když uživatel stiskne a uvolní tlačítko myši nebo jinak aktivuje prvek.
kontextová nabídka	Zrušitelná událost, která je vyvolána před zobrazením kontextové nabídky. Současné prohlížeče zobrazují kontextovou nabídku při kliknutí pravým tlačítkem, takže tuto událost lze použít také jako událost kliknutí.
dblclick	Spustí se, když uživatel dvakrát klikne.
pohyb myši	Spustí se, když uživatel stiskne tlačítko myši.
mouseup	Spustí se, když uživatel uvolní tlačítko myši.
pohyb myši	Zvednuté, když uživatel pohne ukazatelem myši.
přejet myší	Zvednuté, když je ukazatel myši umístěn nad prvkem. Vlastnost relatedTarget (nebo fromElement v IE) identifikuje prvek, ze kterého byl přesunut ukazatel myši.
mouseout	Zvednuté, když ukazatel myši opustí prvek. Vlastnost relatedTarget (nebo toElement v IE) určuje prvek, na který se přesunul ukazatel myši.
mouseenter	Podobné jako při přejetí myší, ale nevyskakuje. Poprvé se objevil v IE a byl standardizován v HTML5, ale ještě není podporován všemi prohlížeči.
myší list	Jako mouseout, ale nevyskakuje. Poprvé se objevil v IE a byl standardizován v HTML5, ale ještě není podporován všemi prohlížeči.

Objekt předaný obslužným rutinám události myši má vlastnosti clientX a klientY které definují souřadnice ukazatele vzhledem k oknu. Chcete-li je převést na souřadnice dokumentu, musíte k nim přidat pozice posuvníku okna.

Vlastnosti altKey, ctrlKey, metaKey a klávesa Shift definují stavy různých modifikačních kláves, které mohly být přidrženy v době události: lze je použít například k rozlišení jednoduchého kliknutí od kliknutí se stisknutou klávesou Shift.

Vlastnictví knoflík určuje, které tlačítko myši bylo stisknuto v době události. Různé prohlížeče však do této vlastnosti zapisují různé hodnoty, takže je obtížné ji používat přenosným způsobem.

Některé prohlížeče vyvolávají událost kliknutí pouze při kliknutí na levé tlačítko. Pokud tedy potřebujete ovládat kliknutí na jiná tlačítka, měli byste použít události mousedown a mouseup. Událost kontextového menu obvykle signalizuje, že bylo provedeno kliknutí pravým tlačítkem, ale jak bylo uvedeno výše, není vždy možné zabránit tomu, aby se kontextové menu objevilo v obslužných rutinách této události.

Níže uvedený příklad demonstruje funkci přetažení (), která, když je volána z obslužné rutiny události mousedown, umožňuje uživateli táhnout absolutně umístěné prvky dokumentu pomocí myši. Funkce drag () funguje s oběma modely událostí, DOM i IE.

Funkce drag () má dva argumenty. První je přetahovaná položka. Může to být prvek, který vyvolal událost mousedown, a prvek, který ji obsahuje (můžete například nechat uživatele, aby uchopil prvek, který vypadá jako nadpis okna, a přetáhl prvek, který obsahuje prvek, který vypadá jako okno). V každém případě však musí jít o prvek dokumentu absolutně umístěný pomocí atributu pozice CSS. Druhým argumentem je objekt události přijatý s událostí mousedown:

/ * drag () - drag and drop absolutně umístěné HTML prvky. Tato funkce musí být volána z obsluhy události onmousedown. Následné události mousemove způsobí pohyb určeného prvku. Událost mouseup dokončí přesun. Tato implementace funguje ve standardních modelech událostí i modelech událostí IE. Používá funkci getScrollOffsets (). Argumenty elementToDrag: Prvek, který přijal nebo obsahuje událost mousedown. Tento prvek musí být absolutně umístěn. Hodnoty jeho vlastností style.left a style.top se změní, když uživatel pohne ukazatelem myši. event: Objekt Event přijatý obslužnou rutinou události mousedown. * / funkce přetažení (elementToDrag, událost) (// Převede počáteční souřadnice myši na souřadnice dokumentu var scroll = getScrollOffsets (); // Pomocná funkce deklarovaná níže var startX = event.clientX + scroll.x; var startY = event. clientY + scroll.y; // Počáteční souřadnice (vzhledem k začátku dokumentu) prvku, který // bude přesunut. Protože elementToDrag je absolutně umístěn, // předpokládá se, že jeho vlastnost offsetParent odkazuje na dokument body var origX = elementToDrag.offsetLeft; var origY = elementToDrag.offsetTop; // Zjištění vzdálenosti mezi bodem události mousedown a levým horním rohem prvku. // Tato vzdálenost bude zohledněna při pohybu ukazatele myši.var deltaX = startX - origX; var deltaY = startY - origY; // Registrace událostí obslužného programu mousemove a mouseup //, které následují po události mousedown.if (document.addEventListener) (// Standardní model události // Registrace zachycení handlerů v dokumentu document.addEventListener ("mousemove", moveHandler, true); document.addEventListener ("mouseup", upHandler, true); ) else if (document.attachEvent) (// Model událostí IE pro IE5-8 // V modelu událostí IE jsou události zachyceny voláním // metody setCapture () prvku. elementToDrag.setCapture (); elementToDrag. připojitEvent ("onmousemove", moveHandler); elementToDrag.attachEvent ("onmouseup", upHandler); // Interpretovat ztrátu zachycení události myši jako událost mouseup elementToDrag.attachEvent ("onlosecapture", upHandler);) // Tato událost byla zpracováno a nemělo by být předáno jiným handlerům if (událost .stopPropagation) event.stopPropagation (); // Standardní model else event.cancelBubble = true; // IE // Zabránění provádění výchozích akcí. if (event.preventDefault) event.preventDefault (); // Standardní model else event.returnValue = false; // IE / * Tento ovladač zachycuje události mousemove, ke kterým dochází při přetahování prvku. Je zodpovědný za pohyb prvku. * / funkce moveHandler (e) (if (! e) e = window.event; // IE Event Model // Přesunutí prvku na pozici ukazatele myši na základě polohy // posuvníků a posunů vzhledem k initial click.var scroll = getScrollOffsets ( ); elementToDrag.style.left = (e.clientX + scroll.x - deltaX) + "px"; elementToDrag.style.top = (e.clientY + scroll.y - deltaY) + "px"; // A přeruší šíření události dále.if (e.stopPropagation) e.stopPropagation (); // Standardní model jinak e.cancelBubble = true; // IE) / * Tento ovladač zachytí poslední událost mouseup, která dokončí operaci přetažení. * / funkce upHandler (e) (if (! e) e = window.event; // IE Event Model // Odebrat zachycující obslužné rutiny událostí. if (document.removeEventListener) (// DOM Event Model document.removeEventListener ("mouseup" , upHandler, true); document.removeEventListener ("mousemove", moveHandler, true);) else if (document.detachEvent) (// Model události IE 5+ elementToDrag.detachEvent ("onlosecapture", upHandler); elementToDrag.detachEvent ( "onmouseup", upHandler); elementToDrag.detachEvent ("onmousemove", moveHandler); elementToDrag.releaseCapture ();) // A přeruší další šíření události. if (e.stopPropagation) e.stopPropagation (); // Standardní model else e.cancelBubble = true; // IE)) // Vrátí aktuální pozice posuvníku jako vlastnosti x a y objektové funkce getScrollOffsets (w) (// Použijte zadané okno nebo aktuální, // pokud funkce se volá bez argumentu w = w | | window; // Následující metoda funguje ve všech prohlížečích kromě IE verze 8 a pod if (w.pageXOffset! = null) return (x: w.pageXOffset, y: w.pageYOffset); // Pro IE (a další prohlížeče) ve standardním režimu var d = w.document; if (document.compatMode == "CSSICompat") return (x: d.documentElement.scrollLeft, y: d.documentElement.scrollTop); // Pro prohlížeče v režimu kompatibility return (x: d.body.scrollLeft, y: d.body.scrollTop); )

Následující úryvek ukazuje, jak používat funkci přetažení () v souboru HTML:

Nejdůležitější je zde atribut onmousedown u vnořeného prvku