Úvod do jQuery událostí
JQuery je jednou z nejpopulárnějších a nejpoužívanějších javascriptových knihoven, která je vyvinuta a navržena tak, aby zjednodušila architekturu DOM založenou na HTML, tj. Vlastnosti modelu objektu dokumentu, jako je čtení, manipulace a stromové procházení. Zjednodušeny jsou také další vlastnosti z jQueries, jako je zpracování událostí, Ajax, styling a animace CSS. Jedná se o open-source a bezplatnou knihovnu, která se obvykle používá v 73% z cca. 10 milionů webových stránek, které se dnes používají. Mezi hlavní vlastnosti Jquery patří vlastnosti založené na elementech DOM, jako jsou selektory, manipulace a procházení stromů, což dělá práci na JQuery mnohem zajímavější, snadnější a pohodlnější.
Používá se k vytvoření velmi jednoduchého a jasně vypadajícího rozhraní, které lze použít pro aplikaci různých druhů úžasných efektů. Tyto metody také umožňují rychlé použití a aplikaci nejčastěji používaných funkcí a jejich efektů spolu s holými až minimálními konfiguracemi. Základní příkazy, jako jsou příkazy pro zobrazování a skrývání prvků, jsou do značné míry stejné a ostatní ostatní také leží ve stejné kategorii s tím, co by někdo, kdo je chce vidět, očekával. Příkaz show () se v tomto případě používá k zobrazení prvků v zcela zabaleném a kombinovaný příkaz set a hide () se používá ke skrytí těchto funkcí.
Jquery je šitý na míru, který se používá k reakci na události uvedené na stránce HTML. Události samy o sobě jsou různé akce návštěvníků, na které může webová stránka reagovat. Jinými slovy, událost se používá k mírnému představení přesného nebo přesného okamžiku, zejména něčeho, co se stalo. To může zahrnovat scénáře, jako je přesunutí myši nad prvek, kliknutí a výběr přepínače a také kliknutí na prvek. Termín požáry nebo termín vystřelil je mnoho času použitý spolu s událostí. Například událost stisknutí klávesy je spuštěna nebo populárněji označena jako spuštěná, je to hlavně v okamžiku, kdy stisknete klávesu. Zde je seznam nejčastějších a nejčastěji používaných událostí DOM.
Události myši jako dblclick, mouseleave, mouseenter, click. Existují i další události na klávesnici, například Keypress, keyup a keydown. Existují i jiné formy událostí, jako jsou změny, odeslání, rozostření a zaostření. Existují další události, které jsou událostmi dokumentu nebo okna, jako je změna velikosti, načtení, posouvání, uvolnění atd. V Jquery má většina událostí založených na DOMu odpovídající metodu jquery. Proto k přiřazení nové události ke všem existujícím odstavcům na stránce lze použít níže uvedenou syntaxi.
Události a syntaxe jQuery
Níže jsou uvedeny následující události jQuery se syntaxí
1. Klikněte ()
K této události dochází vždy, když je kliknuto na prvek. Tato metoda click () se používá ke spuštění prvku clicked, také známého jako událost click, která se používá k připojení k funkci, kdykoli dojde k události související s kliknutím.
Syntax
$(selector).click()
Pokud chcete k této události kliknutí připojit funkci,
$(selector).click(function)
Další krok vždy přichází s akcí a triggerem, který tvoří skutečné fungování a fungování funkce, a proto vždy, když je událost spuštěna, měla by být na událost předána funkce.
Příklad
$("p").click(function()(
// action which is triggered goes here!! ));
2. Dblclick ()
Tato metoda se používá k připojení funkce obsluhy událostí k poskytnutému prvku HTML. Tato funkce se provádí vždy, když uživatel zdvojnásobí kliknutí na daný prvek HTML.
Syntax
$(selector).dblclick()
Příklad
$("p").dblclick(function()(
$(this).hide();
));
3. změna ()
K této události dochází vždy, když se změní hodnota konkrétního prvku, tj. Funguje pouze pro vstup, textarea a vybrané prvky. Metoda change () se používá ke spuštění události change nebo té, která se připojí k funkci, kdykoli musí dojít k události související se změnou.
Syntax
$(selector).change()
Příklad
$("input").change(function()(
alert("This text related to this has been changed.");
));
4. rozostření ()
K této události související s rozostřením dochází pouze v případě, že prvek ztratí fokus. Metoda rozostření (), která se používá ke spuštění události rozostření, nebo metoda, která se používá k připojení funkce, která má být spuštěna, kdykoli dojde k události rozostření. Tato metoda se často používá s metodou focus ().
Syntax
$(selector).blur()
Příklad
$("input").blur(function()(
alert("The field has lost its focus.");
));
5. data
Tato vlastnost event.data se používá k tomu, aby obsahovala volitelná předaná data související s metodou události, když je vázán prováděcí obslužný program pro aktuální.
Syntax
event.data
Příklad
$("p").each(function(i)(
$(this).on("click", (x:i), function(event)(
alert("This index + ". paragraph has data: " + event.data.x);
));
));
6. jmenný prostor
Tato vlastnost se používá k návratu vlastního oboru názvů, kdykoli je událost spuštěna. Vlastnost je používána autory pluginů, které lze použít k tomu, aby se úkoly řešily velmi odlišně, což závisí na použitém jmenném prostoru. Jmenné prostory, které začínají podtržítkem, jsou vyhrazené jmenné prostory pro JQuery.
Syntax
event.namespace
Příklad
$("p").on("custom.someNamespace", function(event)(
alert(event.namespace);
));
7. PageX
Toto je vlastnost typu stránky, která se používá k vrácení pozice ukazatele myši, která souvisí s levým bočním okrajem dokumentu. Tento druh majetku se s událostí často používá. Vlastnost PageY.
Syntax
event.PageX
Příklad
$(document).mousemove(function(event)(
$("span text ").text("X: " + event.pageX);
));
8. PageY
Toto je vlastnost typu stránky, která se používá k vrácení pozice ukazatele myši, která souvisí s horním okrajem dokumentu. Tento druh majetku se s událostí často používá. Vlastnost PageX.
Syntax
event.PageY
Příklad
$(document).mousemove(function(event)(
$("span text ").text("Y: " + event.pageY);
));
9. výsledek
Vlastnost event.result se používá k tomu, aby obsahovala předchozí nebo poslední hodnotu, která je vrácena obsluhou události, která je specificky spouštěna konkrétní událostí.
Syntax
event.result
Příklad
$("button").click(function()(
return "Hi there!";
));
10. preventDefault ()
Tato metoda event.preventDefault () související s událostí se používá k zastavení výchozí akce konkrétního prvku. Příklady tohoto scénáře zahrnují:
Zamezení tlačítka pro odeslání z odeslání formuláře
Zabraňte přístupu v přístupu na konkrétní adresu URL.
Konkrétní událost, jako je event.preventDefault (), se používá ke kontrole, zda se k vyvolání události používá metoda nebo funkce preventDefault ().
Syntax
event.preventDefault()
Příklad
$("a").click(function(event)(
event.preventDefault();
));
11. Event.target ()
Tato vlastnost se používá k vrácení prvku DOM, který má být touto událostí spuštěn. Nejčastěji je užitečné porovnat event.target s tímto, aby se zjistilo, zda je konkrétní událost zpracována kvůli události zvané bublající.
Syntax
event.target
Příklad
$("p, button, h2").click(function(event)(
$("div").html("Hi, triggered is " + event.target.NameNode + " new element.");
));
12. časové razítko
Tato vlastnost se používá k vrácení počtu milisekund od doby 1. ledna 1970, což odpovídá prvnímu okamžiku, kdy byla událost poprvé skutečně spuštěna.
Syntax
event.TimeStamp
Příklad
$("button").click(function(event)(
$("span").text(event.timeStamp);
));
13. typ
Slouží ke sledování události a jejího typu, který je spuštěn.
Syntax
event.type
Příklad:
$("p").on("click dblclick and mouse related events", function(event)(
$("div").html("Event: " + event.type);
));
14. který ()
Tato vlastnost se používá k návratu klávesy klávesnice nebo tlačítka myši, které bylo stisknuto pro událost.
Syntax
event.which
Příklad
$("input").keydown(function(event)(
$("div").html("Key: " + event.which);
));
15. focus ()
Tato vlastnost a fokus pro tuto událost nastane, když je prvek použit k získání fokusu, ke kterému dochází, když je vybrán kliknutím myši nebo navigací na kartu na něm. Metoda focus () se používá ke spuštění události focus nebo k připojení funkce, která se spustí, když dojde k události související s focusem.
Syntax
$(selector).focus()
Příklad
$("input").focus(function()(
$("span").css("display", "inline").fadeOut(200);
));
16. hover ()
Tato metoda přechodu se používá k určení dvou funkcí používaných ke spuštění, když se ukazatel myši pohybuje nad všemi vybranými prvky. Tato metoda spouští události myši a myši. Pokud je zadána pouze jedna funkce, bude spuštěna pro události myši a myši.
Syntax
$(selector).hover(inFunction, outFunction)
Příklad
$("p").hover(function()(
$(this).css("background-color", "blank");
), function()(
$(this).css("background-color", "yellow");
));
17. keydown ()
Pořadí událostí, které se vztahují ke klíčové události, jsou:
- Keydown: Používá se, když je klíč na cestě dolů.
- Keypress: Toto nastane, když stisknete klávesu na klávesnici
- Keyup: Jak název napovídá, používá se, když stisknete klávesu na horní straně.
Syntax
$(selector).keydown()
Příklad
$("input").keydown(function()(
$("input").css("background-color", "black");
));
18. keypress ()
Pořadí událostí, které souvisejí s událostí stisknutí klávesy, je:
- Keydown: Používá se, když je klíč na cestě dolů.
- Keypress: Toto nastane, když stisknete klávesu na klávesnici
- Keyup: Jak název napovídá, používá se, když stisknete klávesu na horní straně.
Syntax
$(selector).keypress()
Příklad
$("input").keypress (function()(
$("input").css("background-color", "black");
));
19. keyup ()
Pořadí událostí, které se vztahují ke klíčové události, je:
- Keydown: Používá se, když je klíč na cestě dolů.
- Keypress: Toto nastane, když stisknete klávesu na klávesnici
- Keyup: Jak název napovídá, používá se, když stisknete klávesu na horní straně.
Syntax
$(selector).keyup()
Příklad
$("input").keyup(function()(
$("input").css("background-color", "black");
));
20. Živě ()
Tato metoda životů () nebo funkce jQuery se používá k připojení jednoho nebo více popisovačů založených na událostech, které mají být použity zejména pro vybrané seznamy prvků, a také specifikuje funkci, která má být spuštěna v případě výskytu událostí. Všechny obsluhy událostí jsou připojeny pomocí metody live (), která bude fungovat pro aktuální i FUTURE elementy, které jsou založeny na přiřazení selektorových prvků, které mohou být jako nový prvek vytvořený skriptem. Metodu die () lze použít ke zničení metody live ().
Syntax
$(selector).live(event, data, function)
Příklad
$("button").live("click", function()(
$("p").slideToggle();
));
21. Load ()
Metoda load se používá k připojení obsluhy události k události založené na zatížení. Událost načtení nastane vždy, když je zadána Tato událost nastane a funguje, kdykoli prvky spojené s adresou URL, například obrázek, rámeček, skript, prvek iframe a objekt okna. Událost načtení se může nebo nemusí spustit a záleží na prohlížeči, i když je obrázek uložen do mezipaměti. Existuje také metoda AJAX, což je metoda jQuery, která se nazývá load (), a ta, která se nazývá, závisí na parametrech.
Syntax
$(selector).load(function)
Příklad
$("img").load(function()(
alert("stuff loaded.");
));
22. Mousedown
Tato událost nastane pouze tehdy, když je levé tlačítko myši stisknuto nad vybraným seznamem prvku. Metoda nebo funkce mousedown () se používá ke spuštění této události, která připojuje funkci, a spustí se vždy, když dojde k události mousedown. Tato metoda se často používá společně s metodou mouseup ().
Syntax
$(selector).mousedown()
Příklad
$("div").mousedown(function()(
$(this).after("Down button pressed with mouse.");
));
23. Off ()
Tato metoda se používá k odstranění obsluhy událostí, která je připojena spolu s metodou on (). Lze říci, že jde o nahrazení metody unbind (), die () a undelegate (). Tato metoda se používá k dosažení velké konzistence API a vždy se doporučuje tuto metodu využít, protože se používá ke zjednodušení základny kódu Jquery.
Syntax
$(selector).off(event, selector, function(eventObj), map)
Příklad
$("button").click(function()(
$("p").off("click");
));
24. mouseenter ()
Tato událost nastane, když je ukazatel myši nad zadaným prvkem a vstoupí, když spouští událost mouseenter nebo se používá k připojení funkce, kterou lze použít ke spuštění, kdykoli dojde k události založené na mouseenter.
Syntax
$(selector).mouseenter()
Příklad
$("p").mouseenter(function()(
$("p").css("background-color", "black");
));
25. mouseleave ()
K této události dochází, když je ukazatel myši nad zadaným prvkem a odchází, zatímco to vyvolá událost opustení myši, nebo se používá k odstranění funkce, kterou lze použít ke spuštění, kdykoli dojde k události založené na myši.
Syntax
$(selector).mouseleave()
Příklad
$("p").mouseleave(function()(
$("p").css("background-color", "black");
));
Jquery je jednou z nejpoužívanějších knihoven, pokud jde o vývoj frontendu. To poskytuje jedinečné funkce a širokou škálu funkcí, které pomáhají usnadnit a usnadnit život vývojářům a lidem všude kolem. Doufám, že se vám náš článek líbil. Sledujte náš blog a získejte další podobné informace.
Doporučené články
Toto je průvodce událostmi jQuery. Zde diskutujeme seznam nejběžnějších a často používaných různých událostí jQuery se syntaxí a příklady. Další informace naleznete také v následujících článcích -
- jQuery Effects
- jQuery metody
- Atributy jQuery
- Jak nainstalovat Jquery?
- Top 8 jQuery selektorů s implementací kódu
- Průvodce příklady JQuery Progress Bar
- Průvodce různými událostmi JavaScriptu