Mësimi i Java. Ngjarjet e miut Javascript

Ndërsa vazhdojmë eksplorimin tonë të jQuery, le të kalojmë në eksplorimin e temës së trajtimit të ngjarjeve në jQuery.

Ngjarjet e dokumentit
Ngjarjet ndodhin kur përdoruesi ndërvepron me faqen e internetit. Ngjarjet janë një lloj njoftimi nga sistemi që përdoruesi ka kryer ndonjë veprim ose se një gjendje ka ndodhur brenda vetë sistemit. Ngjarjet aktivizohen duke klikuar një element, duke lëvizur miun, duke shtypur një tasti të tastierës, duke ndryshuar madhësinë e një dritareje, duke përfunduar ngarkimin e një faqe në internet dhe më shumë. Duke ditur se çfarë ngjarjesh mund të gjenerojë ky apo ai element i faqes në internet, mund të shkruani një funksion për të trajtuar këtë ngjarje. Për shembull, kur dorëzohen të dhënat e formularit, ngjarja onsubmit ngrihet. Kur ndodh kjo ngjarje, ju mund të kontrolloni të dhënat e futura nga përdoruesi dhe nëse ato nuk përputhen me atë të pritur, anuloni dërgimin e të dhënave.

Që në fillim të librit, ne kemi konsideruar tashmë mundësinë e ekzekutimit të skripteve menjëherë pas formimit të strukturës së dokumentit, pa pritur ngarkimin e elementeve të tjerë. Siç e dini tashmë, ju mund ta trajtoni këtë ngjarje duke përdorur metodën gati ().

alarm ("Dokumenti është i disponueshëm për ekzekutimin e skripteve");
});

Nëse duhet të kryeni ndonjë veprim vetëm pasi vetë dokumenti HTML të jetë ngarkuar plotësisht, si dhe të gjithë elementët e tjerë (për shembull, imazhet), atëherë mund të përdorni metodën e ngarkesës (). Sintaksa e metodës është si më poshtë.

ngarkimi (funksioni i kthimit të thirrjes)

funksionin<Название функции>([Objekti i ngjarjes]) (
// ...
}

Le të shfaqim mesazhin e konfirmimit dhe llojin e ngjarjes pasi faqja e internetit të jetë ngarkuar plotësisht.

$ (dritare) .load (funksioni (e) (
alarm ("Dokumenti është ngarkuar plotësisht");
alarm ("Lloji i ngjarjes" + е.lloj);
});

Si rezultat i ekzekutimit, ne do të marrim dy mesazhe.

Dokumenti është i ngarkuar plotësisht
Ngarko llojin e ngjarjes

Metoda e shkarkimit () përdoret për të kryer çdo veprim menjëherë përpara shkarkimit të dokumentit. Metoda ka sintaksën e mëposhtme.
shkarkoj (funksioni i kthimit të thirrjes)

Parametri Callback Function specifikon një referencë funksioni në formatin e mëposhtëm.

funksionin<Название функции>([<Объект event>]) {
// ...
}
Le të shfaqim mesazhin përpara se të shkarkojmë dokumentin.
$ (dritare) .shkarko (funksioni ()
(Alarmi ("Hyni brendamë shumë!");
});

Në këtë seksion, ne do të shohim dy metoda më të dobishme.

ndryshimi i madhësisë (Callback) - Ekzekutohet kur madhësia e dritares ndryshohet.

lëviz (Callback) - Ekzekutohet kur përmbajtja e një elementi faqeje, dokumenti, dritareje ose kornize lëviz.

Parametri Callback Function specifikon një referencë funksioni në formatin e mëposhtëm.
Emri i funksionit ([Objekti i ngjarjes]) (
// ...
}

Ju mund të trajtoni lëvizjen e përmbajtjes së dritares dhe të shfaqni mesazhin si më poshtë.
$ (dritare) .lëviz (funksioni () (
alarm ("Lëvizja e përmbajtjes së dritares");
});

Si shembull i përdorimit të metodës së ndryshimit të madhësisë (), merrni gjerësinë dhe lartësinë e dritares pas ndryshimit të madhësisë së saj (Lista 6.1).

Listimi 6.1. Shfaqja e gjerësisë dhe lartësisë së dritares kur ndryshoni madhësinë

Kur madhësia e dritares ndryshohet në elementin me identifikuesin divl, do të shfaqen gjerësia dhe lartësia e dritares.

Metoda e gabimit (Callback) thirret kur ka një gabim në faqe ose JavaScript. Parametri Callback Function specifikon një referencë funksioni në formatin e mëposhtëm.

Emri i funksionit ([Mesazhi [, URL [, numri i linjës]]]) (
// ...
}

Nëse gabimi ka ndodhur në objektin e dritares, atëherë tre parametra do të jenë të disponueshëm në funksionin e kthimit të thirrjes:

Mesazh - tekst që përshkruan gabimin;
URL-ja është URL-ja e plotë e dokumentit të gabimit.
Numri i rreshtit - numri i rreshtit me gabim.

Për të fshehur gabimet e JavaScript nga përdoruesit, kthejeni true brenda funksionit të kthimit të thirrjes.

$ (dritare) .gabim (funksioni () (
kthehu i vërtetë;
});

Duke përdorur metodën e gabimit (), mund të trajtoni gabimin e ngarkimit të imazhit.

$ ("img"). gabim (funksion () (
$ (kjo) .attr ("src", "noimage.gif");
});

shënim
Që ky shembull të funksionojë siç duhet, duhet të vendosni skriptin në server. Përndryshe, ngjarja nuk do të përpunohet.

Ngjarjet e miut në jQuery

Metodat e mëposhtme janë dhënë për trajtimin e ngjarjeve të miut në jQuery.

Kliko ([Callback]) - Ekzekutohet kur klikohet një element ose faqe interneti. Nëse parametri nuk është i specifikuar, ai do të simulojë një klikim në element. Ngjarja onclick paraprihet nga dy ngjarje: onmousedown dhe onmouseup. Le të shfaqim një mesazh pasi të klikojmë në ndonjë buton.
$ ("buton") .kliko (funksioni () (
});

Toggle () - Ju lejon të alternoni funksione të shumta kur klikoni në një element ose faqe interneti. Funksionet thirren me radhë. Klikimi i parë thërret funksionin e parë, i dyti, i dyti dhe i treti, i treti. Nëse funksioni i tretë nuk është i përcaktuar, atëherë funksioni i parë thirret përsëri, e kështu me radhë. Metoda e ndërrimit () ka formatin e mëposhtëm.
ndërroj (<Функция обратного вызова 1>,
<Функция обратного вызова 2>[,
<Функция обратного вызова N>])

Le të bëjmë që ngjyra e tekstit të paragrafit të ndryshojë pas çdo klikimi të mausit.
$ ("p"). ndërroni
(funksioni () (
$ (kjo) .css ("ngjyra", "e kuqe");
funksioni () (
$ (kjo) .css ("ngjyrë", "blu");
funksioni () (
$ (kjo) .css ("ngjyrë", "gjelbër");
}
) .kliko ();

Provoni të klikoni mbi paragrafin disa herë. Ngjyra e tekstit do të ndryshojë në mënyrë sekuenciale nga e kuqe në blu, nga blu në jeshile, nga jeshile në të kuqe përsëri. Kushtojini vëmendje rreshtit të fundit të shembullit. Pas caktimit të një mbajtësi të ngjarjeve, ngjarja onclick thirret duke përdorur metodën click () pa parametra. Për këtë arsye, ngjyra e paragrafit do të jetë e kuqe që në fillim.

Dblclick ([Funksioni i kthimit të thirrjes]) - Ekzekutohet kur klikoni dy herë një element ose faqe interneti. Nëse parametri nuk është i specifikuar, ai do të simulojë një klik të dyfishtë në element. Ngjarja ondblclick paraprihet nga tre ngjarje: onmousedown, onmouseup dhe onclick. Le të shfaqim një mesazh kur klikoni dy herë në ndonjë paragraf.
$ ("p"). dblclick (funksioni () (
alarm ("Ke klikuar dy herë");
});

mousedown (Callback) - Ekzekutohet kur shtypet butoni i mausit në një element ose faqe. Ngjarja onmousedown ndizet përpara ngjarjeve onmouseup dhe onclick.

mouseup (Callback) - Ekzekutohet kur butoni i mausit i shtypur më parë lirohet. Ngjarja onmouseup ndizet midis ngjarjeve onmousedown dhe onclick. Le të shfaqim mesazhe kur klikojmë dhe lëshojmë butonin e miut mbi një paragraf.

$ ("p"). ul mouse (funksion () (
$ ("# divl"). shtoj ("Ngjarja Onmousedown" + "
");
)) mouseup (funksioni () (
$ ("# divl"). append ("Ngjarja Onmouseup" + "
");
});
<р>Klikoni mua

Mousemove - Ekzekutohet sa herë që lëviz miu. Le të shfaqim një mesazh kur lëvizni kursorin mbi një paragraf.

$ ("p") .mousemove (funksioni () (
$ ("# divl"). shtoj ("Ngjarja Onmousemove" + "
");
});

mouseover (Callback) - Ekzekutohet kur miu rri pezull mbi element.

mouseout (Callback) - Ekzekutohet kur kursori i miut largohet nga elementi. Kur rri pezull mbi lidhjen, ne do ta bëjmë ngjyrën e lidhjes të kuqe dhe do të shfaqim mesazhin, dhe kur kursori largohet nga lidhja, ne do ta ndryshojmë ngjyrën e saj në të zezë dhe do të shfaqim mesazhin.

$ ("a") .over mouse (funksioni () (
$ (kjo) .css ("ngjyra", "e kuqe");
$ ("# divl"). shtoj ("Ngjarjembi mouse "+"
");
)) mouseout (funksioni () (
$ (kjo) .css ("ngjyrë", "e zezë");
$ ("# divl"). shtoj ("Ngjarjeonmouseout "+"
");
}>;

Hover () - ju lejon të trajtoni pezullimin dhe lënien e një elementi me një metodë të vetme. Ka formatin e mëposhtëm.
rri pezull (Bashkëthyerja e telefonatës për ngjarjen onmouseover, Callback për ngjarjen onmouseout)

Le të ribëjmë shembullin tonë të mëparshëm dhe të përdorim metodën hover ().

$ ("a"). rri pezull (funksioni () (
$ (kjo) .css ("ngjyra", "e kuqe");
$ ("# divl"). shtoj ("Ngjarje Onmouseover" + "
"); },
funksioni () (
$ (kjo) .css ("ngjyrë", "e zezë");
$ ("# divl"). shtoj ("Ngjarja Onmouseout" + "
");
});

Metoda hover () ka një avantazh tjetër. Nëse ka një bllok tjetër brenda bllokut, atëherë funksionet individuale do të thirren kur hyni në bllokun e brendshëm, si dhe kur dilni prej tij. Kur përdorni metodën hover (), këto lëvizje do të shpërfillen (Lista 6.2).

Listimi 6.2. Specifikat e përdorimit të metodës hover()

Zgjedhurtrajtuesit:

Linjë 1

Rreshti 2

Funksionirri pezull ():

Linjë 1

Rreshti 2

Për bllokun e parë të mbivendosur, ne kemi përcaktuar mbajtës të veçantë të ngjarjeve. Nëse lëvizim kursorin e miut në të gjithë bllokun në mes, marrim sekuencën e mëposhtme të ngjarjeve.
Ngjarja Onmouseover
Ngjarja Onmouseout
Ngjarja Onmouseover
Ngjarja Onmouseout
Ngjarja Onmouseover
Ngjarja Onmouseout

Për bllokun e dytë të mbivendosur, mbajtësit e ngjarjeve caktohen duke përdorur metodën hover (). Me të njëjtin veprim, do të marrim vetëm dy ngjarje.
Ngjarja Onmouseover
Ngjarja Onmouseout

Në të gjitha metodat e paraqitura në këtë seksion, ne ende nuk kemi kuptuar parametrat që mund t'u kalohen atyre.

// ...
}

Elementi që ngriti ngjarjen është i aksesueshëm brenda funksionit nëpërmjet këtij treguesi. Vini re se ky tregues i referohet një elementi në modelin e objektit të dokumentit, jo një elementi në koleksionin jQuery. Nëse një variabël është specifikuar në parametrin e ngjarjes Object, atëherë përmes saj mund të aksesoni vetitë e objektit të ngjarjes. Le të shkruajmë një mbajtës të klikimeve të miut për dy elementë njëherësh. Kur shtypet, shfaqni emrin e etiketës në element me identifikuesin divl.

$ ("fq, div "). kliko (funksioni (p.sh) {
$ ("# divl")
.shtoj ("Element"+ e.srcElement.tagName +"
");
});

Ngjarjet e tastierës në jQuery

JQuery ofron metodat e mëposhtme për të trajtuar ngjarjet e tastierës.

keydown - Ekzekutohet kur shtypet një tast i tastierës.

keyprcss (Funksioni i kthimit të thirrjes) - Ekzekutohet kur shtypet një tast i tastierës. Njësoj si keydown (), por kthen vlerën e kodit të karakterit Unicode. Ngjarja gjenerohet vazhdimisht derisa përdoruesi të lëshojë çelësin.

tastiera (funksioni i kthimit të telefonatës) - Ekzekutohet kur lëshohet një tast i tastierës i shtypur më parë.

Si parametër për funksionin Callback, ju specifikoni një referencë për një funksion në formatin e mëposhtëm.

Emri i funksionit ([Objekti i ngjarjes]) (
// ...
}

Nëse një variabël është specifikuar në parametrin e ngjarjes Object, atëherë përmes saj mund të aksesoni vetitë e objektit të ngjarjes. Për shembull, për të marrë kodin e tastit të shtypur, mund të përdorni veçorinë e tastit Code. Si shembull, le të marrim kodin e tastit të shtypur dhe të demonstrojmë sekuencën e ngjarjeve (Lista 6.3).

Listimi 6.3. Ngjarjet e tastierës

Theksoni kutinë e tekstit dhe shtypni një buton në tastierën tuaj. Për shembull, le të shtypim tastin A me paraqitjen e tastierës ruse. Si rezultat, ne do të marrim mesazhin e mëposhtëm.
çelësi 70
keyprcss 1072
tastiera 70

Formoni ngjarje në jQuery

Metodat e mëposhtme janë krijuar për të trajtuar ngjarjet e formës.

fokus ([Callback]) - ekzekutohet kur elementi i formës merr fokusin. Nëse parametri nuk është i specifikuar, atëherë elementi do të marrë fokusin e hyrjes.

blur ([Callback]) - Ekzekutohet kur elementi i formës humbet fokusin. Nëse parametri nuk specifikohet, atëherë elementi do të humbasë fokusin e hyrjes.

ndryshim (Callback) - Ekzekutohet kur të dhënat në kutinë e tekstit ndryshojnë dhe fokusi zhvendoset në një element tjetër të formës, ose kur dorëzohen të dhënat e formularit.

dërgo ([Funksioni i kthimit të thirrjes]) - Ekzekutohet kur dorëzohen të dhënat e formularit. Nëse parametri nuk specifikohet, atëherë formulari do të dorëzohet.

zgjidhni ([Callback Function]) - Ekzekutohet kur zgjidhet përmbajtja e elementit. Nëse parametri nuk specifikohet, atëherë përmbajtja e elementit do të zgjidhet plotësisht.

Si parametër për funksionin Callback, ju specifikoni një referencë për një funksion në formatin e mëposhtëm.

Emri i funksionit ([Objekti i ngjarjes]) (
// ...
}

Elementi që ngriti ngjarjen është i aksesueshëm brenda funksionit nëpërmjet këtij treguesi. Vini re se ky tregues i referohet një elementi në modelin e objektit të dokumentit, jo një elementi në koleksionin jQuery. Nëse një variabël është specifikuar në parametrin e ngjarjes Object, atëherë përmes saj mund të aksesoni vetitë e objektit të ngjarjes.

Le të demonstrojmë se si të trajtojmë ngjarje të ndryshme formash (Lista 6.4).

Paragraf 1
Paragraf 2
Paragraf 3
Paragraf 4




!}

id = "btn2">

!}