✅ Įvykių tvarkymas naudojant „jQuery“

Turinys

Ar ši pamoka jums padėjo?

The įvykius yra situacijų, kurios pasitaiko mūsų dokumente HTML, gali sukelti pačios sistemos situacijos arba vartotojo veiksmai. Bet kuriuo atveju, įvykus įvykiui, galima atlikti papildomą apdorojimą naudojant „jQuery“, kad galėtume pasiekti geresnių rezultatų savo programose.
Tai labai svarbu, nes žinodami šį aspektą ir naudodamiesi sistema, galime suteikti savo tinklalapiams ir programoms daugiau dinamiškumo.
Tai pirmas dalykas, į kurį turėtume atsakyti dirbdami su įvykiais „jQuery“, Mes jau sakėme, kad įvykiai yra veiksmai ar situacijos, kuriuos sukelia sistema arba vartotojas, pavyzdžiui, kai dokumentas baigiamas įkelti, sistema suaktyvina įvykį pasiruošę arba pasiruošę, kai vartotojas spustelėja elementą, suaktyvinamas homoniminis įvykis.
Turėdami omenyje šiuos nedidelius pavyzdžius, galime pamatyti pagrindinę bet kokio tipo įvykių sintaksę, kuri yra tokia:

$ (selektorius) .on ("eventName", function () {….})

Prisiminkime arba patikslinkime, kad selektorius yra pavadinimas, kuriuo mes surasime elementą mūsų dokumente, tada naudodami metodą .on () Tada galime pasakyti, kokio įvykio jis turėtų klausytis, ir kai jis aptinka, jis gali atlikti anoniminę funkciją mūsų scenarijaus skiltyje HTML.
Kažką įdomaus galime pabrėžti, kad galime naudoti a tvarkytojas įvairiems renginiamsKitaip tariant, tą patį veiksmą galime atlikti keliose situacijose, turime tik išvardyti skirtingus įvykius, kurių reikia klausytis, sintaksė labai panaši į ką tik matytą.
$ (selektorius) .on ("eventname1 eventname2 eventname3….", function () {….})
Kadangi mes žinome pagrindinius dalykus, mes taip pat turime pradėti tai žinoti „jQuery“ Tai visada palengvins mūsų, kaip kūrėjų, gyvenimą, todėl suteikė keletą nuorodų, skirtų renginių tvarkytojams kurti, todėl neprivalome pateikti visos deklaracijos, kaip matėme ankstesnėje dalyje, tačiau šiuos sparčiuosius klavišus taikome tiesiai parinkikliui.
Pažvelkime į kai kuriuos įdomiausius kūrėjų naudojamus sparčiuosius klavišus, reikia pažymėti, kad tai nėra visas turimų sąrašas, norint gauti šį sąrašą, geriau eiti tiesiai į oficialius dokumentus, tačiau šiek tiek pradėti tema, tai yra daugiau nei pakankamai.
paruoštas ()Veikia, kai visi dokumento elementai SAULĖ jie yra įkelti, tai yra, kai svetainė yra paruošta, taigi ir jos pavadinimas. Reikėtų pažymėti, kad tai yra sistemos įvykis.
Pateikti ()Tai atsitinka, kai darome a formos pateikimasĮdomu tai, kad kai forma atsiranda, ji nesiunčia tradiciniu būdu, o laukia, kol tai pasakys šis įvykis, todėl galime ją naudoti kaip tarpinį tašką lauko patvirtinimams, kad būtų paminėtas jos naudojimo pavyzdys.
spustelėkite ()Jis veikia, kai vartotojas tai daro spustelėkite su pelės žymekliu virš elemento, jis gali būti iš įvesties tipo lauko, apimantis tokius elementus kaip arba inkarai . Kaip mes galėtume pasakyti, tai įvykis, kurį sukėlė vartotojas.
neryškus ()Tai įvyksta, kai elementas, kuriame šiuo metu esame, yra nefokusuotas, pavyzdžiui, rašome teksto lauke ir pereiname į kitą lauką, šiuo atveju pirmasis laukas praranda dėmesį ir šis įvykis įvykdomas.
sutelkti dėmesį ()Priešingai nei ankstesnis įvykis, tai atsitinka tik tada, kai sutelkiame dėmesį į elementą.
užveskite pelės žymeklį ()Šis įvykis įvyksta, kai užvedame pelės žymeklį virš kai kurio elemento SAULĖ, paprastai gali būti taikomas ir inkarai .
pasirinkti ()Atsiranda, kai pasirenkame lauko elementą pasirinktiPavyzdžiui, turime išskleidžiamąjį sąrašą ir pasirenkame elementą iš jo turinio.
keisti ()Atsiranda, kai keičiasi elemento vertė arba būsena, pavyzdžiui, lauke pasirinkti, kai pakeičiame parinktį, kurią matome ten atsispindinčią.
Kadangi šiek tiek žinome apie dažniausiai naudojamus įvykius, sukursime nedidelį dokumentą, kuriame kai kurie iš jų bus panaudoti praktiškai, naudojant visą jų sintaksę arba pavyzdžius, kad galėtume eksperimentuoti su abiem formomis.
Šiame kode pamatysime, kaip iš pradžių rašysime console.log () kai turime dokumentą paruoštas (), tada, kai užvesime pelę virš a, pritaikysime kitą pranešimą patvirtinti, kaip tai veikia slinkti, pagaliau pamatysime, kaip naudoti spustelėkite () Y sutelkti dėmesį () rodyti kitus pranešimus. Pažvelkime į pirmiau aprašytą kodą:

 Įvykio pavyzdys 1
Perkelkite pelę virš šio div !!

Rašyk ką nors čia:
Susikoncentruok ties manimi:
$ (dokumentas) .ready (function () {console.log ("Paruoštas įvykis įvyko !!");}); $ ("# hover event"). hover (function () {console.log ("Įvyko įvykis!");}); $ ("# Paspaudimo įvykis"). Spustelėkite (funkcija () {console.log ("suaktyvinome paspaudimo įvykį DIDELIS
Taip atsitinka, kai norime, kad su elementu būtų susiję skirtingi įvykiai, tokiu būdu galime geriau sutvarkyti savo kodą ir suteikti daug funkcijų mūsų elementui.
Yra dvi galimybės: atlikti tą patį veiksmą keliems įvykiams arba atlikti skirtingą veiksmą kiekvienam, bet kokiu būdu, kuriuo norime, turėsime naudoti visą sintaksę, pirmąją, kurią jau apibrėžėme pradžioje.
Pažiūrėkime, kaip susieti skirtingus veiksmus su skirtingais to paties elemento įvykiais. Tam turime naudoti tokią pagrindinę sintaksę:

 $ (selektorius) .on ({Įvykio pavadinimas1: funkcija () {…}, įvykio pavadinimas2: funkcija () {…}}); 

Kaip matome, kai naudojame šią sintaksės formą, mes vengiame daryti kažką panašaus:

 $ (selektorius) .ShortcutEvent1 (function () {}); $ (selektorius) .ShortcutEvent2 (function () {}); 

Kas leidžia mums būti labiau organizuotiems, tačiau abu yra galiojantys ir tik kūrėjas turi pritaikyti tą, kuris jam labiausiai tinka.
Kadangi mes žinome, kaip susieti kelis įvykius su elementu, mes tai pritaikysime praktikoje, mes pasirinksime įvykius spustelėkite () Y sutelkti dėmesį () Šiame pavyzdyje mes juos pritaikysime dviem elementams, pirmajame elemente sugeneruosime tą patį atsakymą kiekvienam iš jų, o antrame - kiekvienas įvykis turės savo atsakymą. Pažiūrėkime kodą, kurį turime atlikti, kad pasiektume savo tikslą:

 2 įvykio pavyzdys
Tas pats kelių įvykių rezultatas:

Skirtingi kiekvieno įvykio rezultatai:
$ ("# element1"). on ("paspaudimo fokusavimas", funkcija () {console.log ("tą patį rodome 3 įvykiams!");}); $ ("# element2"). on ({click: function () {console.log ("mes spustelėjome elementą2");}, focus: function () {console.log ("mes sutelkėme dėmesį į elementą2") ;}}); 

Čia mes matome, kad turime būti atsargūs su antrąja skirtingų atsakymų į skirtingus įvykius forma, nes įvykiai nėra įtraukiami į kabutes, kaip kai tai darome pirmoje formoje, taip pat, kad mes turime juos uždėti skliausteliuose {} viskas metodo viduje .on (), tai klaida, kuri gali atsirasti labai dažnai, todėl laikydamiesi šių atsargumo priemonių galime jos išvengti. Dabar pažiūrėkime, kaip atrodo mūsų pavyzdys, kai jį paleidžiame savo naršyklėje:

DIDELIS
Mes pažymime skaitiklį su a numeris 2 kai įvyksta pirmojo elemento įvykiai, tai reiškia, kad tą patį veiksmą atlikome du kartus, kaip planavome. Antrajame elemente pastebime, kad konsolėje spausdiname du nustatytus veiksmus, nors matome, kad jie vyksta kita tvarka, nei mes juos įdėjome, taip yra todėl, kad įvykis sutelkti dėmesį atsitinka prieš spustelėkite įvykių hierarchijoje, ypač jei naudojame raktą TAB judėti tarp laukų.
Šios pamokos pabaigoje mes sužinojome, kaip galime pradėti renginių tvarkymo pasaulį „jQuery“Tai tik burnos atidarymo priemonė, tačiau su šiomis mažomis funkcijomis savo programose galime pasiekti daug dalykų.

Ar ši pamoka jums padėjo?
Jei ne

PADĖKITE TOBULINTI PAMOKĄ!
Ar manote, kad galite pataisyti ar patobulinti šią mokymo programą? Galite išsiųsti leidimą su pakeitimais, kurie, jūsų nuomone, yra naudingi.
0 vartotojų redagavo šią mokymo programą. Redaguokite ir tapkite pripažinta eksperte!
Redaguokite šią mokymo programą

PANAŠŪS PAMOKOS

Kaip vilkti ir patraukti vaizdus naudojant „JQuery“ vartotojo sąsająKaip sukurti suktuką ar įkėlimo piktogramą naudojant „JQuery“„JQuery“ papildiniai ir bibliotekos žiniatinklio kūrimui„Flexigrid“ dinaminis tinklelis su „JQuery“ ir PHPJSON tvarkymas naudojant „Node.js“Įvykių tvarkymas „Node.js“Buferių tvarkymas „Node.js“Įprastos išraiškos naudojant „Jquery“
Be komentarų, būk pirmas!
Nelaukite ilgiau ir įeikite į „Solvetic“Palikite savo komentarus ir pasinaudokite vartotojo abonementu Prisijunkite prie mūsų!

Sukurti paskyrąUžsiregistruokite NEMOKAMAI, kad gautumėte „Solvetic“ paskyrąUžregistruokite paskyrą
NustatykiteAr jau turite paskyrą? Prisijunk čiaNustatykite mane savo paskyroje




Informacija

 Paskelbta 2014 m. Gruodžio 12 d. 14:44
 Atnaujinta 2014 m. Gruodžio 14 d. 05:44
 Apsilankymai 3,7 tūkst
 LygisProfesionalus


Naujausios „JavaScript“ pamokos

Kaip atnaujinti NPM naudojant „PowerShell“ sistemoje „Windows 10“
Kaip vilkti ir patraukti vaizdus naudojant „JQuery“ vartotojo sąsają
Kaip sukurti suktuką ar įkėlimo piktogramą naudojant „JQuery“
Kaip versti svetainę į kelias kalbas

Žr. Daugiau „JavaScript“