Gjatë viteve të fundit, ne kemi parë zhvillimi i shpejtë gjuhët e zhvillimit ndërfaqet e jashtme, dhe veçanërisht HTML me specifika të reja në HTML5, si dhe Versionet CSS 3 me shumë veçori të reja.
Tani kemi mundësinë të bëjmë shumë gjëra interesante që më parë nuk mund të bëheshin pa ndihmë javascript dhe imazhe, duke përfshirë qoshe të rrumbullakosura, gradim, shabllone adaptive, rrjete, transparencë ngjyrash dhe shumë e shumë më tepër.
Shumë njerëz humbën aftësinë për të menaxhuar Ngjarjet e Klikove në CSS. Në fakt, shumë njerëz mendojnë se ne nuk kemi nevojë për këtë opsion pasi ndërveprimi është më shumë një funksionalitet javascript. Në parim, gjithçka është e qartë këtu, ndoshta nuk është shumë i përshtatshëm për të përdorur javascript për ngjarjet më të thjeshta të klikimeve.
Në çdo rast, sot CSS nuk na ofron asnjë metodat zyrtare kontrolloni ngjarjet e klikimeve në CSS. Por ka disa truke shumë interesante që mund t'i përdorim për të "zbuluar" klikimet (klikimet) vetëm me kodin CSS, pa përdorur javascript dhe për këtë do të flasim sot.
Mohim përgjegjësie
Ky artikull synon t'ju tregojë për aftësinë për të kontrolluar ngjarjet e klikimeve me CSS. Kjo nuk është mjaft e përshtatshme për t'u përdorur në projekte serioze. Ju lutemi vini re se i gjithë ky artikull nuk është asgjë më shumë se një eksperiment dhe nuk është në asnjë mënyrë një udhëzues për menaxhimin e ngjarjeve të klikimeve në faqen tuaj të internetit ose aplikacionin tuaj.
Për më tepër, disa nga teknikat e paraqitura nuk mbështeten mirë në shfletues, që do të thotë se në këtë artikull ne duam vetëm të demonstrojmë se si mund të zgjeroni fushën e CSS.
Hack me kutinë e kontrollit
Gjë e mrekullueshme! Jemi të sigurt që të gjithë ju keni dëgjuar më parë për hakimin e kutisë së kontrollit. Kjo është ndoshta mënyra më e zakonshme për të trajtuar ngjarjet e klikimeve në CSS. Ai bazohet në... kutinë e zgjedhjes.
Avantazhi i kutisë së kontrollit është se është binare. Ose theksohet ose nuk është. Dhe nuk ka asnjë mënyrë për të nxjerrë në pah diçka "gjysmë" apo diçka të tillë. Kjo është arsyeja pse hakimi i kutisë së kontrollit është mjaft mënyrë e besueshme ndezja e ngjarjeve të klikimeve në CSS. Le të marrim një shembull.
Si punon
Kodi HTML
Kodi CSS
Për t'u ndryshuar
ngjyra: e zezë;
}
ngjyra: e kuqe;
}
Siç mund ta shihni, ai bazohet në pseudo-klasën :checked dhe përzgjedhësin kryesor të motrës/vëllait ~. Ju lutemi vini re se ai do të funksionojë gjithashtu me përzgjedhësin ngjitur +. Në përgjithësi, shkon kështu: "nëse zgjidhet kutia e kontrollit, atëherë elementet e mëposhtëm me klasë.të ndryshohet do të jetë e kuqe”.
Pra, kutia e zgjedhjes nuk është vërtet shumë tërheqëse, por mund ta dekoroni lehtësisht duke fshehur kutinë e zgjedhjes dhe duke i bashkangjitur një etiketë. Diçka si në vijim:
Do të jem i kuq! Do të jetë legjendë... Prisni...
Pra, ne fshehim kutinë e zgjedhjes dhe përdorim një etiketë për të ndezur ngjarjen e klikimit.
Hyrja (
pozicioni: absolut;
krye: -9999px;
majtas: -9999px;
}
etiketë (
shfaqja:blloku;
sfond: #08C;
mbushje: 5 px
kufiri: 1px solid rgba(0,0,0,.1);
kufiri-rreze: 2px
ngjyra: e bardhë;
pesha e shkronjave: bold;
}
input:checked ~ .to-be-change (
ngjyra: e kuqe;
}
Kështu, duhet të përfundoni me diçka si një buton që fillon procesin e ndryshimit të ngjyrës së elementit të paragrafit. A nuk është mirë? Duke klikuar sërish butonin, ngjyra do të kthehet në të zezë.
(vini re se ka mundësi të ndryshme fsheh kutinë e zgjedhjes, dhe më e popullarizuara është shfaqja: asnjë.)
Avantazhet dhe disavantazhet
Përparësitë:
* Binar (i zgjedhur ose i pazgjedhur)
* Klikimi i përsëritur ju lejon të ktheheni pozicioni fillestar
* Ju lejon të aplikoni një sërë ngjarjesh klikimesh (nëse zgjidhet kutia e parë dhe zgjidhet kutia e dytë, atëherë mund të bëni sa më poshtë).
Të metat:
* Elementet duhet të ndajnë të njëjtin element prind (vëllezërit dhe motrat)
* Kërkon kod shtesë HTML (elementi hyrës, etiketa, etj.)
*Dy truke shtesë janë të nevojshme për ta bërë metodën të funksionojë shfletuesit celularë(për këtë do t'ju duhet të lexoni artikullin më poshtë)
Metoda: objektiv
Ekziston një metodë tjetër e njohur si "simulimi" i një ngjarje klikimi në CSS duke përdorur pseudo-class :target. Kjo pseudo-klasë është shumë e ngjashme me :hover.
Ngjarja speciale :target pseudo-class varet nga ajo që ne e quajmë "identifikim i fragmentit". E thënë thjesht, kjo pseudo-klasë i referohet një hashtag, të cilin ndonjëherë e shihni në fund të një URL. Një përputhje ndodh kur hashtag-u dhe ID-ja e artikullit janë të njëjta.
Si punon
Kodi HTML
kliko mua!
Do të jem i kuq! Do të jetë legjendë... Prisni...
Kodi CSS
Për t'u ndryshuar
ngjyra: e zezë;
}
Për t'u ndryshuar: target (
ngjyra: e kuqe;
}
Kur klikoni në lidhjen (href="#id"), URL-ja ndryshon dhe ju shkoni te ankorimi #id në faqe. Në këtë pikë, elementi i caktuar nga id-ja e dhënë mund të specifikohet duke përdorur pseudo-klasën :target.
Avantazhet dhe disavantazhet
Përparësitë:
* Shumë css e thjeshtë
* E shkëlqyeshme për të theksuar seksionet
Të metat:
* Konfuzion i historisë së shfletuesit
* Ka një kërcim faqeje (kur kaloni në spirancë)
* Etiketa e ankorimit ose hakimi i URL-së kërkohet për të aktivizuar hashtag-un
* Punon vetëm në një element (sepse ID-të janë gjithmonë unike)
* Nuk ka asnjë mënyrë për t'u kthyer në pozicionin origjinal pa përdorur një hashtag tjetër, lidhje ose hak URL.
Mbështetja e shfletuesit nuk është e mirë, por nuk është aq e keqe. Gjithçka shfletues modern mbështesin këtë qasje, përveç (IE 6-8). Duke filluar nga IE9, mbështetja është e qëndrueshme.
Metoda: fokus
Le të shohim një mënyrë tjetër duke përdorur një pseudo-klasë, këtë herë do të jetë :focus. Këtu thelbi është pothuajse i njëjtë, përveç se nuk ka nevojë të ndryshoni URL-në. Metoda synon të përqendrojë vëmendjen e përdoruesit në një element specifik.
Kur jeni në një faqe interneti, mund të klikoni në skedat për të lundruar elemente të ndryshme. Kjo është shumë e përshtatshme kur plotësoni formularët - mund të lëvizni nga një fushë në tjetrën pa përdorur miun. Ai gjithashtu ndihmon njerëzit me shikim të dëmtuar të lundrojnë në faqe.
Është e rëndësishme të theksohet se mund të përqendroheni vetëm në disa elementë, duke përfshirë lidhjet, fushat e hyrjes dhe jo në të tjerët (paragrafët, ndarjet dhe shumë të tjerë). Në fakt, mund të përqendroheni edhe në to, por do t'ju duhet të shtoni një atribut tabindex me një vlerë numerike.
Si punon
Kodi HTML
kliko mua!
Do të jem i kuq! Do të jetë legjendë... Prisni...
Kodi CSS
Hapësirë: fokus ~ .për t'u ndryshuar (
ngjyra: e kuqe;
}
Pra, kur klikoni në një element span, ose lundroni me një buton tab, shfletuesi fokusohet në elementin që përputhet me pseudo-klasën :focus. Përzgjedhësi i vëllezërve dhe motrave ngjitur do të bëjë pjesën tjetër. Shumë e thjeshtë, apo jo? Nëse nuk ju pëlqen të merreni me tabindex, thjesht mund të përdorni një lidhje me # href. Gjithçka do të funksionojë.
Avantazhet dhe disavantazhet
Përparësitë:
* Kod shumë i thjeshtë CSS dhe HTML
* E shkëlqyeshme për navigim ose diçka të ngjashme
Të metat:
* Kërkon ose një element që lejon fokusin ose atributin tabindex
* Pseudo-elementi përputhet vetëm kur elementi është i fokusuar (që do të thotë se gjithçka ngatërrohet nëse klikoni diku tjetër).
Hak me tranzicion
Kjo është ndoshta një nga mënyrat më të pabesueshme për të trajtuar ngjarjet e klikimeve në CSS. Seriozisht, kjo është e çmendur. Kjo teknikë u shpik nga Joel Besada dhe ka qenë gjithmonë një nga truket tona të preferuara të CSS.
Në fund të fundit është vendosja e stilit CSS në tranzicionin CSS. Po, e lexuat mirë, në tranzicionin CSS. Në fakt, ideja është mjaft e thjeshtë. Ai bazohet në aplikimin e një vonese pseudo të pafundme në ndryshim, e cila parandalon kthimin në vlerën origjinale. Gjithçka tingëllon konfuze, por në fakt është mjaft e thjeshtë. Ju lutemi hidhini një sy kodit.
Si punon
Kodi HTML
kliko mua!
Do të jem i kuq! Do të jetë legjendë... Prisni...
Kodi CSS
Për t'u ndryshuar
tranzicioni: të gjitha 0-të 9999999;
}
span:active ~ .për t'u ndryshuar (
tranzicioni: të gjitha 0-të;
ngjyra: e kuqe;
}
Thelbi i njoftimit të parë është shtyrja e çdo ndryshimi me afërsisht 116 ditë, gjë që na lejon të sigurohemi që ndryshimet të mbeten sapo të zbatohen. Ata nuk janë të pafund, por duket kështu, apo jo?
Por ne nuk duam që ndryshimet të aplikohen 116 ditë pas klikimit, duam që gjithçka të ndodhë menjëherë! Pra, këtu duhet të rishkruajmë vonesën në momentin e klikimit (pseudo-klasa: aktive) në mënyrë që të aplikojmë ndryshimet. Pastaj, kur të bëhet klikimi, i vjetër parametri i tranzicionit do të kthehet, duke e kthyer parametrin e vonesës në 9999999s, gjë që do të parandalojë kthimin në pozicionin origjinal.
Avantazhet dhe disavantazhet
Përparësitë:
* Ide tepër e zgjuar
* Ruan vlerën e dëshiruar kur butoni lëshohet, edhe nëse tranzicioni nuk është përfunduar ende (shih më poshtë)
Siç tha Joel Besada:
“Gjëja interesante këtu është se ju mund ta përfundoni tranzicionin në gjysmë të rrugës dhe parametri do të ruajë të njëjtën vlerë që kishte në momentin e caktuar të tranzicionit. Për shembull, le të themi se kemi një tranzicion linear të opacitetit nga 1 në 0 në 2 sekonda, por ne e vazhdojmë atë vetëm për 1 sekondë. Kjo do të thotë, parametri i opacitetit duhet të ndalet në 0.5, pasi vonesa nuk lejon që parametri të kthehet prapa. Nëse tani e drejtojmë tranzicionin përsëri në opacity, ai do të vazhdojë nga 0.5 në vend që të luajë nga fillimi."
Të metat:
* Mbështetje jo shumë e mirë e shfletuesit (nuk mbështetet në IE9 dhe Opera Mini)
* Punon vetëm me vlera që lejojnë kalimin
* Nuk ka asnjë mënyrë për t'u kthyer në vlerën origjinale
* Në fakt, tranzicioni nuk është i pafund nëse prisni derisa të kalojnë 116 ditë.
Në përfundim
Pra, sot, disi, ne tashmë mund të përcaktojmë klikimet duke përdorur CSS. Domethënë ne kemi mundësinë edhe pse është më shumë si hak. Disa metoda janë më të përshtatshme për situata specifike se të tjerat, por në përgjithësi, vështirë se ia vlen ta përdorni këtë në një projekt real.
Tab Atkins Jr. disa muaj më parë. Një propozim i tërë është shkruar për pozicionet e ndërprerësit CSS. Ju mund t'i hidhni një sy punës së tij:
gjendjet e ndërrimit: asnjë |
grupi i ndërrimit: asnjë |
toggle-share: asnjë |
ndërrimi-fillestar:
…ku:
* ndërroni gjendjet përfaqëson funksioni bazë, i cili ju lejon të aktivizoni / çaktivizoni funksionalitetin e ndërrimit. Asnjë do të thotë pozicion me aftësi të kufizuara, 2 ose më shumë janë përgjegjës për të dispozita të ndryshme.
* ndërroj grupin zbaton funksionalitetin e një butoni radio. Nëse klikoni në elementin e ndërrimit të grupit me caktoni parametrin përveç asnjërit, të gjithë elementët që ndajnë të njëjtin grup ndërrimi do të vendosen automatikisht në pozicionin e parë (off).
* ndërroj-ndaj zbaton funksionalitetin e shkurtoreve. Kur klikoni mbi një element me toggle-share, ai vepron sikur të keni klikuar mbi të gjithë elementët që tregon.
* ndërrim-fillestar vendos pozicionin fillestar të çelësit.
Megjithatë, ai pranoi se ideja e tij nuk është perfekte dhe mund të çojë në probleme dhe paradokse. Ne nuk duam të hyjmë në detaje në artikullin e sotëm, pasi kjo nuk është përfshirë në përmbajtjen e tij, por ju rekomandojmë që të njiheni me këtë temë.
Pra, ne jemi përsëri në Javascript. Kjo është ndoshta Menyra me e mire nëse doni besueshmëri dhe kohezion. Sidoqoftë, nëse dëshironi të argëtoheni duke zhvilluar diçka me "kodin e pastër CSS", atëherë artikulli ynë do të jetë patjetër i dobishëm për ju.
Do të doja të theksoja gjithashtu se Chris Coyier nga CSS-Tricks dy vjet më parë në lidhje me menaxhimin klikime të dyfishta duke përdorur CSS. Ndoshta informacioni nuk është më i rëndësishëm, por gjithsesi do të jetë shumë interesante të njiheni me njëri-tjetrin.
Në çdo rast, faleminderit që lexuat artikullin! Ju lutemi mos harroni dhe mos ngurroni të ndani rezultatet e eksperimenteve tuaja.
Kujdes! Ju nuk keni leje për të parë tekstin e fshehur.
Brenda pak vitet e fundit ka pasur një zgjerim befasues të gjuhëve të aplikacioneve të faqes së përparme në ueb, veçanërisht HTML5 dhe CSS3.
Tani mund të kryeni shumë operacione që më parë ishin të paimagjinueshme pa përdorimin e JavaScript dhe imazheve, për shembull, qoshe të rrumbullakosura, shabllone adaptive, rrjete modulare, ngjyra transparente edhe me shume.
Por gjithmonë i mungonte aftësia për të trajtuar ngjarjen klikoni duke përdorur CSS. Disa ekspertë besojnë se ky opsion nuk duhet të jetë, pasi ndërveprimi interaktiv i përdoruesit është një fushë veprimi për JavaScript. Arsyetimi i tyre është i arsyeshëm, por duke përdorur JavaScript edhe për klikime të thjeshta është e lodhshme.
Aktualisht nuk ka asnjë zyrtar Mjetet CSS për të trajtuar ngjarjen klikoni. Sidoqoftë, ka mënyra që mund të përdorni për të "zbuluar" një klikim vetëm me CSS pa JavaScript.
shënim
Metodat e përshkruara nuk janë të destinuara për " jeta reale". Materialet e mësimit duhet të konsiderohen si bazë për eksperimentim. Sidomos pasi disa metoda mbështeten dobët në shfletues. Qëllimi i mësimit është të prekni kufijtë e mundësive të CSS.
Duke përdorur kutinë e kontrollit
Me siguri e keni hasur më parë këtë metodë. Kjo është metoda më e popullarizuar për trajtimin e një ngjarjeje. klikoni duke përdorur CSS.
Metoda bazohet në përdorimin e një kutie kontrolli. Ky element ka një thelb binar dhe mund të jetë vetëm në një nga dy gjendjet. Kështu që kjo metodëështë një mënyrë plotësisht e besueshme për të trajtuar ngjarjet klikoni në CSS.
Për t'u ndryshuar (ngjyra: e zezë; ) hyrje: e kontrolluar ~ .për t'u ndryshuar (ngjyra: e kuqe; )
Metoda bazohet në përdorimin e një pseudo-klase :kontrolluar dhe përzgjedhës ~ . Vini re se do të funksionojë edhe me përzgjedhësin +. Thelbi i metodës është se "nëse kontrollohet kutia e kontrollit, atëherë elementët e mëposhtëm me klasën .to-be-change do të jenë të kuqe".
Kutia e kontrollit nuk duket shumë tërheqëse. Por ju mund të bëni pamjen më interesante duke fshehur kutinë e zgjedhjes dhe duke i bashkangjitur një etiketë. Diçka e tillë:
Pra, ne fshehim kutinë e kontrollit dhe përdorim etiketën për t'iu përgjigjur ngjarjes klikoni:
Hyrja ( pozicioni: absolute; lart: -9999 px; majtas: -9999 px; ) etiketa (ekrani: bllok; sfondi: #08C; mbushja: 5 px; kufiri: 1 px rgba solide (0,0,0,.1); kufiri- rrezja: 2 px; ngjyra: e bardhë; pesha e shkronjave: bold; ) hyrja: e kontrolluar ~ .për t'u ndryshuar (ngjyra: e kuqe; )
Ne kemi një buton, duke klikuar mbi të cilin ndryshon ngjyra e tekstit në paragrafin. Shtypja përsëri e butonit ndryshon ngjyrën përsëri.
(Vini re se ka metoda të ndryshme për të fshehur kutinë e zgjedhjes. E dukshme është përdorimi i ekranit: asnjë .)
pro
- Binare, ekzistojnë vetëm dy gjendje - të kontrolluara ose të pakontrolluara
- Shtypja përsëri rikthen gjendjen ( këtë artikull mund të jetë negativ)
- Lejon përpunimin ngjarje të lidhura klikoni(nëse kontrollohet kutia e parë dhe kontrollohet kutia e dytë, atëherë kryejmë veprimin e mëposhtëm)
Minuset
- Elementet duhet të kenë një paraardhës të përbashkët
- Kërkon shtesë Shënimi HTML(hyrje, etiketë dhe kështu me radhë)
- E detyrueshme veprime shtesë për të punuar në shfletues celular
Metoda me :target
Ekziston një mënyrë tjetër duke përdorur pseudo klasën : target. Kjo pseudo-klasë është e ngjashme me pseudo-klasë : rri pezull që plotëson vetëm disa kushte.
Ngjarje speciale për pseudo-klasë : target varet nga "identifikimi i fragmentit". Me fjalë të thjeshta, kjo pseudo-klasë i referohet një hashtag-u që ndodhet në fund të URL-së dhe bëhet aktiv kur hashtag-u dhe ID-ja përputhen.
Për t'u ndryshuar (ngjyra: e zezë; ) .për t'u ndryshuar: synuar (ngjyra: e kuqe; )
pro
- Kod i thjeshtë CSS
- E shkëlqyeshme për të theksuar seksionet
Minuset
- Mbeturinat në historinë e shfletuesit
- Lëvizja e faqes ndodh
- Kërkon një etiketë lidhjeje ose operacion URL për të përfshirë një hashtag
- Mund të ndikohet vetëm një element (sepse ID-ja është unike)
- Nuk ka asnjë mënyrë për t'u rikthyer në gjendjen origjinale pa përdorur një tjetër hashtag, lidhje ose operacione URL
Metoda me: fokus
Le të vazhdojmë rishikimin tonë në një mënyrë duke përdorur një tjetër pseudo-klasë - : fokus. Ideja është pothuajse e njëjtë si në rastin e mëparshëm, përveç se URL-ja nuk pritet të ndryshojë. Këtu ne mbështetemi në fokusin e hyrjes në një element specifik.
Kur jeni në një faqe, mund të përdorni tastin tab për të lëvizur nga një element në tjetrin. Kjo metodë është shumë e dobishme kur punoni me forma për të lundruar midis elementeve pa përdorur miun. Metoda përdoret gjithashtu për lundrim personat me shikim të dëmtuar sipas faqes.
Është e rëndësishme që disa elementë të mund të marrin fokusin e hyrjes, të tilla si lidhjet, paragrafët, fushat e hyrjes dhe shumë të tjera. Ju vetëm duhet të vendosni atributin tabindex mbi to me vlerë numerike për ata.
Hapësirë: fokus ~ .për t'u ndryshuar (ngjyra: e kuqe; )
Kur një element span klikohet ose futet në skedë, ai merr fokusin e hyrjes dhe përputhet me pseudo-klasën :focus. Përzgjedhësi fqinj bën pjesën tjetër të punës. Nëse për ndonjë arsye nuk keni nevojë të përdorni atributin tabindex, atëherë thjesht mund të vendosni një lidhje me adresën #.
pro
- Kod shumë i thjeshtë CSS dhe HTML
- Navigacion i shkëlqyer
Minuset
- Kërkon ose një element me fokus ose një atribut tabindex
- Përputhja ndodh vetëm kur ka fokus në hyrje (duke klikuar diku tjetër në faqe përzihet algoritmi i punës)
Metoda e tranzicionit
Kjo metodë është ndoshta mënyra më e ndyrë për të trajtuar një ngjarje. klikoni në CSS.
Ideja është të ruhet stil css në një tranzicion CSS. Ne përdorim një vonesë pseudo-pafund për të parandaluar kthimin në gjendjen fillestare. Tingëllon e ndërlikuar, por në fakt është shumë e lehtë për t'u zbatuar.
Për t'u ndryshuar ( tranzicion: të gjitha 0s 9999999s; ) span:active ~ .për t'u ndryshuar ( tranzicioni: të gjitha 0s; ngjyra: e kuqe; )
Vonesa është afërsisht 116 ditë. Jo pafundësi, por një lloj ngjashmërie e saj për kushtet tona. Prandaj, ndryshimet ruhen dhe nuk ka kthim në gjendjen origjinale.
pro
- E thjeshte dhe elegante
- Shteti shpëtohet edhe nëse tranzicioni nuk ka përfunduar
Minuset
- Mbështetje e dobët e shfletuesit (jo në IE9 dhe Opera Mini)
- Punon vetëm me vlera që mund të përdoren me tranzicione
- Nuk ka asnjë mënyrë për t'u kthyer në gjendjen fillestare
- Nuk ka pafundësi të vërtetë pritjeje (nëse projekti juaj përfshin pritjen më shumë se 116 ditë)
Përshëndetje për të gjithë ata që dëshirojnë të kuptojnë funksionimin e onclick (). Artikulli i sotëm do t'ju ndihmojë të kuptoni një herë e mirë parimin e funksionimit të mbajtësit të ngjarjeve dhe çmontimit shembull specifik kliko JavaScript, ose më mirë shembuj.
Unë do t'ju tregoj disa mënyra për të punuar me këtë mjet, do t'ju shpjegoj avantazhet dhe disavantazhet e tyre dhe gjithashtu do të përshkruaj se si funksionon jQuery me ngjarjet. Dhe tani le të kalojmë në analizën e materialit!
Caktimi i mbajtësve të ngjarjeve
Le të fillojmë me pjesën teorike të pyetjes. Pothuajse të gjithë në faqet e tyre përpunojnë skriptet. Dhe zakonisht këto janë ngjarje të ndryshme. Që të gjitha këto ngjarje të programuara të funksionojnë, duhet të instaloni një mbajtës për to.
Sipas rregullave të shkrimit, të gjithë mbajtësit përfshijnë "on + emrin e ngjarjes" në emrin e tyre, i cili vërehet në ne klikim(). Në varësi të ngjarjes së zgjedhur, përpunimi do të ndodhë si rezultat i veprimeve të ndryshme. Në rastin tonë, kur përdorni ne klikim() do të ekzekutohen vetëm ato ngjarje që janë shkaktuar nga klikimi i majtë i miut.
Mënyra të ndryshme për të caktuar një mbajtës ngjarjesh
Deri më sot, ka disa opsione për futjen e një mbajtësi të disa ose disa ngjarjeve në kod.
Përdorimi i ngjarjeve të thjeshta
Le të fillojmë me opsion i thjeshtë, i cili konsiston në injektimin e onclick () në shënimin e vetë dokumentit html. Duket kështu:
Siç mund ta shihni, kur klikoni mbi butonin me butonin e majtë të miut, shfaqet mesazhi "Kliko-kliko!". Unë dua të tërheq vëmendjen tuaj në një detaj të vogël, por domethënës. Brenda vigjilent mund të përdoret vetëm citate të vetme (‘’).
gjithashtu në këtë rast mund të përdoret fjalë kyçe kjo. Ai i referohet elementit aktual dhe ofron të gjitha metodat e disponueshme për të.
Kjo linjë kodi krijon një buton me tekstin "Kliko mua". Pasi të klikoni, do të shihni një mesazh në ekran: ""Kliko!". Ai do të zëvendësojë emrin e parë të butonit.
Kjo metodë është padyshim shumë e thjeshtë. Megjithatë, është i përshtatshëm vetëm për detyra të ngjashme, d.m.th. shfaqja e mesazheve ose ekzekutimi i komandave të thjeshta.
Nëse është e nevojshme të përdoren konstruksione ciklike, përdorni etiketa, etj., atëherë kjo mënyrë nuk përshtatet. Do të zvogëlojë lexueshmërinë e kodit, si dhe do ta bëjë atë të rëndë dhe të ngathët.
Në këtë rast, duhet t'i drejtoheni funksioneve.
Puna me funksionet
Funksionet ju lejojnë të ndaheni kodin e dëshiruar në një bllok të veçantë, i cili më vonë mund të thirret përmes një mbajtësi të ngjarjeve në .
Si shembull, unë bashkangjita një aplikacion për t'i shfaqur përdoruesit numrin që rezulton në fuqi të ndryshme, duke filluar nga 1 dhe duke përfunduar me 5. Për këtë kam krijuar një funksion countPow (), të cilit mund t'i kaloni parametrat. Në aplikacionin tim, përdoruesi duhet të fusë një numër si variabël funksioni.
Kështu, përmes mbajtësit të lidhur me funksionin e përmendur më sipër, llogaritjet u kryen dhe u shfaqën në ekran.
Kjo metodë përdoret shpesh në zhvillim. Sidoqoftë, nuk është më i popullarizuari, sepse nuk është gjithmonë i përshtatshëm për të lidhur ngjarjet në këtë mënyrë. Ndonjëherë, për të zgjidhur disa probleme, alternativa më e mirë është të sigurohet lidhja fleksibël e objekteve me ngjarjet duke përdorur vetitë e tyre.
Karakteristikat e elementit DOM
Për ata që nuk e dinë, DOM qëndron për "Modeli i objektit të dokumentit"("Modeli i objektit të dokumentit"). Është mjeti kryesor për kryerjen e ndryshimeve dhe manipulimeve të ndryshme në elementë.
Meqenëse DOM është një pemë hierarkike, disa veçori dhe metoda të objekteve të faqes mund të aksesohen duke avancuar përmes degëve specifike.
Si shembull, vendosa të ndryshoj ngjyrën e sfondit nga parazgjedhja në blu. Për ta bërë këtë, kalova zinxhirin dokument.trupi.stili.sfondiNgjyra.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
Duke përdorur bibliotekën jQuery
Me lëshimin e dritës, janë shfaqur shumë komanda, veti dhe metoda shtesë që thjeshtojnë dhe shkurtojnë shumë kodin e shkruar. Më shpesh, zhvilluesit përdorin vetitë për të marrë një element të caktuar me ID (document.getElementById (iden)), klasë (element.getElementsByClassName (className)), etiketë (elem.getElementsByTagName (etiketë)) ose emrin (document.getElementsByName )) .
Për të kuptuar se çfarë është në rrezik, analizoni shembullin e mëposhtëm.
Me kujdes! Nëse klikoni në butonin, atëherë do të ketë ndryshime me këtë përmbajtje.
25/09/16 10.3KDisa programe të ngjarjeve JavaScript punojnë drejtpërdrejt me hyrjen e përdoruesit. Momenti i ndodhjes dhe rendi i ndërveprimeve të tilla nuk mund të parashikohet paraprakisht.
Mbajtësit e ngjarjeve
Ju mund t'i përgjigjeni një shtypjeje tasti duke lexuar vazhdimisht gjendjen e tij në mënyrë që të kapni momentin kur tasti shtypet përpara se të lëshohet përsëri.
Kështu u trajtua futja e të dhënave në makinat primitive. Më i avancuar është zbulimi i një goditjeje tasti dhe radhitja e tij. Më pas programi mund të kontrollojë periodikisht radhën për ngjarje të reja dhe të reagojë ndaj asaj që gjen atje. Në këtë rast, programi duhet të kujtojë të skanojë radhën dhe ta bëjë atë shpesh.
Që nga koha kur shtypet tasti derisa programi të zbulojë këtë ngjarje, ai në fakt nuk i përgjigjet kërkesave. Kjo qasje quhet sondazh (sondazh).
Shumica e programuesve përpiqen ta shmangin atë nëse është e mundur.
Mënyra më e mirë është të implementoni një sistem që lejon kodin t'i përgjigjet ngjarjeve kur ato ndodhin. Shfletuesit e zbatojnë atë duke ofruar mundësinë për të regjistruar funksionet e mbajtësit për ngjarje specifike JavaScript:
Klikoni mbi këtë dokument për të aktivizuar mbajtësin.
Funksioni addEventListener regjistrohet në mënyrë që argumenti i tij i dytë të thirret sa herë që ndodh ngjarja e përshkruar nga argumenti i parë.
Ngjarjet dhe nyjet DOM
Çdo mbajtës i ngjarjeve të shfletuesit regjistrohet me një kontekst. Kur thirret funksioni addEventListener, thirret si metodë në të gjithë dritaren, sepse në shfletues, diapazoni global është i barabartë me objektin e dritares. Çdo element DOM ka metodën e vet addEventListener, e cila ju lejon të dëgjoni për ngjarjet në atë element:
Këtu nuk ka asnjë mbajtës.
Në këtë shembull, mbajtësi është i lidhur me nyjen e butonit. Ngjarjet e miut JavaScript ndezin mbajtësin, por klikimet në pjesën tjetër të dokumentit jo.
Duke vendosur atributin onclick të nyjës, marrim të njëjtin rezultat. Por një nyje ka vetëm një atribut onclick, kështu që ju mund të regjistroni vetëm një mbajtës për çdo nyje. Metoda addEventListener ju lejon të shtoni çdo numër dëgjuesish. Pra, ne jemi të siguruar nga zëvendësimi aksidental i një mbajtësi që tashmë është regjistruar.
Metoda removeEventListener thirret me të njëjtat argumente si addEventListener. Ai heq mbajtësin:
Për të anuluar një funksion mbajtës, ne i japim një emër (për shembull, një herë). Kështu ia kalojmë si addEventListener ashtu edhe removeEventListener.
Objektet e ngjarjes
Megjithëse nuk e përmendëm atë në shembujt e mësipërm, një argument i kalohet funksionit të mbajtësve të ngjarjeve JavaScript: objekti i ngjarjes. Ai jep informacion shtesë për ngjarjen. Për shembull, nëse duam të dimë se cili buton i miut është shtypur, duhet të marrim vlerën e cilës vepër të objektit të ngjarjes:
Informacioni i ruajtur në objekt ndryshon në varësi të llojit të ngjarjes. Vetia e tipit të objektit përmban gjithmonë një varg që identifikon ngjarjen (për shembull, " klikoni"ose" miu poshtë«).
Përhapja
mbajtës të ngjarjeve ( p.sh. ngjarjet me prekje JavaScript) të regjistruara për nyjet mëmë do të marrin gjithashtu ngjarje që ndodhin në elementët fëmijë. Nëse klikohet një buton brenda një paragrafi, mbajtësit e ngjarjeve të paragrafit do të marrin gjithashtu një ngjarje klikimi.
Ngjarja përhapet nga nyja ku ka ndodhur, në nyjen mëmë dhe në rrënjën e dokumentit. Pasi të gjithë mbajtësit e regjistruar në një nyje të caktuar të jenë ndezur me radhë, mbajtësit e regjistruar për të gjithë dritaren marrin mundësinë për t'iu përgjigjur ngjarjes.
Në çdo kohë, një mbajtës i ngjarjeve mund të thërrasë metodën stopPropagation në objektin e ngjarjes për të parandaluar përhapjen e mëtejshme të ngjarjes. Kjo mund të jetë e dobishme kur keni një buton brenda një elementi tjetër të klikueshëm dhe nuk dëshironi që sjellja e klikimit të elementëve të jashtëm të aktivizohet kur klikohet butoni.
Në shembullin e mëposhtëm, ne regjistrojmë mbajtësit " MouseDown» si për butonin ashtu edhe për paragrafin. Kur klikoni me të djathtën ( Ngjarjet e miut JavaScript), mbajtësi thërret metodën stopPropagation, e cila parandalon funksionimin e mbajtësit të paragrafit. Kur shtypet butoni me një buton tjetër të miut, të dy mbajtësit hapen:
paragrafi dhe në të .
Shumica e objekteve të ngjarjeve kanë një veti të synuar që tregon nyjen nga e cila kanë origjinën. Ju mund ta përdorni këtë veti për të shmangur trajtimin aksidental të disa ngjarjeve që përhapen nga nyja.
Ju gjithashtu mund të përdorni objektivin e ngjarjes JavaScript për të zgjeruar shtrirjen e një ngjarjeje të një lloji të caktuar. Për shembull, nëse keni një nyje që përmban një listë të gjatë butonash, është më e përshtatshme të regjistroni mbajtësin e një klikimi për nyjen e jashtme dhe të përdorni vetinë e synuar për të mbajtur gjurmët nëse butoni është klikuar, në vend që të regjistroni rastet e mbajtësit për të gjithë butonat. :
Veprimet e parazgjedhura
Shumë ngjarje kanë veprime të paracaktuara të lidhura me to. Nëse klikoni në një lidhje, do të lundroni te elementi i synuar i lidhjes. Nëse klikoni shigjetën poshtë, shfletuesi do të lëvizë poshtë faqes. Nëse klikoni me të djathtën, do të hapet një menu e kontekstit.
Për shumicën e llojeve të ngjarjeve, mbajtësit e ngjarjeve JavaScript thirren përpara se të kryhen veprimet e paracaktuara. Nëse nuk dëshironi që sjellja e paracaktuar të ekzekutohet, duhet të telefononi metodën preventDefault në objektin e ngjarjes.
Përdoreni atë për të zbatuar shkurtore të personalizuara të tastierës ose menutë e kontekstit. Ose, për të anashkaluar sjelljen që presin përdoruesit. Më poshtë është një lidhje që nuk mund të ndiqet:
MDN
Mundohuni të mos e bëni këtë nëse nuk keni një arsye të mirë për ta bërë këtë.
Në varësi të shfletuesit, disa ngjarje mund të mos kapen. Në Google Chrome, për shembull, shkurtore e tastierës ( kodi kyç i ngjarjes JavaScript) për të mbyllur skedën aktuale ( Ctrl-W ose Command-W) nuk mund të analizohet me JavaScript.
Ngjarjet kryesore
Kur përdoruesi shtyp një tast në tastierë, shfletuesi lëshon " çelësi". Kur ai lëshon çelësin, " keyup«:
Kjo faqe bëhet e purpurt kur shtypni tastin V.
Kjo ngjarje ndizet gjithashtu kur përdoruesi shtyp dhe mban një tast, ose kur tasti mbahet i shtypur. Për shembull, nëse dëshironi të rrisni shpejtësinë e një personazhi në një lojë duke shtypur një tast shigjete dhe ta ulni përsëri duke lëshuar tastin me shigjetë, atëherë duhet të keni kujdes që të mos e rrisni shpejtësinë sa herë që shtypet tasti me shigjetë.
Shembulli i mëparshëm përdor veçorinë e objektit të kodit kyç të ngjarjes JavaScript. Ai përcakton se cili tast është shtypur ose lëshuar. Megjithatë, nuk është gjithmonë e qartë se si të konvertohet një kod kyç numerik në një çelës aktual.
Kodi i karakterit Unicode përdoret për të lexuar vlerat e çelësit të shkronjave dhe numrave. Ajo shoqërohet me shkronjën ( me shkronja të mëdha) ose numrin e treguar në çelës. Metoda charCodeAt për vargjet ju lejon të merrni këtë vlerë:
console.log ("Violet".charCodeAt(0)); // → 86 console.log("1".charCodeAt(0)); // → 49
Çelësat e tjerë kanë kode kyçe më pak të parashikueshme të lidhura me ta. Mënyra më e mirë për të përcaktuar kodin e duhur është të eksperimentoni. Regjistroni një mbajtës ngjarjesh të shtypjes së tastit që kap kodet e tastave që merr dhe shtypni tastin e dëshiruar.
Tastet si Shift, Ctrl, Alt ndezin ngjarjet si tastet normale. Por kur gjurmoni kombinimet e tasteve, mund të përcaktoni gjithashtu nëse ato taste janë shtypur duke parë vetitë e tastierës dhe ngjarjeve të miut JavaScript: shiftKey, ctrlKey, altKey dhe metaKey:
Për të vazhduar, shtypni Ctrl-Space.
Ngjarjet " çelësi"dhe" keyup' jepni informacion në lidhje me goditjen aktuale të tastit. Por çka nëse duam vetë tekstin hyrës? Marrja e tekstit nga kodet kryesore është e papërshtatshme. Ka një ngjarje për këtë shtypja e tastit", e cila qëllon menjëherë pas" çelësi". Përsëritet së bashku me "keydown" për sa kohë që tasti shtypet. Por vetëm për çelësat me të cilët futen karakteret.
Vetia charCode në objektin e ngjarjes përmban një kod që mund të interpretohet si një kod karakteri Unicode. Ne mund të përdorim funksionin String.fromCharCode për ta kthyer këtë kod në një varg të vetëm karakteresh.
Vendosni fokusin e hyrjes në këtë faqe dhe shkruani diçka.
Nyja DOM në të cilën ndodh ngjarja varet nga cili element kishte fokusin e hyrjes kur shtypej tasti. Nyjet e rregullta nuk mund të kenë fokus hyrës ( përveç nëse vendosni atributin tabindex për ta), por elementë të tillë si lidhjet, butonat dhe fushat e formës munden.
Nëse asnjë element i veçantë nuk ka fokus, atëherë nyja e synuar për ngjarjet me prekje kyçe dhe JavaScript është document.body.
Klikimet e miut
Klikimi i një butoni të miut gjithashtu shkakton një sërë ngjarjesh. Ngjarjet " miu poshtë"dhe" mouseup" të ngjashme me " çelësi"dhe" keyup". Ato funksionojnë kur shtypet dhe lëshohet një buton i mausit. Këto ngjarje ngrihen në nyjet DOM që u vendosën mbi të kur ndodhi ngjarja.
Për një nyje të përbashkët që përfshin një klikim të mausit dhe një lëshim të miut, pas " mouseup» ngjarja është shkaktuar » klikoni". Për shembull, nëse shtypni butonin e miut në një artikull, dhe më pas lëvizni kursorin në një artikull tjetër dhe lëshoni butonin, atëherë ngjarja " klikoni' do të ndodhë në një element që përmban të dy këta elementë.
Nëse ndodhin dy klikime afër njëri-tjetrit, " dblkliko" (klikoni dy herë). Ndodh pas klikimit të dytë. Për të marrë vendndodhjen e saktë ku ndodhi ngjarja e miut, duhet të merrni vlerën e vetive pageX dhe faqeY, të cilat përmbajnë koordinatat e ngjarjes (në pixel) në lidhje me këndin e sipërm majtas të dokumentit.
Më poshtë është një zbatim i një programi primitiv vizatimi. Sa herë që miu klikohet në dokument (nën kursorin) shtohet një pikë:
Karakteristikat clientX dhe clientY janë të ngjashme me pageX dhe pageY, por ato i referohen pjesës së dukshme të dokumentit. Ato mund të përdoren për të krahasuar koordinatat e miut me ato të kthyera nga funksioni getBoundingClientRect.
Lëvizja e miut
Sa herë që miu lëviz, " lëvizja e miut' nga grupi i ngjarjeve të miut JavaScript. Mund të përdoret për të gjurmuar pozicionin e miut. Kjo përdoret kur zbatohet aftësia për të tërhequr dhe lëshuar elementë me miun.
Në shembullin e mëposhtëm, programi shfaq një panel dhe vendos mbajtësit e ngjarjeve në mënyrë që paneli të bëhet më i ngushtë ose më i gjerë kur tërhiqet:
Zvarritni skajin e panelit për të ndryshuar gjerësinë e tij:
Vini re se mbajtësi lëvizja e miut' është regjistruar për të gjithë dritaren. Edhe nëse miu largohet nga paneli gjatë ndryshimit të madhësisë, ne përsëri përditësojmë gjerësinë e panelit dhe mbyllim ngjarjet me prekje JavaScript kur butoni i miut lëshohet.
Ne duhet të ndalojmë ndryshimin e madhësisë së panelit kur përdoruesi lëshon butonin e miut. Fatkeqësisht, jo të gjithë shfletuesit vendosin " lëvizja e miut» cila pronë. Ekziston një veçori standarde e butonave që ofron informacion të ngjashëm, por gjithashtu nuk mbështetet në të gjithë shfletuesit. Për fat të mirë, të gjithë shfletuesit kryesorë mbështesin një gjë: ose butonat ose cilët . Funksioni buttonPressed në shembullin e mësipërm fillimisht përpiqet të përdorë vetinë e butonave dhe nëse nuk është e disponueshme, kalon në cilin .
Kur kursori i miut hyn ose del nga një nyje, " miu mbi"ose" mouseout". Ato mund të përdoren për të krijuar efekte pezullimi, për të shfaqur një titull ose për të ndryshuar stilin e një elementi.
Për të krijuar një efekt të tillë, nuk mjafton vetëm të filloni ta shfaqni atë kur ndodh ngjarja " miu mbi'dhe të përfundojë pas ngjarjes' mouseout". Kur miu lëviz nga një nyje te një nga fëmijët e tij, një ngjarje aktivizohet për nyjen prind " mouseout". Edhe pse treguesi i miut nuk është larguar nga diapazoni i nyjës.
Për t'i bërë gjërat edhe më keq, këto ngjarje JavaScript përhapen ashtu si ngjarjet e tjera. Kur miu largohet nga një nga nyjet fëmijë për të cilat është regjistruar një mbajtës, " mouseout«.
Për të zgjidhur këtë problem, mund të përdorni veçorinë relatedTarget të objektit të ngjarjes. Në rast të një ngjarjeje" miu mbi' tregon se cili element është vendosur më parë me miun. Dhe në rast të ndodhjes mouseout» - në cilin element lëviz treguesi. Ne do të ndryshojmë efektin e pezullimit vetëm kur relatedTarget është jashtë nyjes sonë të synuar.
Në këtë rast, ne e ndryshojmë sjelljen sepse kursori i miut është vendosur mbi nyjen nga jashtë saj (ose anasjelltas):
Rri miun mbi këtë paragraf.
Funksioni isInside mban gjurmët e marrëdhënieve mëmë të një nyje të caktuar ose derisa të arrihet pjesa e sipërme e dokumentit (kur nyja është e pavlefshme). Ose elementi prind që na nevojitet nuk do të gjendet.
Efekti hover është shumë më i lehtë për t'u krijuar me pseudo-zgjedhësin CSS:hover, siç tregohet në shembullin e mëposhtëm. Por kur efekti hover përfshin diçka më komplekse sesa thjesht ndryshimi i stilit të nyjes së synuar, atëherë duhet të përdorni trukun duke përdorur ngjarjet " miu mbi"dhe" mouseout» ( Ngjarjet e miut JavaScript):
Lëvizni ngjarjet
Sa herë që elementi lëviz, ngjarja e lëvizjes JavaScript ndizet në element. Mund të përdoret për të mbajtur gjurmët e asaj që është ky moment shikuar nga përdoruesi; për të çaktivizuar animacionin jashtë portit të shikimit.
Në shembullin e mëposhtëm, ne shfaqim një tregues progresi në të djathtë këndi i sipërm dokumentoni dhe përditësoni atë në mënyrë që të plotësojë pjesë me një ngjyrë të ndryshme ndërsa lëvizni poshtë faqes:
Më lëviz...
Duke vendosur pozicionin e elementit ose vetinë fikse, marrim të njëjtin rezultat si vendosja e pozicionit:absolute . Por në këtë mënyrë ne gjithashtu bllokojmë elementin që të lëvizë së bashku me pjesën tjetër të dokumentit. Si rezultat, treguesi i progresit do të fiksohet në mënyrë statike në këndin e sipërm. Brenda tij është një tjetër element, përmasat e të cilit ndryshojnë sipas ecurisë aktuale.
Ne përdorim % në vend të px si njësi matëse kur vendosim gjerësinë në mënyrë që elementi të ndryshojë përmasat proporcionale me madhësinë e shiritit të progresit.
Ndryshorja globale innerHeight përmban lartësinë e dritares, të cilën duhet ta zbresim nga lartësia totale e disponueshme e lëvizshme e dokumentit. Ju nuk mund të lëvizni dritaren poshtë kur të arrini në fund të dokumentit. Me innerHeight, innerWidth mund të përdoret gjithashtu. Ndarja e faqesYOffset ( pozicioni aktual i dritares së lëvizjes) me pozicionin maksimal të lejuar të lëvizjes dhe duke shumëzuar me 100, marrim përqindjen për shiritin e përparimit.
Thirrja e preventDefault në ngjarjen e lëvizjes JavaScript nuk e pengon lëvizjen. Trajtuesi i ngjarjeve thirret vetëm pasi të ndodhë lëvizja.
ngjarjet e fokusit të hyrjes
Kur një element ka fokus në hyrje, shfletuesi ndez " fokusi". Kur fokusi i hyrjes hiqet, " turbulloj«.
Këto dy ngjarje nuk kanë shpërndarje. Trajtues elementi prind nuk njoftohet kur një element fëmijë ka fokusin e hyrjes.
Shembulli i mëposhtëm shfaq një sugjerim për fushë teksti, e cila aktualisht është në fokus:
Emri:
Mosha:
Objekti i dritares merr ngjarjet " fokusi"dhe" turbulloj“Kur përdoruesi lundron ose lë një skedë, dritarja e shfletuesit në të cilën shfaqet dokumenti.
Ngarko ngjarje
Kur faqja përfundon ngarkimin, "ngarkesa" e ngjarjes JavaScript ngrihet për objektet e trupit të dokumentit dhe dritares. Përdoret për të planifikuar veprimet e inicializimit që kërkojnë të ngarkohet i gjithë dokumenti. Mos harroni se përmbajtja
Ndonjëherë ju duhet të anuloni një veçori që kemi planifikuar. Kjo bëhet duke ruajtur vlerën e kthyer të funksionit setTimeout dhe duke thirrur clearTimeout në të:
var bombTimer = setTimeout(funksion() ( console.log ("BOOM!"); ), 500); nëse (Math. rastësor ()< 0.5) { // 50% chance console.log("Defused."); clearTimeout(bombTimer); }
Funksioni cancelAnimationFrame funksionon njësoj si clearTimeout. Ajo thirret nga vlera e kthyer nga requestAnimationFrame për të anuluar kornizën ( nëse nuk është thirrur ende).
Një grup i ngjashëm funksionesh, setInterval dhe clearInterval, përdoret për të vendosur një kohëmatës që duhet të përsërisë një veprim çdo X milisekonda:
rriqrat var = 0; var clock = setInterval(funksion() ( console.log("shënoni", tik-tak ++); if (ticks == 10) (clearInterval(clock); console.log("stop"); ) ), 200);
Duke u ndarë
Disa lloje ngjarjesh mund të ndizen shumë herë brenda një periudhe të shkurtër kohe ( p.sh. ngjarje "movemove" dhe javascript scroll). Kur trajtoni ngjarje të tilla, duhet të jeni të kujdesshëm që të mos zgjasni shumë, përndryshe mbajtësi do të marrë aq shumë kohë për të ekzekutuar veprimin sa që ndërveprimi me dokumentin do të bëhet i ngadaltë dhe i ngadaltë.
Nëse ju duhet të bëni diçka të personalizuar në një mbajtës të tillë, mund të përdorni setTimeout për t'u siguruar që të mos zgjasë shumë. Kjo zakonisht quhet ndarje e ngjarjeve. Ka disa qasje të ndryshme për shtypjen.
Në shembullin e parë, ne duam të bëjmë diçka kur përdoruesi është duke shtypur. Por ne nuk duam ta bëjmë këtë pas çdo ngjarjeje të shtypjes së tasteve. Kur përdoruesi po shkruan shpejt, duhet të prisni derisa të ketë një pauzë. Në vend që të ekzekutojmë menjëherë veprimin në mbajtësin e ngjarjeve, ne vendosim një vonesë. Ne gjithashtu pastrojmë vonesën e mëparshme ( nëse ndonjë). Nëse ngjarjet ndodhin në intervale të shkurtra ( më pak se vonesa që kemi vendosur), atëherë vonesa nga ngjarja e mëparshme anulohet:
Kalimi i një vlere të pacaktuar te clearTimeout , ose thirrja e saj në një vonesë që tashmë po funksionon, nuk do të ketë efekt. Nuk duhet të jemi më të kujdesshëm se kur ta thërrasim, thjesht e bëjmë për çdo event.
Ju mund të përdorni një skenar tjetër nëse doni të ndani përgjigjet me një kohë të vogël. Por në të njëjtën kohë, ato duhet të lansohen gjatë një sërë ngjarjesh, dhe jo vetëm pas saj. Për shembull, ju mund të dërgoni në përgjigje të ngjarjeve " lëvizja e miut» ( Ngjarjet e miut JavaScript) koordinatat aktuale të miut, por vetëm çdo 250 milisekonda:
konkluzioni
Trajtuesit e ngjarjeve na lejojnë të zbulojmë dhe t'u përgjigjemi ngjarjeve mbi të cilat nuk kemi kontroll të drejtpërdrejtë. Për të regjistruar një mbajtës të tillë, përdorni metodën addEventListener.
Çdo ngjarje lidhet me lloj i caktuar (« çelësi«, « fokusi” dhe kështu me radhë) që e identifikon atë. Shumica e ngjarjeve aktivizohen në një element të caktuar DOM dhe më pas përhapen në nyjet prindërore të elementit. Kjo i lejon mbajtësit e lidhur me ato elemente t'i përpunojnë ato.
Kur thirret një mbajtës, një objekt ngjarje i kalohet atij me informacion shtese rreth veprimit. Ky objekt gjithashtu përmban metoda për të ndaluar përhapjen e mëtejshme të ngjarjes ( ndale Përhapja) ose parandaloni shfletuesin e paracaktuar që të trajtojë ngjarjen ( preventDefault).
Shtypja e tastit gjeneron ngjarje " çelësi«, « shtypja e tastit"dhe" keyup". Klikimi i miut gjeneron ngjarje " miu poshtë«, « mouseup"dhe" klikoni". Lëvizja e miut - " lëvizja e miut«, « fut miun"dhe" mouseout«.
Ngjarja e lëvizjes JavaScript mund të përcaktohet duke përdorur " rrotulloni
