Uvod u jQuery događaje
JQuery je jedna od najpopularnijih i najraširenijih JavaScript knjižnica koja je razvijena i dizajnirana za pojednostavljenje HTML temeljene na DOM arhitekturi, tj. Svojstva objekta dokumenta kao što su čitanje, manipulacija i kretanje kroz stablo. Ostala svojstva iz jQuery-a kao što su rukovanje događajima, Ajax, styling i CSS animacija također su pojednostavljena. To je open-source i besplatna biblioteka koja se obično koristi u 73% od cca. 10 milijuna web stranica koje se danas koriste. Osnovne karakteristike Jquery-a uključuju svojstva koja se temelje na DOM elementima kao što su selektori, manipulacija i presjek stabala što rad na JQuery-ju čini mnogo zanimljivijim, lakšim i praktičnijim.
Koristi se za pružanje vrlo jednostavnog i jednostavnog sučelja koje se može koristiti za primjenu različitih vrsta nevjerojatnih efekata. Ove metode omogućuju brzo korištenje i primjenu najčešće korištenih značajki i njihovih učinaka, zajedno s golim ili minimalnim konfiguracijama. Osnovne naredbe kao što su one za prikazivanje i skrivanje elemenata prilično su iste, a ostale se također nalaze u istoj kategoriji s onim što bi ih svatko tko želio vidjeti. naredba show () u ovom se slučaju koristi za prikazivanje elemenata u potpuno zamotanoj, a za skrivanje tih značajki koristi se kombinovana naredba set and hid ().
Jquery je izrađen po mjeri koji se koristi za reagiranje na događaje na HTML stranici. Događaji sami po sebi su različite akcije posjetitelja na koje može reagirati web stranica. Drugim riječima, događaj se koristi da malo predstavi točan ili točan trenutak, posebno nešto što se dogodilo. Ovo može uključivati scenarije poput prelaska miša preko elementa, klika i odabir radio gumba te klika na element. Izraz požara ili pojam požara često se koristi uz događaj. Na primjer, događaj pritiska na tipku pokreće se ili se popularnije naziva "otpušten", to je uglavnom u trenutku kada pritisnete tipku. Ovdje je popis najčešćih i najčešće korištenih DOM događaja.
Događaji miša kao što su dblclick, mouseleave, mouseenter, click. Postoje i neki drugi događaji na tipkovnici, poput tipkovnice, tipkovnice i tipkovnice. Postoje i drugi oblici događaja kao što su promjena, slanje, zamagljivanje i fokusiranje događaja. Postoje i drugi događaji koji su događaji Document ili Window, kao što su veličina, učitavanje, pomicanje, istovar itd. U Jquery-u, većina događaja temeljenih na DOM-u ima odgovarajuću metodu jquery. Stoga dodijeliti novi događaj svim postojećim odlomcima na stranici, sintaksa ispod može se staviti na upotrebu.
Događaji i sintaksa jQueryja
Evo sljedećih događaja jQueryja sa sintaksom danom u nastavku
1. Kliknite ()
Ovaj se događaj događa kad se element klikne. Ova metoda () koristi se za aktiviranje klikanog elementa koji je poznat i kao događaj klika koji se koristi za povezivanje s funkcijom kad god se dogodi događaj povezan sa klikom.
Sintaksa
$(selector).click()
Ako želite priložiti funkciju ovom događaju klika,
$(selector).click(function)
Sljedeći korak uvijek dolazi zajedno s radnjom i okidačem koji formiraju stvarni rad i funkcioniranje funkcije, pa stoga kad god se događaj otpusti, funkcija treba prenijeti na događaj.
Primjer
$("p").click(function()(
// action which is triggered goes here!! ));
2. Dblclick ()
Ova se metoda koristi za dodavanje funkcije alata za obradu događaja na ponuđeni HTML element. Ova se funkcija izvršava kad korisnik udvostruči klik na zadani HTML element.
Sintaksa
$(selector).dblclick()
Primjer
$("p").dblclick(function()(
$(this).hide();
));
3. promjena ()
Ovaj se događaj događa kad god se vrijednost određenog elementa promijeni, tj. Radi samo za unos, textarea i odabrane elemente. Metoda change () koristi se za pokretanje događaja promjene ili onoga koji se veže za funkciju kad god se mora dogoditi događaj u vezi s promjenom.
Sintaksa
$(selector).change()
Primjer
$("input").change(function()(
alert("This text related to this has been changed.");
));
4. zamagljivanje ()
Taj se događaj povezan s zamućenjem događa samo kad element izgubi fokus. Metoda zamućivanja () koja se koristi za pokretanje događaja zamućenja ili ona koja se koristi za povezivanje funkcije koja se pokreće kad god se dogodi zamagljivanje. Ova se metoda često koristi metodom fokus ().
Sintaksa
$(selector).blur()
Primjer
$("input").blur(function()(
alert("The field has lost its focus.");
));
5. podataka
Ovo svojstvo event.data koristi se za sadržavanje neobvezno poslanih podataka koji se odnose na metodu događaja kada je izvršni rukovatelj strujom vezan.
Sintaksa
event.data
Primjer
$("p").each(function(i)(
$(this).on("click", (x:i), function(event)(
alert("This index + ". paragraph has data: " + event.data.x);
));
));
6. prostor s imenima
Ovo svojstvo koristi se za vraćanje prilagođenog prostora imena svaki put kada se događaj pokrene. Svojstvo postavljaju autori dodataka koji se mogu koristiti za različito rukovanje zadacima, što ovisi o imenu imena koji se koristi. Prostori imena koji počinju s podcrtavanjem rezervirani su imenski prostori za JQuery.
Sintaksa
event.namespace
Primjer
$("p").on("custom.someNamespace", function(event)(
alert(event.namespace);
));
7. PageX
Ovo je svojstvo vrste stranice koje se koristi za vraćanje položaja pokazivača miša koje je povezano s lijevim bočnim dijelom dokumenta. Ova vrsta imovine često se koristi događajem. Svojstvo PageY.
Sintaksa
event.PageX
Primjer
$(document).mousemove(function(event)(
$("span text ").text("X: " + event.pageX);
));
8. StranicaY
Ovo je svojstvo vrste stranice koje se koristi za vraćanje položaja pokazivača miša koje je povezano s gornjim rubom dokumenta. Ova vrsta imovine često se koristi događajem. Svojstvo PageX.
Sintaksa
event.PageY
Primjer
$(document).mousemove(function(event)(
$("span text ").text("Y: " + event.pageY);
));
9. rezultat
Svojstvo event.result koristi se da sadrži prethodnu ili zadnju vrijednost koju vraća upravitelj događaja, a što je posebno pokrenuto određenim događajem.
Sintaksa
event.result
Primjer
$("button").click(function()(
return "Hi there!";
));
10. prevenDefault ()
Ova metoda vezana uz događaj.preventDefault () koristi se za zaustavljanje događanja zadanog postupka određenog elementa. Primjeri ovog scenarija uključuju:
Sprječavanje gumba za prijavu od podnošenja obrasca
Sprečite vezu do određenog URL-a.
Određeni događaj, poput event.preventDefault () koristi se za provjeru da li se za pozivanje događaja koristi metoda ili funkcija prevenDefault ().
Sintaksa
event.preventDefault()
Primjer
$("a").click(function(event)(
event.preventDefault();
));
11. Event.target ()
Ovo se svojstvo koristi za vraćanje DOM elementa koji treba aktivirati ovaj događaj. Najčešće je korisno usporediti ciljni događaj s tim da bi se utvrdilo radi li se o određenom događaju zbog događaja zvanog bubbing.
Sintaksa
event.target
Primjer
$("p, button, h2").click(function(event)(
$("div").html("Hi, triggered is " + event.target.NameNode + " new element.");
));
12. timeStamp
Ovo svojstvo koristi se za vraćanje broja milisekundi od vremena 1. siječnja 1970., što odgovara prvom trenutku kada je događaj prvi put pokrenut.
Sintaksa
event.TimeStamp
Primjer
$("button").click(function(event)(
$("span").text(event.timeStamp);
));
13. vrsta
To se koristi za nadgledanje događaja i njegove vrste koja se pokreće.
Sintaksa
event.type
Primjer:
$("p").on("click dblclick and mouse related events", function(event)(
$("div").html("Event: " + event.type);
));
14. koji ()
Ovo svojstvo koristi se za vraćanje tipke tipkovnice ili tipke miša koja je pritisnuta za događaj.
Sintaksa
event.which
Primjer
$("input").keydown(function(event)(
$("div").html("Key: " + event.which);
));
15. fokus ()
Ovo svojstvo i fokus ovog događaja pojavljuju se kada se element koristi za dobivanje fokusa do kojeg dolazi kada je odabran klikom miša ili navigacijom na kartici. Metoda fokusa () koristi se za pokretanje događaja fokusiranja ili dodavanje funkcije koja se pokreće kada se dogodi događaj u fokusu.
Sintaksa
$(selector).focus()
Primjer
$("input").focus(function()(
$("span").css("display", "inline").fadeOut(200);
));
16. lebdeći pokazivač ()
Ova metoda lebdenja koristi se za specificiranje dviju funkcija koje se pokreću kada pokazivač miša prelazi preko svih odabranih elemenata. Ova metoda pokreće događaje pucanja miša i miša. Ako je specificirana samo jedna funkcija, ona će se pokrenuti i za događaje puštanja miša i miša.
Sintaksa
$(selector).hover(inFunction, outFunction)
Primjer
$("p").hover(function()(
$(this).css("background-color", "blank");
), function()(
$(this).css("background-color", "yellow");
));
17. tipka ()
Redoslijed događaja koji su povezani s događajem ključeva su:
- Keydown: koristi se kada se ključ nalazi na putu prema dolje.
- Pritisak na tipku : To se događa kada pritisnete tipku na tipkovnici
- Tipkovnica: Kao što ime sugerira, koristi se kad se pritisne tipka prema gore.
Sintaksa
$(selector).keydown()
Primjer
$("input").keydown(function()(
$("input").css("background-color", "black");
));
18. pritiskanje tipke ()
Redoslijed događaja koji su povezani s događajem pritiska na tipku je:
- Keydown: koristi se kada se ključ nalazi na putu prema dolje.
- Pritisak na tipku : To se događa kada pritisnete tipku na tipkovnici
- Tipkovnica: Kao što ime sugerira, koristi se kad se pritisne tipka prema gore.
Sintaksa
$(selector).keypress()
Primjer
$("input").keypress (function()(
$("input").css("background-color", "black");
));
19. tipkovnica ()
Redoslijed događaja koji su povezani s događajem tipkovnice je:
- Keydown: koristi se kada se ključ nalazi na putu prema dolje.
- Pritisak na tipku : To se događa kada pritisnete tipku na tipkovnici
- Tipkovnica: Kao što ime sugerira, koristi se kad se pritisne tipka prema gore.
Sintaksa
$(selector).keyup()
Primjer
$("input").keyup(function()(
$("input").css("background-color", "black");
));
20. Uživo ()
Ova živi () metoda ili funkcija jqueryja koristi se za priključivanje jednog ili više postupaka utemeljenih na događajima koji će se koristiti posebno za odabrane popise elemenata, a također određuje funkciju koja će se izvoditi tamo gdje se događaji događaju. Svi alati za obradu događaja priloženi su metodom live () koja će raditi i za trenutne i za BUDUĆE elemente koji se temelje na podudaranju selektorskih elemenata koji mogu biti poput novog elementa stvorenog u skripti. Metoda die () može se koristiti za uništavanje žive () metode.
Sintaksa
$(selector).live(event, data, function)
Primjer
$("button").live("click", function()(
$("p").slideToggle();
));
21. Učitavanje ()
Način učitavanja koristi se za dodavanje alata za obradu događaja na događaj temeljen na opterećenju. Događaj učitavanja događa se svaki put kad se navedeni događaj dogodi i djeluje kad god se elementi pridruženi URL-u, kao što su slika, okvir, skripta, iframe i objekt prozora. Događaj učitavanja može ili ne mora pokrenuti, a ovisi o pregledniku čak i ako je slika u predmemoriranju. Tu je i AJAX metoda koja je jquery metoda poznata kao load (), a koja se zove ovisi o parametrima.
Sintaksa
$(selector).load(function)
Primjer
$("img").load(function()(
alert("stuff loaded.");
));
22. Mousedown
Ovaj se događaj događa samo kada lijevi gumb pokazivača miša pritisnete odabrani popis elementa. Metoda ili funkcija mousedown () koristi se za pokretanje ovog događaja koji povezuje funkciju i pokreće se kad god se dogodi mousedown događaj. Ova se metoda često koristi zajedno s metodom mouseup ().
Sintaksa
$(selector).mousedown()
Primjer
$("div").mousedown(function()(
$(this).after("Down button pressed with mouse.");
));
23. Isključeno ()
Ova se metoda koristi za uklanjanje alata za obradu događaja koji je priložen zajedno s metodom on (). Može se reći da je zamjena metode unbind (), die () i undelegate () metoda. Ova se metoda koristi da bi se postiglo puno dosljednosti u API-ju te se uvijek preporučuje koristiti ovu metodu jer se koristi za pojednostavljenje baze kod Jqueryja.
Sintaksa
$(selector).off(event, selector, function(eventObj), map)
Primjer
$("button").click(function()(
$("p").off("click");
));
24. mouseenter ()
Ovaj se događaj događa kad god je pokazivač miša iznad navedenog elementa i uđe kad aktivira događaj mišenter ili se koristi za pridruživanje funkcije koja se može koristiti za pokretanje kad god se dogodi događaj koji se temelji na mišentru.
Sintaksa
$(selector).mouseenter()
Primjer
$("p").mouseenter(function()(
$("p").css("background-color", "black");
));
25. lišće miša ()
Ovaj se događaj događa kad god je pokazivač miša iznad navedenog elementa i odlazi kad pokreće događaj napuštanja miša ili se koristi za uklanjanje funkcije koja se može koristiti za pokretanje kad god se dogodi događaj koji se temelji na podmetanju miša.
Sintaksa
$(selector).mouseleave()
Primjer
$("p").mouseleave(function()(
$("p").css("background-color", "black");
));
Jquery je jedna od najčešće korištenih knjižnica kada je u pitanju razvoj na prvom mjestu. To pruža jedinstvene značajke i širok spektar funkcija koje pomažu u olakšavanju i udobnosti života programera i ljudi diljem svijeta. Nadam se da vam se svidio naš članak. Pratite naš blog za više ovih.
Preporučeni članci
Ovo je vodič za jQuery događaje. Ovdje ćemo raspravljati o popisu najčešćih i najčešće korištenih različitih događaja jQueryja sa sintaksom i primjerima. Možete također pogledati sljedeće članke da biste saznali više -
- jQuery efekti
- jQuery metode
- JQuery Atributi
- Kako instalirati Jquery?
- Top 8 jQuery birača s implementacijom koda
- Vodič za primjere JQuery Progress Bar-a
- Vodič za različite JavaScript događaje