JQuery események A 25 legfontosabb JQuery esemény - Szintaxis és példa

Bevezetés a jQuery eseményekbe

A JQuery az egyik legnépszerűbb és legszélesebb körben használt javascript könyvtár, amelyet a HTML alapú DOM architektúra, azaz a dokumentumobjektum modell tulajdonságai, például az olvasás, a manipuláció és a fa átjárása egyszerűsítésére fejlesztettek ki és fejlesztettek ki. A jQueries egyéb tulajdonságai, például eseménykezelés, Ajax, stílus és CSS animáció szintén egyszerűsítve vannak. Ez egy nyílt forráskódú és ingyenes könyvtár, amelyet általában a kb. 73% -ában használnak. 10 millió webhely, amelyeket ma használnak. A Jquery alapvető tulajdonságai közé tartoznak a DOM elem alapú tulajdonságok, például a szelektorok, a manipuláció és a fa áthaladása, ami a JQuery-n végzett munkát sokkal érdekesebbé, könnyebbé és kényelmesebbé teszi.

Egy nagyon egyszerű és világos megjelenésű felület biztosítására szolgál, amely különféle csodálatos effektusok alkalmazására használható. Ezek a módszerek lehetővé teszik a leggyakrabban használt szolgáltatások és azok hatásainak gyors használatát és alkalmazását, az alig minimális konfigurációkkal együtt. Az alapvető parancsok, például az elemek megjelenítéséhez és elrejtéséhez, nagyjából ugyanazok, a többi pedig ugyanabban a kategóriában fekszik, amellyel bárki elvárja őket. A show () parancs ebben az esetben arra szolgál, hogy az elemeket teljesen becsomagolják, és a kombinált set and hide () paranccsal rejlik ezek a szolgáltatások.

A Jquery testreszabott, amelyet arra használnak, hogy válaszoljon egy HTML-oldalon biztosított eseményekre. Az események önmagukban a látogatók különböző tevékenységei, amelyekre a weboldal reagálhat. Más szavakkal: egy esemény arra szolgál, hogy kissé ábrázolja a pontos vagy pontos pillanatot, különösen valamit, ami történt. Ez magában foglalhat olyan forgatókönyveket, mint például az egér mozgatása az elem fölött, a rádiógomb kattintása és kiválasztása, valamint az elemre kattintás. A tüzek vagy a tüzek kifejezést sok alkalommal használják az esemény mellett. Például, a billentyű lenyomásával kiváltott esemény, vagy népszerűbben elnevezésként nevezik, főként akkor, amikor megnyomja a gombot. Itt található a leggyakoribb és leggyakrabban használt DOM események listája.

Egér események, például dblclick, mouseleave, mouseenter, click. Vannak más billentyűzet események is, például a Keypress, a keyup és a keydown. Az események más formái is vannak, például a változás, benyújtás, elmosódás és fókuszálás. Vannak más események is, amelyek dokumentum vagy ablak események, például átméretezés, betöltés, görgetés, ürítés stb. A Jquery-ben. A legtöbb DOM-alapú eseménynek megvan a megfelelő jquery módszere. Ezért egy új esemény hozzárendeléséhez az oldal összes meglévő bekezdéséhez az alábbi szintaxist felhasználhatjuk.

Események és a jQuery szintaxisa

Az alábbiakban bemutatott jQuery szintaxissal a következő események találhatók

1. Kattintson a ()

Ez az esemény akkor fordul elő, amikor az elemre kattintanak. Ezt a kattintási () módszert használják a kattintott elem, más néven kattintási esemény elindítására, amelyet arra használnak, hogy egy funkcióhoz csatolódjanak, amikor egy kattintással kapcsolatos esemény fordul elő.

Szintaxis

$(selector).click()

Ha hozzá szeretne rendelni egy funkciót ehhez a kattintási eseményhez,

$(selector).click(function)

A következő lépés mindig a művelettel és az eseményindítóval együtt jár, amely a funkció tényleges működését és működését képezi, és ezért amikor az eseményt kirúgták, egy funkciót át kell adni az eseménynek.

Példa

$("p").click(function()(
// action which is triggered goes here!! ));

2. Dblclick ()

Ez a módszer arra szolgál, hogy eseménykezelő funkciót csatoljon a biztosított HTML elemhez. Ezt a funkciót akkor hajtják végre, amikor a felhasználó duplán kattint az adott HTML elemre.

Szintaxis

$(selector).dblclick()

Példa

$("p").dblclick(function()(
$(this).hide();
));

3. változás ()

Ez az esemény akkor fordul elő, amikor egy adott elem értéke megváltozik, azaz csak a bemeneti, a szövegtag és a kiválasztott elemek esetén működik. A change () metódust a változás esemény kiváltására használják, vagy azt, amely a funkcióhoz kapcsolódik, amikor egy változással kapcsolatos eseménynek meg kell történnie.

Szintaxis

$(selector).change()

Példa

$("input").change(function()(
alert("This text related to this has been changed.");
));

4. elmosódás ()

Ez a blur-hoz kapcsolódó esemény csak akkor fordul elő, amikor az elem elveszíti a fókuszt. A blur () módszer, amelyet a blur esemény kiváltására használnak, vagy az a módszer, amelyet egy olyan funkció csatolására használnak, amelyet egy blur esemény bekövetkezésekor futtatni kell. Ezt a módszert gyakran használják a focus () módszernél.

Szintaxis

$(selector).blur()

Példa

$("input").blur(function()(
alert("The field has lost its focus.");
));

5. adatok

Ez az event.data tulajdonság az esemény módszerével kapcsolatos opcionális átadott adatok tárolására szolgál, amikor az aktuális végrehajtó kezelője le van kötve.

Szintaxis

event.data

Példa

$("p").each(function(i)(
$(this).on("click", (x:i), function(event)(
alert("This index + ". paragraph has data: " + event.data.x);
));
));

6. névtér

Ez a tulajdonság az egyedi névtér visszaadására szolgál, amikor az esemény beindul. Ezt a tulajdonságot plugin-készítők állítják be, amelyek felhasználhatók a feladatok nagyon eltérő kezelésére, ami a használt névtertől függ. Az a névtér, amelynek az aláhúzással kezdődik, a JQuery számára fenntartott névtér.

Szintaxis

event.namespace

Példa

$("p").on("custom.someNamespace", function(event)(
alert(event.namespace);
));

7. PageX

Ez az oldaltípus tulajdonság, amely az egérmutató helyzetének visszaadására szolgál, amely a dokumentum bal oldali széléhez kapcsolódik. Ezt a fajta ingatlant gyakran használják az eseménynél. PageY ingatlan.

Szintaxis

event.PageX

Példa

$(document).mousemove(function(event)(
$("span text ").text("X: " + event.pageX);
));

8. PageY

Ez az oldaltípus tulajdonság, amely az egérmutató helyzetének visszatérítésére szolgál, amely a dokumentum felső oldalsó széléhez kapcsolódik. Ezt a fajta ingatlant gyakran használják az eseménynél. PageX tulajdonság.

Szintaxis

event.PageY

Példa

$(document).mousemove(function(event)(
$("span text ").text("Y: " + event.pageY);
));

9. eredmény

Az event.result tulajdonság tartalmazza az előző vagy az utolsó értéket, amelyet az eseménykezelő ad vissza, amelyet kifejezetten az adott esemény vált ki.

Szintaxis

event.result

Példa

$("button").click(function()(
return "Hi there!";
));

10. prevenDefault ()

Ez az eseményekhez kapcsolódó event.preventDefault () módszer arra szolgál, hogy megállítsák az adott elem alapértelmezett műveletét. A forgatókönyv példái között szerepel:

A benyújtási gomb megakadályozása az űrlap benyújtásától

Megakadályozhatja, hogy egy link hozzáférjen egy adott URL-hez.

Egy adott eseményt, például az event.preventDefault () -ot használunk annak ellenőrzésére, hogy az prevenDefault () metódust vagy funkciót használják-e az esemény meghívására.

Szintaxis

event.preventDefault()

Példa

$("a").click(function(event)(
event.preventDefault();
));

11. Event.target ()

Ez a tulajdonság arra szolgál, hogy visszatérjen, melyik DOM elemet indítsa el az esemény. Leggyakrabban nem hasznos összehasonlítani az event.target-et ehhez annak elvégzéséhez, hogy meghatározzuk, hogy az adott eseményt egy buborékosításnak nevezett esemény miatt kezelik-e.

Szintaxis

event.target

Példa

$("p, button, h2").click(function(event)(
$("div").html("Hi, triggered is " + event.target.NameNode + " new element.");
));

12. timeStamp

Ez a tulajdonság az 1970. január 1-je óta eltelt milliszekundumok számának visszatérítésére szolgál, amely megegyezik az esemény tényleges kiváltásának első alkalommal.

Szintaxis

event.TimeStamp

Példa

$("button").click(function(event)(
$("span").text(event.timeStamp);
));

13. típus

Ez az esemény és annak kiváltott típusának figyelésére szolgál.

Szintaxis

event.type

Példa:

$("p").on("click dblclick and mouse related events", function(event)(
$("div").html("Event: " + event.type);
));

14. melyik ()

Ez a tulajdonság visszaadja a billentyűzetet vagy az egérgombot, amelyet az eseményhez megnyomtak.

Szintaxis

event.which

Példa

$("input").keydown(function(event)(
$("div").html("Key: " + event.which);
));

15. fókusz ()

Ez a tulajdonság és az esemény fókusza akkor fordul elő, amikor egy elem segítségével fókuszt kap, amely akkor fordul elő, ha egérkattintással vagy egy fülön navigál rá. A fókusz () metódus a fókusz esemény kiváltására vagy egy függvény csatolására szolgál a fókuszhoz kapcsolódó esemény bekövetkezésekor.

Szintaxis

$(selector).focus()

Példa

$("input").focus(function()(
$("span").css("display", "inline").fadeOut(200);
));

16. lebeg ()

Ez a lebegtetési módszer két olyan funkció meghatározására szolgál, amelyeket futtatni kell, amikor az egérmutató az összes kiválasztott elemre mutat. Ez a módszer mind a mouseleave, mind az egércentrikus eseményeket kiváltja. Ha csak egy függvény van megadva, akkor a mouseleave és az mouseenter eseményekre egyaránt fut.

Szintaxis

$(selector).hover(inFunction, outFunction)

Példa

$("p").hover(function()(
$(this).css("background-color", "blank");
), function()(
$(this).css("background-color", "yellow");
));

17. keydown ()

A keydown eseményhez kapcsolódó események sorrendje:

• Keydown: Ezt akkor használják, amikor a kulcs lefelé van.
• Billentyûnyomás: Ez a billentyűzet gombjának megnyomásakor jelentkezik
• Billentyûzet: Ahogy a neve is sugallja, erre a felsõ oldal gombjának megnyomására kerül sor.

Szintaxis

$(selector).keydown()

Példa

$("input").keydown(function()(
$("input").css("background-color", "black");
));

18. gombnyomás ()

A billentyű lenyomásával kapcsolatos események sorrendje:

• Keydown: Ezt akkor használják, amikor a kulcs lefelé van.
• Billentyûnyomás: Ez a billentyűzet gombjának megnyomásakor jelentkezik
• Billentyûzet: Ahogy a neve is sugallja, erre a felsõ oldal gombjának megnyomására kerül sor.

Szintaxis

$(selector).keypress()

Példa

$("input").keypress (function()(
$("input").css("background-color", "black");
));

19. billentyűzet ()

A keyup eseményhez kapcsolódó események sorrendje:

• Keydown: Ezt akkor használják, amikor a kulcs lefelé van.
• Billentyûnyomás: Ez a billentyűzet gombjának megnyomásakor jelentkezik
• Billentyûzet: Ahogy a neve is sugallja, erre a felsõ oldal gombjának megnyomására kerül sor.

Szintaxis

$(selector).keyup()

Példa

$("input").keyup(function()(
$("input").css("background-color", "black");
));

20. Élő ()

A jquery ezt a live () módszert vagy funkciót alkalmazza egy vagy több eseményalapú kezelő csatolásához, amelyeket különösen a kiválasztott elemek listájához kell használni, és meghatározza azt a funkciót is, amelyet futtatni kell az események bekövetkezésekor. Az eseménykezelők az élő () módszerrel vannak csatolva, amely mind az aktuális, mind a JÖVŐ elemekhez működni fog, amelyek alapja a kiválasztó elemek illesztése, amelyek olyanok lehetnek, mint a szkript által létrehozott új elem. A die () módszer felhasználható az élő () módszer megsemmisítésére.

Szintaxis

$(selector).live(event, data, function)

Példa

$("button").live("click", function()(
$("p").slideToggle();
));

21. Terhelés ()

A betöltési módszer az eseménykezelő csatolására szolgál a terhelésen alapuló eseményhez. A betöltési esemény egy meghatározott időpontban fordul elő. Ez az esemény akkor fordul elő, és akkor működik, amikor az URL-hez társított elemek, például kép, keret, szkript, iframe és az ablakobjektum. A betöltési esemény elindulhat, vagy nem, és a böngészőtől függ, még akkor is, ha a kép gyorsítótárban van. Van még egy AJAX módszer, amely a load () néven ismert jquery módszer, az úgynevezett paraméterektől függ.

Szintaxis

$(selector).load(function)

Példa

$("img").load(function()(
alert("stuff loaded.");
));

22. Mousedown

Ez az esemény csak akkor fordul elő, ha az egér bal egérgombját lenyomják az elem kiválasztott listáján. A mousedown () módszert vagy függvényt indítja ez az esemény, amely egy funkciót társít, és fut, amikor egy mousedown esemény történik. Ezt a módszert gyakran használják az mouseup () módszerrel együtt.

Szintaxis

$(selector).mousedown()

Példa

$("div").mousedown(function()(
$(this).after("Down button pressed with mouse.");
));

23. Ki ()

Ezt a módszert az eseménykezelő eltávolítására használják, amelyet az on () módszerhez csatoltak. Azt mondhatjuk, hogy az unbind () módszer, a die () módszer és az undelegate () módszer helyettesítése. Ez a módszer arra szolgál, hogy nagyfokú következetességet érjen el az API-ban, és mindig ajánlott ezt a módszert használni, mivel ezt a Jquery kódbázis egyszerűsítésére használják.

Szintaxis

$(selector).off(event, selector, function(eventObj), map)

Példa

$("button").click(function()(
$("p").off("click");
));

24. egérpad ()

Ez az esemény akkor fordul elő, amikor az egérmutató a megadott elem felett van, és belép, amikor elindítja az egércentrikus eseményt, vagy egy olyan függvény csatolására szolgál, amelyet futtatni lehet, amikor egércenter alapú esemény történik.

Szintaxis

$(selector).mouseenter()

Példa

$("p").mouseenter(function()(
$("p").css("background-color", "black");
));

25. mouseleave ()

Ez az esemény akkor fordul elő, amikor az egérmutató a megadott elem fölött van, és elhagyja, amikor elindítja az egér kilépési eseményét, vagy pedig egy olyan funkció leválasztására szolgál, amelyet futtatni lehet, amikor mouseleave alapú esemény fordul elő.

Szintaxis

$(selector).mouseleave()

Példa

$("p").mouseleave(function()(
$("p").css("background-color", "black");
));

A Jquery az egyik leggyakrabban használt könyvtár, amikor a fejlesztés előtérbe kerül. Ez egyedülálló funkciókat és sokféle funkciót kínál, amely elősegíti a fejlesztők és az emberek életét mindenki számára egyszerűen és kényelmesen. Remélem tetszett a cikkünk. Legyen híres a blogunkon, mint például ezek.

Ajánlott cikkek

Ez egy útmutató a jQuery eseményekhez. Itt tárgyaljuk a jQuery leggyakrabban használt és gyakran használt különféle eseményeinek listáját a Szintaxis és példák segítségével. Lehet, hogy megnézi a következő cikkeket is, ha többet szeretne megtudni -

1. jQuery Effects
2. jQuery Methods
3. jQuery attribútumok
4. Hogyan telepíthetem a Jquery-t?
5. A 8 legfontosabb jQuery választógép kód implementációval
6. Útmutató a JQuery Progress Bar példákhoz
7. Útmutató a különböző JavaScript eseményekhez