Zpracování událostí s jQuery

The Události jsou situace, které se vyskytují v našem dokumentu HTML, může být spuštěno situacemi samotného systému nebo akcemi uživatele. V obou případech, když dojde k události, je možné provést následné zpracování pomocí jQuery, abychom mohli v našich programech dosáhnout lepších efektů.
To je nanejvýš důležité, protože znalost tohoto aspektu a pomocí rámce můžeme dát našim webovým stránkám a aplikacím větší dynamiku.
Toto je první věc, kterou bychom si měli zodpovědět při práci s událostmi v jQuery„Už jsme řekli, že události jsou akce nebo situace, které jsou spuštěny systémem nebo uživatelem, například když je načítání dokumentu dokončeno, systém spustí událost připraven nebo připraven, když uživatel klikne na prvek, spustí se homonymní událost.
S ohledem na tyto malé příklady pak můžeme vidět základní syntaxi pro zpracování jakéhokoli typu události, která je následující:

$ (selector) .on ("eventName", function () {….})

Pamatujme si nebo upřesněte, že selektor je název, pomocí kterého se chystáme lokalizovat prvek v našem dokumentu, pak pomocí metody .on () Můžeme mu pak říci, jakou událost by měl poslouchat, a když to zjistí, může spustit anonymní funkci v naší sekci skriptů HTML.
Něco zajímavého, co můžeme zdůraznit, je, že můžeme použít a handler pro různé akceJinými slovy, můžeme provést stejnou akci pro několik situací, musíme pouze uvést různé události, které je třeba poslouchat, syntaxe je velmi podobná té, kterou jsme právě viděli.
$ (selector) .on ("název_ akce 1 název události 2 název události 3….", funkce () {….})
Protože víme to nejzákladnější, musíme to také začít vědět jQuery Jako vývojářům nám to vždy usnadní život, a proto poskytlo několik zkratek pro vytváření obslužných rutin událostí, díky čemuž nemusíme dělat úplné prohlášení, jak jsme viděli v předchozím dílu, ale tyto zkratky aplikujeme přímo na volič.
Podívejme se na některé z nejzajímavějších zkratek používaných vývojáři, je třeba poznamenat, že to není úplný seznam dostupných, pro získání tohoto seznamu je lepší přejít přímo k oficiální dokumentaci, ale abyste měli malý začátek předmět, je jich víc než dost.
připraven ()Spustí se, když jsou všechny prvky dokumentu SLUNCE jsou načteny, to znamená, když je stránka připravena, odtud její název. Je třeba poznamenat, že se jedná o systémovou událost.
Předložit ()Stává se to, když uděláme a odeslání formulářeZajímavostí je, že když se formulář objeví, neposílá se tradičním způsobem, ale spíše se čeká na to, co mu tato událost řekne, takže jej můžeme použít jako mezilehlý bod pro validace polí, abychom zmínili příklad jeho použití.
klikněte ()Spustí se, když to udělá uživatel klikněte s ukazatelem myši na prvek, může to být z pole typu vstupu, aby zahrnovalo prvky jako nebo kotvy . Jak můžeme poznat, je událost spuštěná uživatelem.
rozostření ()K tomu dochází, když je prvek, na kterém se právě nacházíme, rozostřený, například píšeme do textového pole a přejdeme do dalšího pole, v tomto případě první pole ztratilo fokus a tato událost se provede.
soustředit se ()Na rozdíl od předchozí události k tomu dochází právě tehdy, když se zaměříme na prvek.
vznášet se ()K této události dochází, když umístíme ukazatel myši na nějaký prvek SLUNCE, lze obvykle aplikovat na a kotvy .
vyberte ()Nastane, když vybereme prvek v poli vybratMáme například rozevírací seznam a vybíráme položku z jejího obsahu.
změna ()Vyvolá se v případě, že se změní hodnota nebo stav prvku, například v poli vybrat, když změníme možnost, která se zde odráží.
Protože víme něco o nejpoužívanějších událostech, vygenerujeme malý dokument, který některé z nich uvede do praxe, a to buď v plné syntaxi, nebo s příklady, abychom mohli experimentovat s oběma formami.
V následujícím kódu uvidíme, jak zpočátku budeme psát console.log () když máme dokument uvnitř připraven (), pak použijeme další zprávu, když najedeme myší nad a potvrdit, jak to funguje vznášet se, konečně uvidíme, jak používat klikněte () Y soustředit se () k zobrazení dalších zpráv. Podívejme se na kód, který popisuje výše:

 Příklad události 1
Najeďte myší na tento Div !!

Sem napište něco:
Soustřeď se na mě:
$ (document) .ready (function () {console.log ("Stala se připravená událost !!");}); $ ("# událost vznášení"). hover (funkce () {console.log ("Událost vznášela se!");}); $ („# Click event“). Click (funkce () {console.log („spustili jsme událost Click ZVĚTŠIT
K tomu dochází, když chceme, aby prvek měl různé přidružené události, tímto způsobem můžeme lépe organizovat náš kód a poskytovat našemu prvku více funkcí.
Existují dvě možnosti, provést stejnou akci pro několik událostí nebo provést jinou akci pro každou z nich. Jakkoli chceme, budeme muset použít úplnou syntaxi, první, kterou jsme již definovali na začátku.
Podívejme se, jak propojit různé akce s různými událostmi pro stejný prvek. K tomu musíme použít základní syntaxi, jako je následující:

 $ (selector) .on ({EventName1: function () {…}, EventName2: function () {…}}); 

Jak vidíme, při používání této formy syntaxe se vyhneme tomu, abychom museli dělat něco jako následující:

 $ (volič) .ShortcutEvent1 (funkce () {}); $ (volič) .ShortcutEvent2 (funkce () {}); 

To, co nám umožňuje být organizovanější, nicméně platí obě a je na vývojáři, aby použil ten, který mu nejlépe vyhovuje.
Protože víme, jak propojit více událostí s prvkem, uvedeme to do praxe, vybereme události klikněte () Y soustředit se () V tomto případě je použijeme na dva prvky, v prvním prvku vygenerujeme stejnou odpověď pro každý z nich a ve druhém bude mít každá událost svou vlastní odpověď. Podívejme se na kód, který musíme provést, abychom dosáhli svého cíle:

 Příklad události 2
Stejný výsledek více událostí:

Různé výsledky na událost:
$ ("# element1"). on ("focus focus", function () {console.log ("ukazujeme totéž pro 3 události!");}); $ ("# element2"). on ({click: function () {console.log ("klikli jsme na element2");}, focus: function () {console.log ("zaměřili jsme se na element2");}}); 

Zde vidíme, že musíme být opatrní s druhou formou různých odpovědí na různé události, protože události nejdou do uvozovek, jako když to děláme v první formě, také že musíme uzavřít do závorek {} vše uvnitř metody .on ()„Jedná se o chybu, která se může vyskytovat velmi často, takže se jí tímto preventivním opatřením můžeme vyhnout. Nyní se podívejme, jak vypadá náš příklad, když jej spustíme v prohlížeči:

ZVĚTŠIT
Poznamenáme si počítadlo s a číslo 2 když dojde k událostem na prvním prvku, znamená to, že jsme udělali stejnou akci dvakrát, jak jsme plánovali. U druhého prvku si všimneme, že vytiskneme dvě určené akce v konzole, ačkoli také vidíme, že k nim dochází v jiném pořadí, než v jakém jsme je umístili, je to proto, že událost soustředit se se stane před klikněte v hierarchii událostí, zvláště pokud použijeme klíč TAB pohybovat se mezi poli.
Na konci tohoto tutoriálu jsme se naučili, jak můžeme začít ve světě zpracování událostí s jQueryToto je jen otvírač úst, nicméně s těmito malými funkcemi můžeme v našich aplikacích dosáhnout mnoha věcí.

Pomohl vám tento návod?
Pokud ne

POMOC VYLEPŠIT TENTO NÁVOD!
Myslíte si, že můžete tento návod opravit nebo vylepšit? Svou edici můžete odeslat se změnami, které považujete za užitečné.
Tento tutoriál upravilo 0 uživatelů. Upravte a staňte se uznávaným odborníkem!
Upravit tento návod

PODOBNÉ NÁVODY

Jak přetáhnout a uchopit obrázky pomocí uživatelského rozhraní JQueryJak vytvořit ikonu Spinner nebo načítání pomocí JQueryPluginy a knihovny JQuery pro vývoj webuFlexigrid dynamická mřížka s JQuery a PHPZpracování JSON s Node.jsZpracování událostí v Node.jsZpracování vyrovnávacích pamětí v Node.jsRegulární výrazy s Jquery
Žádné komentáře, buďte první!
Nečekejte déle a vstupte do SolveticZanechte své komentáře a využijte výhod uživatelského účtu Přidejte se k nám!

Vytvořit účetZaregistrujte se ZDARMA a získejte svůj účet SolveticZaregistrujte si účet
IdentifikovatMáte již účet? Přihlaste se zdeIdentifikujte mě na mém účtu




Informace

 Zveřejněno 12. prosince 2014 14:44
 Aktualizováno 14. prosince 2014 05:44
 Návštěvy 3,7 tis
 ÚroveňProfesionální


Nejnovější výukové programy pro JavaScript

Jak aktualizovat NPM pomocí prostředí PowerShell v systému Windows 10
Jak přetáhnout a uchopit obrázky pomocí uživatelského rozhraní JQuery
Jak vytvořit ikonu Spinner nebo načítání pomocí JQuery
Jak mít web přeložený do několika jazyků

Podívejte se více na JavaScript