Notikumu apstrāde, izmantojot jQuery

notikumiem ir situācijas, kas rodas mūsu dokumentā HTML, var izraisīt pašas sistēmas situācijas vai lietotāja darbības. Jebkurā gadījumā, kad notiek notikums, ir iespējams veikt pēcapstrādi, izmantojot jQuery, lai mēs varētu sasniegt labākus rezultātus mūsu programmās.
Tas ir ārkārtīgi svarīgi, jo, zinot šo aspektu un izmantojot ietvaru, mēs varam palielināt savu tīmekļa lapu un lietojumprogrammu dinamiku.
Šī ir pirmā lieta, kas mums jāatbild, strādājot ar notikumiem jQuery, Mēs jau teicām, ka notikumi ir darbības vai situācijas, ko izraisa sistēma vai lietotājs, piemēram, kad dokuments ir pabeigts, sistēma ielādē notikumu gatavs vai gatavs, kad lietotājs noklikšķina uz elementa, tiek aktivizēts homonīms notikums.
Paturot prātā šos mazos piemērus, mēs varam redzēt pamata sintaksi jebkura veida notikumu apstrādei, kas ir šāda:

$ (atlasītājs) .on ("eventName", function () {….})

Atcerēsimies vai precizēsim, ka atlasītājs ir nosaukums, ar kuru mēs meklēsim elementu mūsu dokumentā, pēc tam ar metodes palīdzību .on () Pēc tam mēs varam pateikt, kāds notikums tam būtu jāuzklausa, un, kad tas to atklāj, tas var izpildīt anonīmu funkciju mūsu skripta sadaļā HTML.
Kaut ko interesantu varam izcelt, ka varam izmantot a hendleris dažādiem pasākumiemCitiem vārdiem sakot, mēs varam veikt vienu un to pašu darbību vairākās situācijās, mums ir tikai jāuzskaita dažādi notikumi, kas ir jāuzklausa, sintakse ir ļoti līdzīga tikko redzētajai.
$ (atlasītājs) .on ("notikuma nosaukums1 notikuma nosaukums2 notikuma nosaukums3….", funkcija () {….})
Tā kā mēs zinām visvienkāršāko, mums tas arī jāsāk zināt jQuery Tas vienmēr atvieglos mūsu kā izstrādātāju dzīvi, tāpēc ir nodrošinājis dažus īsceļus, lai izveidotu notikumu apstrādātājus, tāpēc mums nav jāiesniedz pilnīga deklarācija, kā redzējām iepriekšējā daļā, bet mēs izmantojam šos īsceļus tieši atlasītājam.
Apskatīsim dažus no interesantākajiem īsinājumtaustiņiem, ko izmanto izstrādātāji, jāatzīmē, ka tas nav pilnīgs pieejamo saraksts, lai iegūtu šo sarakstu, labāk ir doties tieši uz oficiālo dokumentāciju, tomēr nedaudz iesākt tēmu, ar tiem ir vairāk nekā pietiekami.
gatavs ()Darbojas, kad visi dokumenta elementi SAULE tie ir ielādēti, tas ir, kad vietne ir gatava, līdz ar to arī tās nosaukums. Jāatzīmē, ka tas ir sistēmas notikums.
Iesniegt ()Tas notiek, kad mēs izgatavojam a veidlapas iesniegšanaInteresanti ir tas, ka, veidlapai iestājoties, tā netiek sūtīta tradicionālā veidā, bet drīzāk tiek gaidīta, līdz šis notikums to pasaka, tāpēc mēs varam to izmantot kā starpposmu lauku apstiprināšanai, lai minētu tās izmantošanas piemēru.
klikšķis ()Tas darbojas, kad lietotājs to dara klikšķis ar peles rādītāju virs elementa, tas var būt no ievades veida lauka, lai iekļautu tādus elementus kā vai enkuri . Kā mēs varētu noteikt, ir notikums, ko izraisījis lietotājs.
aizmiglot ()Tas notiek, ja elements, uz kuru mēs šobrīd atrodamies, nav fokusēts, piemēram, mēs rakstām teksta laukā un pārejam uz nākamo lauku, šajā gadījumā pirmais lauks ir zaudējis fokusu un šis notikums tiek izpildīts.
fokuss ()Pretēji iepriekšējam notikumam tas notiek tieši tad, kad mēs koncentrējamies uz kādu elementu.
virziet kursoru ()Šis notikums notiek, kad virzām peles kursoru virs kāda elementa SAULE, parasti var piemērot un enkuri .
izvēlieties ()Notiek, kad mēs izvēlamies elementu laukā izvēlietiesPiemēram, mums ir nolaižamais saraksts, un mēs izvēlamies vienumu no tā satura.
mainīt ()Rodas, kad mainās elementa vērtība vai stāvoklis, piemēram, laukā izvēlieties, mainot opciju, kas redzama tur.
Tā kā mēs zinām mazliet par visbiežāk izmantotajiem notikumiem, mēs izveidosim nelielu dokumentu, kurā daži no tiem tiks izmantoti praksē vai nu pilnā sintakse, vai ar piemēriem, lai mēs varētu eksperimentēt ar abām formām.
Nākamajā kodā mēs redzēsim, kā sākotnēji mēs rakstīsim console.log () kad mums ir dokuments gatavs (), tad, kad novietojam peles kursoru virs a, mēs lietosim citu ziņojumu lai apstiprinātu, kā tas darbojas virziet kursoru, beidzot mēs redzēsim, kā to izmantot klikšķis () Y fokuss () lai parādītu citus ziņojumus. Apskatīsim iepriekš aprakstīto kodu:

 Notikuma piemērs 1
Pele virs šī Div !!

Uzraksti kaut ko šeit:
Koncentrējies uz mani:
$ (document) .ready (function () {console.log ("Gatavs notikums ir noticis !!");}); $ ("# hover event"). hover (function () {console.log ("Notika notikums!");}); $ ("# Click event"). Click (function () {console.log ("mēs esam izraisījuši klikšķa notikumu PALIELINĀT
Tas notiek, ja mēs vēlamies, lai elementam būtu dažādi saistītie notikumi, tādā veidā mēs varam labāk sakārtot savu kodu un nodrošināt mūsu elementam vairākas funkcijas.
Ir divas iespējas - izpildīt vienu un to pašu darbību vairākiem notikumiem vai izpildīt atšķirīgu darbību katram notikumam. Jebkurā veidā, kā mēs vēlamies, mums būs jāizmanto pilnīga sintakse, pirmā, kuru mēs jau definējām sākumā.
Apskatīsim, kā saistīt dažādas darbības vienam un tam pašam elementam ar dažādiem notikumiem. Šim nolūkam mums jāizmanto šāda sintakse:

 $ (atlasītājs) .on ({EventName1: function () {…}, EventName2: function () {…}}); 

Kā redzam, izmantojot šo sintakses veidu, mums nav jādara kaut kas līdzīgs šim:

 $ (atlasītājs) .ShortcutEvent1 (funkcija () {}); $ (atlasītājs) .ShortcutEvent2 (funkcija () {}); 

Kas ļauj mums būt organizētākiem, tomēr abi ir derīgi, un izstrādātāja ziņā ir piemērot to, kas viņam vislabāk atbilst.
Tā kā mēs zinām, kā saistīt vairākus notikumus ar kādu elementu, mēs to īstenosim praksē, mēs izvēlēsimies notikumus klikšķis () Y fokuss () Šajā piemērā mēs tos piemērosim diviem elementiem, pirmajā elementā mēs ģenerēsim vienādu atbildi uz katru no tiem, bet otrajā - katram notikumam būs sava atbilde. Apskatīsim kodu, kas mums jāizpilda, lai sasniegtu savu mērķi:

 Notikuma piemērs 2
Viens un tas pats rezultāts vairākiem notikumiem:

Dažādi rezultāti katrā pasākumā:
$ ("# element1"). on ("click focus", function () {console.log ("mēs to pašu rādām 3 notikumiem!");}); $ ("# element2"). on ({click: function () {console.log ("esam noklikšķinājuši uz elementa2");}, focus: function () {console.log ("mēs esam koncentrējušies uz elementu2") ;}}); 

Šeit mēs redzam, ka mums jābūt uzmanīgiem ar dažādu atbilžu otro formu dažādiem notikumiem, jo ​​notikumi neietilpst pēdiņās kā tad, kad mēs to darām pirmajā formā, kā arī ka mums ir jāiekļauj iekavās {} viss metodes iekšpusē .on (), šī ir kļūda, kas var rasties ļoti bieži, tāpēc, ievērojot šo piesardzību, mēs varam no tās izvairīties. Tagad redzēsim, kā izskatās mūsu piemērs, palaižot to savā pārlūkprogrammā:

PALIELINĀT
Mēs atzīmējam skaitītāju ar a 2. numurs kad notiek notikumi pirmajā elementā, tas nozīmē, ka mēs esam veikuši to pašu darbību divreiz, kā bijām plānojuši. Otrajā elementā mēs pamanām, ka mēs konsolē drukājam abas noteiktās darbības, lai gan mēs arī redzam, ka tās notiek citā secībā, nekā mēs tās ievietojām, tāpēc, ka notikums koncentrēties notiek pirms klikšķis notikumu hierarhijā, it īpaši, ja mēs izmantojam atslēgu TAB lai pārvietotos starp laukiem.
Šīs apmācības beigās mēs esam iemācījušies, kā mēs varam sākt ar notikumu apstrādes pasauli jQueryTas ir tikai mutes atvērējs, tomēr ar šīm mazajām funkcijām mēs varam sasniegt daudzas lietas mūsu lietojumprogrammās.

Vai šī apmācība jums palīdzēja?
Ja nē

PALĪDZIET UZLABOT ŠO PAMĀCĪBU!
Vai jūs domājat, ka varat labot vai uzlabot šo apmācību? Jūs varat nosūtīt izdevumu ar izmaiņām, kuras uzskatāt par noderīgām.
0 lietotāji ir rediģējuši šo apmācību. Rediģējiet un kļūstiet par atzītu ekspertu!
Rediģēt šo pamācību

LĪDZĪGAS PAMĀCĪBAS

Kā vilkt un satvert attēlus, izmantojot JQuery lietotāja saskarniKā izveidot vērpšanas vai ielādes ikonu, izmantojot JQueryJQuery spraudņi un bibliotēkas tīmekļa izstrādeiFlexigrid dinamiskais režģis ar JQuery un PHPJSON apstrāde ar Node.jsNotikumu apstrāde Node.jsBuferu apstrāde Node.jsRegulāras izteiksmes ar Jquery
Bez komentāriem, esiet pirmais!
Negaidiet un dodieties uz SolveticAtstājiet savus komentārus un izmantojiet lietotāja konta priekšrocības Pievienojieties mums!

Izveidot profiluReģistrējieties BEZMAKSAS, lai iegūtu savu Solvetic kontuReģistrējiet kontu
IdentificējietVai jums jau ir konts? Pierakstieties šeitIdentificējiet mani savā kontā




Informācija

 Publicēts 2014. gada 12. decembris 14:44
 Atjaunināts 2014. gada 14. decembris 05:44
 Apmeklējumi 3,7 tūkstoši
 LīmenisProfesionāls


Jaunākās JavaScript apmācības

Kā atjaunināt NPM, izmantojot PowerShell operētājsistēmā Windows 10
Kā vilkt un satvert attēlus, izmantojot JQuery lietotāja saskarni
Kā izveidot vērpšanas vai ielādes ikonu, izmantojot JQuery
Kā tulkot vietni vairākās valodās

Skatiet vairāk JavaScript