Úvod do jQuery udalostí
JQuery je jednou z najpopulárnejších a najpoužívanejších knižníc javascript, ktoré sú vyvinuté a navrhnuté tak, aby zjednodušili architektúru DOM založenú na HTML, tj vlastnosti modelu objektu dokumentu, ako je čítanie, manipulácia a stromový priechod. Zjednodušené sú aj ďalšie vlastnosti z jQueries, ako je spracovanie udalostí, Ajax, styling a animácia CSS. Je to open-source a bezplatná knižnica, ktorá sa používa spravidla v 73% z cca. Dnes sa používa 10 miliónov webových stránok. Medzi hlavné vlastnosti Jquery patria vlastnosti založené na elementoch DOM, ako sú selektory, manipulácia a stromový priechod, čo robí prácu na JQuery oveľa zaujímavejšou, ľahšou a pohodlnejšou.
Používa sa na poskytovanie veľmi jednoduchého a prehľadného rozhrania, ktoré možno použiť na aplikáciu rôznych druhov úžasných efektov. Tieto metódy tiež umožňujú rýchle použitie a aplikáciu najbežnejšie používaných funkcií a ich účinkov spolu s holými až minimálnymi konfiguráciami. Základné príkazy, ako sú príkazy na zobrazovanie a skrývanie prvkov, sú do značnej miery rovnaké a ostatné zostávajú v rovnakej kategórii, ako by očakával niekto, kto ich chce vidieť. príkaz show () sa v tomto prípade používa na zobrazenie prvkov v úplne zabalenom a na skrytie týchto prvkov sa používa kombinovaný príkaz set a hide ().
Jquery je šitý na mieru, ktorý sa používa na reagovanie na udalosti uvedené na stránke HTML. Udalosti samy osebe sú rôzne akcie návštevníkov, na ktoré môže webová stránka odpovedať. Inými slovami, udalosť sa používa na mierne znázornenie presného alebo presného okamihu, najmä niečoho, čo sa stalo. To môže zahŕňať scenáre, ako je pohyb myši nad prvkom, kliknutie a výber prepínača a tiež kliknutie na prvok. Pojem požiare alebo pojem požiar sa často používa spolu s udalosťou. Napríklad udalosť stlačenia klávesu sa spustí alebo populárnejšie nazýva ako spustená, je to hlavne vtedy, keď stlačíte kláves. Tu je zoznam najbežnejších a najčastejšie používaných udalostí DOM.
Udalosti myši ako dblclick, mouseleave, mouseenter, click. Existujú aj ďalšie udalosti týkajúce sa klávesnice, ako napríklad Keypress, keyup a keydown. Existujú aj iné formy udalostí, ako sú zmeny, odovzdanie, rozmazanie a zameranie udalostí. Existujú ďalšie udalosti, ktoré sú udalosťami dokumentu alebo okna, ako napríklad zmena veľkosti, načítanie, posúvanie, uvoľnenie atď. V Jquery väčšina udalostí založených na DOM má zodpovedajúcu metódu jquery. Preto, ak chcete priradiť novú udalosť všetkým existujúcim odsekom na stránke, dá sa použiť syntax uvedená nižšie.
Udalosti a syntax jQuery
Nižšie sú uvedené nasledujúce udalosti jQuery so syntaxou
1. Kliknite ()
Táto udalosť nastane vždy, keď sa klikne na prvok. Táto metóda click () sa používa na spustenie prvku clicked, ktorý je tiež známy ako udalosť click, ktorá sa používa na pripojenie k funkcii vždy, keď sa vyskytne udalosť súvisiaca s click.
syntax
$(selector).click()
Ak chcete k tejto udalosti kliknutia pripojiť funkciu,
$(selector).click(function)
Ďalší krok vždy prichádza spolu s akciou a spúšťom, ktoré tvoria skutočné fungovanie a fungovanie funkcie, a preto vždy, keď sa udalosť vystrelí, mala by sa na udalosť odovzdať funkcia.
príklad
$("p").click(function()(
// action which is triggered goes here!! ));
2. Dblclick ()
Táto metóda sa používa na pripojenie funkcie obsluhy udalostí k poskytnutému prvku HTML. Táto funkcia sa vykonáva vždy, keď používateľ zdvojnásobí kliknutie na daný prvok HTML.
syntax
$(selector).dblclick()
príklad
$("p").dblclick(function()(
$(this).hide();
));
3. zmena ()
Táto udalosť nastane vždy, keď sa zmení hodnota konkrétneho prvku, tj funguje iba pre vstupné, textové a vybraté prvky. Metóda change () sa používa na spustenie zmeny alebo tej, ktorá sa pripojí k funkcii vždy, keď sa musí vyskytnúť udalosť súvisiaca so zmenou.
syntax
$(selector).change()
príklad
$("input").change(function()(
alert("This text related to this has been changed.");
));
4. rozmazanie ()
Táto udalosť súvisiaca s rozostrením nastane iba vtedy, keď prvok stratí zaostrenie. Metóda rozostrenia (), ktorá sa používa na spustenie udalosti rozostrenia, alebo metóda, ktorá sa používa na pripojenie funkcie, ktorá sa má spustiť pri každom výskyte rozostrenia. Táto metóda sa často používa s metódou focus ().
syntax
$(selector).blur()
príklad
$("input").blur(function()(
alert("The field has lost its focus.");
));
5. údaje
Táto vlastnosť event.data sa používa na to, aby obsahovala voliteľné odovzdané údaje týkajúce sa metódy udalosti, keď je viazaný vykonávajúci obslužný program pre prúd.
syntax
event.data
príklad
$("p").each(function(i)(
$(this).on("click", (x:i), function(event)(
alert("This index + ". paragraph has data: " + event.data.x);
));
));
6. menný priestor
Táto vlastnosť sa používa na vrátenie vlastného menného priestoru vždy, keď je udalosť spustená. Túto vlastnosť zvykli nastavovať autori doplnkov, ktoré môžu byť použité na veľmi odlišné úlohy, ktoré závisia od používaného priestoru názvov. Menné priestory, ktoré začínajú podčiarknutím, sú rezervované menné priestory pre JQuery.
syntax
event.namespace
príklad
$("p").on("custom.someNamespace", function(event)(
alert(event.namespace);
));
7. PageX
Toto je vlastnosť typu stránky, ktorá sa používa na vrátenie polohy ukazovateľa myši, ktorá súvisí s ľavým bočným okrajom dokumentu. Tento druh majetku sa pri udalosti často používa. Vlastnosť PageY.
syntax
event.PageX
príklad
$(document).mousemove(function(event)(
$("span text ").text("X: " + event.pageX);
));
8. PageY
Toto je vlastnosť typu stránky, ktorá sa používa na vrátenie polohy ukazovateľa myši, ktorá súvisí s horným okrajom dokumentu. Tento druh majetku sa pri udalosti často používa. Vlastnosť PageX.
syntax
event.PageY
príklad
$(document).mousemove(function(event)(
$("span text ").text("Y: " + event.pageY);
));
9. výsledok
Vlastnosť event.result sa používa na to, aby obsahovala predchádzajúcu alebo poslednú hodnotu vrátenú obsluhou udalosti, ktorá je špecificky spustená konkrétnou udalosťou.
syntax
event.result
príklad
$("button").click(function()(
return "Hi there!";
));
10. preventDefault ()
Táto metóda event.preventDefault () súvisiaca s udalosťami sa používa na zastavenie predvolenej akcie konkrétneho prvku. Príklady tohto scenára zahŕňajú:
Zabránenie odoslaniu tlačidla v predložení formulára
Zabráňte odkazu v prístupe na konkrétnu adresu URL.
Konkrétna udalosť, ako napríklad event.preventDefault (), sa používa na kontrolu, či sa na volanie udalosti používa metóda alebo funkcia preventDefault ().
syntax
event.preventDefault()
príklad
$("a").click(function(event)(
event.preventDefault();
));
11. Event.target ()
Táto vlastnosť sa používa na vrátenie prvku DOM, ktorý má byť spustený touto udalosťou. Najčastejšie je užitočné porovnávať event.Target s týmto, aby sa zistilo, či sa s konkrétnou udalosťou zaobchádza v dôsledku udalosti zvanej bublajúce.
syntax
event.target
príklad
$("p, button, h2").click(function(event)(
$("div").html("Hi, triggered is " + event.target.NameNode + " new element.");
));
12. časové razítko
Táto vlastnosť sa používa na vrátenie počtu milisekúnd od času 1. januára 1970, čo zodpovedá prvýkrát, keď sa udalosť prvýkrát skutočne spustila.
syntax
event.TimeStamp
príklad
$("button").click(function(event)(
$("span").text(event.timeStamp);
));
13. typ
Používa sa na monitorovanie udalosti a jej typu, ktorý je spustený.
syntax
event.type
Príklad:
$("p").on("click dblclick and mouse related events", function(event)(
$("div").html("Event: " + event.type);
));
14. ktoré ()
Táto vlastnosť sa používa na vrátenie klávesu klávesnice alebo myši, ktoré bolo stlačené pre udalosť.
syntax
event.which
príklad
$("input").keydown(function(event)(
$("div").html("Key: " + event.which);
));
15. focus ()
Táto vlastnosť a fokus pre túto udalosť nastane, keď sa prvok použije na získanie fokusu, ku ktorému dôjde, keď sa vyberie kliknutím myši alebo navigáciou na kartu. Metóda focus () sa používa na spustenie udalosti focus alebo na pripojenie funkcie, ktorá sa má spustiť, keď sa vyskytne udalosť súvisiaca s focusom.
syntax
$(selector).focus()
príklad
$("input").focus(function()(
$("span").css("display", "inline").fadeOut(200);
));
16. hover ()
Táto metóda vznášania sa používa na špecifikovanie dvoch funkcií používaných na spustenie, keď sa kurzor myši vznáša nad všetkými vybratými prvkami. Táto metóda spúšťa udalosti myši a myši. Ak je zadaná iba jedna funkcia, bude sa spúšťať pre udalosti spojené s myšou a myšou.
syntax
$(selector).hover(inFunction, outFunction)
príklad
$("p").hover(function()(
$(this).css("background-color", "blank");
), function()(
$(this).css("background-color", "yellow");
));
17. keydown ()
Poradie udalostí, ktoré súvisia s udalosťou keydown, sú:
- Keydown: Používa sa, keď je kľúč na ceste nadol.
- Stlacenie tlacidla : Stane sa to po stlacení tlacidla na klávesnici
- Keyup: Ako už názov napovedá, používa sa, keď stlačíte tlačidlo na hornej strane.
syntax
$(selector).keydown()
príklad
$("input").keydown(function()(
$("input").css("background-color", "black");
));
18. stlačenie klávesu ()
Poradie udalostí, ktoré súvisia s udalosťou stlačenia tlačidla, je:
- Keydown: Používa sa, keď je kľúč na ceste nadol.
- Stlacenie tlacidla : Stane sa to po stlacení tlacidla na klávesnici
- Keyup: Ako už názov napovedá, používa sa, keď stlačíte tlačidlo na hornej strane.
syntax
$(selector).keypress()
príklad
$("input").keypress (function()(
$("input").css("background-color", "black");
));
19. keyup ()
Poradie udalostí, ktoré súvisia s udalosťou keyup, je:
- Keydown: Používa sa, keď je kľúč na ceste nadol.
- Stlacenie tlacidla : Stane sa to po stlacení tlacidla na klávesnici
- Keyup: Ako už názov napovedá, používa sa, keď stlačíte tlačidlo na hornej strane.
syntax
$(selector).keyup()
príklad
$("input").keyup(function()(
$("input").css("background-color", "black");
));
20. Živé ()
Táto metóda života () alebo funkcia jQuery sa používa na pripojenie jedného alebo viacerých obslužných programov založených na udalostiach, ktoré sa majú použiť najmä pre vybrané zoznamy prvkov, a tiež špecifikuje funkciu, ktorá sa má spustiť v prípade výskytu udalostí. Všetky obsluhy udalostí sú pripojené pomocou metódy live (), ktorá bude fungovať pre súčasné aj FUTURE prvky, ktoré sú založené na zhode selektorových prvkov, ktoré môžu byť ako nový prvok vytvorený skriptom. Metódu die () je možné použiť na zničenie metódy live ().
syntax
$(selector).live(event, data, function)
príklad
$("button").live("click", function()(
$("p").slideToggle();
));
21. Zaťaženie ()
Metóda načítania sa používa na pripojenie obsluhy udalostí k udalosti založenej na zaťažení. Udalosť načítania sa vyskytuje vždy, keď je určená Táto udalosť sa vyskytuje a funguje vždy, keď sú prvky spojené s adresou URL, napríklad obrázok, rámec, skript, prvok iframe a objekt okna. Udalosť načítania sa môže alebo nemusí spustiť a záleží na prehliadači, aj keď je obrázok uložený do vyrovnávacej pamäte. Existuje aj metóda AJAX, ktorá je metódou jQuery, ktorá sa nazýva load (), pričom metóda, ktorá sa volá, závisí od parametrov.
syntax
$(selector).load(function)
príklad
$("img").load(function()(
alert("stuff loaded.");
));
22. Mousedown
Táto udalosť nastane iba vtedy, keď je ľavé tlačidlo myši stlačené nad vybratým zoznamom prvku. Metóda alebo funkcia mousedown () sa používa na spustenie tejto udalosti, ktorá prikladá funkciu, a spustí sa vždy, keď dôjde k udalosti mousedown. Táto metóda sa často používa spolu s metódou mouseup ().
syntax
$(selector).mousedown()
príklad
$("div").mousedown(function()(
$(this).after("Down button pressed with mouse.");
));
23. vypnuté ()
Táto metóda sa používa na odstránenie obsluhy udalostí, ktorá je pripojená spolu s metódou on (). Dá sa povedať, že ide o nahradenie metódy unbind (), die () a undelegate (). Táto metóda sa používa na dosiahnutie väčšej konzistencie API a vždy sa odporúča túto metódu využiť, pretože sa používa na zjednodušenie bázy kódu Jquery.
syntax
$(selector).off(event, selector, function(eventObj), map)
príklad
$("button").click(function()(
$("p").off("click");
));
24. mouseenter ()
Táto udalosť nastane vždy, keď sa kurzor myši nachádza nad určeným prvkom a vstúpi do procesu, keď spúšťa udalosť mouseenter, alebo sa používa na pripojenie funkcie, ktorá sa môže použiť na spustenie vždy, keď sa vyskytne udalosť založená na myši.
syntax
$(selector).mouseenter()
príklad
$("p").mouseenter(function()(
$("p").css("background-color", "black");
));
25. mouseleave ()
Táto udalosť sa vyskytuje vždy, keď je ukazovateľ myši nad špecifikovaným prvkom a odchádza, keď spúšťa udalosť opustenia myši alebo sa používa na odstránenie funkcie, ktorá sa môže použiť na spustenie vždy, keď sa vyskytne udalosť založená na myši.
syntax
$(selector).mouseleave()
príklad
$("p").mouseleave(function()(
$("p").css("background-color", "black");
));
Jquery je jednou z najpoužívanejších knižníc, pokiaľ ide o front-end vývoj. To poskytuje jedinečné funkcie a širokú škálu funkcií, ktoré pomáhajú pri uľahčovaní a pohodlnom živote vývojárov a ľudí. Dúfam, že sa vám náš článok páčil. Zostaňte naladení na náš blog.
Odporúčané články
Toto je sprievodca udalosťami jQuery. Tu diskutujeme zoznam najbežnejších a často používaných rôznych udalostí jQuery so syntaxou a príkladmi. Ďalšie informácie nájdete aj v nasledujúcich článkoch -
- jQuery Effects
- jQuery metódy
- Atribúty jQuery
- Ako nainštalovať Jquery?
- Top 8 selektorov jQuery s implementáciou kódu
- Sprievodca príkladmi JQuery Progress Bar
- Sprievodca rôznymi udalosťami JavaScriptu