jquery ngjarje mbi mouseover. Mousedown, mouseup dhe klikoni ngjarjet

Në këtë artikull do flasim rreth ngjarjeve të miut Javascript. Këto ngjarje janë shumë të rëndësishme në Javascript dhe përdoren në çdo hap. Fillimisht do t'ju tregoj për të gjitha ngjarjet standarde të miut: ulja e miut, ngritja e miut, klikimi, dblclick, lëvizja e miut dhe në fund zhvendosja e mausit dhe largimi i miut.

Mousedown, mouseup dhe klikoni ngjarjet

Kur përdoruesi klikon në një element, të paktën 3 ngjarje të miut aktivizohen në këtë renditje:

mousedown , përdoruesi shtypi butonin e miut në element

mouseup , përdoruesi ka lëshuar butonin e miut në element

klikoni , ulja e miut dhe ngjarjet e mouseup të zbuluara në element

Në thelb, ngjarjet e ngritjes së miut dhe të mouseup janë më të dobishme se ngjarjet e klikimeve. Ndonjëherë përdoruesi klikon miun, por ngjarja e klikimit nuk ndizet.

Le të supozojmë se përdoruesi klikoi një buton në një lidhje, më pas e zhvendosi kursorin diku anash dhe e lëshoi ​​butonin. Lidhja përpunoi vetëm ngjarjen e uljes së miut. Ju gjithashtu mund të riprodhoni situatën e kundërt kur përdoruesi shtyp butonin e miut dhe më pas lëviz kursorin mbi lidhjen dhe lëshon butonin. Vetëm ngjarja e mouseup aktivizohet. Në raste të tjera, klikoni ndez.

Gjithsesi, ky problem shfaqet vetëm nëse dëshironi.Duhet të regjistroni mbajtësit e ngjarjeve onmousedown/up, por në shumicën e rasteve mjafton ngjarja e klikimit.

Mos harroni se nëse përdorni sinjalizime, shfletuesi mund të ngatërrohet dhe të humbasë rendin e ngjarjeve që po ekzekutohen dhe numrin e herëve që ato thirren.

Ngjarja dblclick (klikimi i dyfishtë)

Ngjarja dblclick përdoret shumë më rrallë se të gjitha ngjarjet e tjera të miut. Nëse e përdorni, sigurohuni që të mos përdorni mbajtësit e ngjarjeve onclick dhe ondblclick për të njëjtën gjë. Elementi HTML. Është pothuajse e pamundur të përcaktohet se çfarë bëri përdoruesi në këtë rast.

Kur përdoruesi klikon dy herë mbi një element, fillimisht aktivizohet ngjarja e klikimit dhe vetëm më pas ngjarja dblclick. Përdorimi i mesazheve alarmuese këtu është gjithashtu jashtëzakonisht i rrezikshëm.

Ngjarja e lëvizjes së miut

Ngjarja e lëvizjes së miut funksionon mirë, por duhet të jeni të vetëdijshëm se përpunimi i këtyre llojeve të ngjarjeve mund të marrë pak kohë. Ngjarja e lëvizjes së miut ndizet kur përdoruesi lëviz kursorin e miut një piksel. Duket se asgjë e veçantë nuk ndodh, por brenda ka funksione komplekse, procesi i të cilave kërkon një periudhë të gjatë kohore. Kjo mund të çojë në punë e paqëndrueshme faqe. Prandaj, është më mirë të përdorni mbajtësin e ngjarjeve onmousemove vetëm aty ku është vërtet i nevojshëm dhe sigurohuni që ta hiqni atë në të ardhmen.

Element.onmousemove = bëj Diçka;
// Më vonë
element.onmousemove = null;

Ngjarjet e kalimit të miut dhe të largimit të miut

Le të shohim një shembull të vogël. Provoni të lëvizni kursorin e miut mbi elementë me prejardhje të ndryshme. Elementi 1 duhet të pulsojë pak kur rri pezull mbi të - kjo shkakton ngjarjen e vendosjes së miut.

Elementi numër 1

Hapësira e elementit numër 2

Megjithatë, siç mund ta shihni, kjo ngjarje ndizet gjithashtu kur vendosni miun mbi elementin nr. 2 dhe madje shtrihet.

Arsyeja për këtë sjellje është se ngjarja e vendosur në elementin e parë vlen edhe për nyjet e saj fëmijë. Gjithçka është shumë e qartë, por problemi lind kur duhet të kryejmë disa veprime kur kursori i miut lëviz, për shembull, nga elementi i hapësirës te elementi nr. 2.

"Nga erdhi miu?" ose të lidhura Target, fromElement dhe toElement pronat

Microsoft krijoi dy veti për të ruajtur këtë informacion:

• fromElement - i referohet elementit nga i cili erdhi miu.
• toElement - elementi ku erdhi miu.

Kodi i kryqëzuar i shfletuesit

Dhe kështu, nëse doni të dini se nga erdhi miu duke përdorur ngjarjen e kalimit të miut, përdorni skriptin e mëposhtëm:

Funksioni doSomething(e) (
var relTarg = e.Target i lidhur || e.ngaElementi;
}

Në rast të përdorimit të ngjarjes së nxjerrjes së miut (elementi në të cilin lëviz kursori):

Funksioni doSomething(e) (
nëse (!e) var e = dritare.ngjarje;
var relTarg = e.Target i lidhur || e.toElement;
}

Mouseenter dhe mouseleave

Microsoft ofron një mënyrë tjetër për të zgjidhur problemin. Ata krijuan 2 ngjarje të reja mouseenter dhe mouseeleave . Këto ngjarje kanë të njëjtën sjellje si mouseover dhe mouseout . I vetmi ndryshim është se ngjarjet nuk "kërcejnë" në elementet fëmijë. Kjo e zgjidh shumë mirë problemin tonë të paraqitur në shembull.

Epo, kjo është gjithçka për të cilën doja të flisja Ngjarjet Javascript minjtë. Do të jem i lumtur t'u përgjigjem komenteve tuaja.

Ne vazhdojmë të studiojmë jQuery, dhe tani do të fillojmë të studiojmë një seksion të tillë si trajtimi i ngjarjeve në jQuery.

Ngjarjet e dokumentit
Ngjarjet ndodhin kur një përdorues ndërvepron me një faqe interneti. Ngjarjet janë një lloj njoftimi për sistemin se përdoruesi ka kryer ndonjë veprim ose ka lindur ndonjë gjendje brenda vetë sistemit. Ngjarjet ndodhin kur klikohet një element, lëviz miu, shtypet një tast i tastierës, ndryshon madhësia e një dritareje, ngarkimi i një faqe interneti përfundon, etj. Duke ditur se çfarë ngjarjesh mund të gjenerojë një element i veçantë i një faqe interneti, mund të shkruani një funksion për të trajtuar këtë ngjarje. Për shembull, kur dorëzohen të dhënat e formularit, ndodh ngjarja onsubmit. Kur ndodh kjo ngjarje, ju mund të kontrolloni të dhënat e futura nga përdoruesi dhe, nëse nuk është ashtu siç pritej, të anuloni dorëzimin 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 që elementet e tjerë të ngarkohen. Siç e dini tashmë, ju mund ta trajtoni këtë ngjarje duke përdorur metodën gati().

alert ("Dokumenti është i disponueshëm për ekzekutimin e skriptit");
});

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

ngarkesa (Funksioni kthimi i thirrjes)

funksioni ([Objekti i ngjarjes]) (
// ...
}

Ne do të shfaqim një mesazh konfirmimi dhe llojin e ngjarjes pasi faqja e internetit të jetë ngarkuar plotësisht.

$(dritare).load(funksion(e) (
alert ("Dokumenti është ngarkuar plotësisht");
alert("Lloji i ngjarjes" + e.type);
});

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

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

Metoda unload() synon të kryejë çdo veprim menjëherë përpara shkarkimit të një dokumenti. Metoda ka sintaksën e mëposhtme.
shkarkoj (funksioni i kthimit të thirrjes)

Parametri Callback Function specifikon një referencë për një funksion të formatit të mëposhtëm.

funksioni ([]) (
// ...
}
Ne do të shfaqim një mesazh përpara se të ngarkojmë dokumentin.
$(dritare).shkarkoj(funksion()
( alarm ("Hyni brendamë shumë!");
});

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

ndryshimi i madhësisë (funksioni i kthimit të thirrjes) - ekzekutohet kur ndryshon madhësia e dritares.

lëviz (funksioni i kthimit të thirrjes) - Ekzekutohet kur përmbajtja e një elementi faqeje, dokumenti, dritareje ose kornize lëviz.

Parametri Callback Function specifikon një referencë për një funksion të formatit të mëposhtëm.
Emri i funksionit ([Objekti i ngjarjes]) (
// ...
}

Mund të përpunoni lëvizjen e përmbajtjes së dritares dhe të shfaqni një mesazh si ky.
$(dritare).scroll(funksion() (
alert ("Lëvizni përmbajtjen e dritares");
});

Si shembull i përdorimit të metodës resize(), marrim 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ë

Shfaqni gjerësinë dhe lartësinë e dritares kur ndryshoni
madhësia

Kur ndryshoni madhësinë e një dritareje, elementi me identifikues divl do të shfaqë gjerësinë dhe lartësinë e dritares.

Metoda e gabimit (funksioni i kthimit të thirrjes) thirret kur ka një gabim në faqe ose në Kodi JavaScript. Parametri Callback Function specifikon një referencë për një funksion të formatit të mëposhtëm.

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

Nëse ka ndodhur një gabim 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 - URL e plotë e dokumentit me gabimin;
Numri i linjës - numri i rreshtit me gabim.

Për t'u fshehur Gabime në JavaScript nga përdoruesit, është e nevojshme të kthehet true brenda funksionit të kthimit të thirrjes.

$(dritare).error(funksion())(
kthehu i vërtetë;
});

Ju mund të përdorni metodën error() për të trajtuar një gabim të ngarkimit të imazhit.

$("img").error(funksion() (
$(this).attr("src", "noimage.gif");
});

shënim
Për funksionimin e duhur Për këtë shembull, ju duhet të mbani skriptin në server. Përndryshe, ngjarja nuk do të përpunohet.

Ngjarjet e miut në jQuery

Metodat e mëposhtme përdoren për të trajtuar ngjarjet e miut në jQuery.

Kliko - Ekzekutohet kur klikohet një element ose faqe ueb. Nëse parametri nuk është i specifikuar, kjo do të simulojë një klikim në element. Ngjarja onclick paraprihet nga dy ngjarje: onmousedown dhe onmouseup. Ne do të shfaqim një mesazh pasi të klikojmë në çdo buton.
$("button"). kliko(funksion() (
});

Toggle() - Ju lejon të kaloni nëpër funksione të shumta kur klikoni në një element ose faqe interneti. Funksionet thirren një nga një. Në klikimin e parë thirret funksioni i parë, i dyti, i dyti, 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 toggle() ka formati tjetër.
ndërroj(,
[,
])

Le të bëjmë që ngjyra e tekstit të paragrafit të ndryshojë pas çdo klikimi të mausit.
$("p").toggle
(funksioni () (
$(this).css("ngjyra", "e kuqe");
funksioni () (
$(this).css("ngjyra", "blu");
funksioni () (
$(this).css("ngjyra", "jeshile");
}
) .kliko();

Provoni të klikoni disa herë në një paragraf. 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 ngrihet 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ë në një element ose faqe interneti. Nëse parametri nuk është i specifikuar, kjo do të simulojë një klik të dyfishtë në element. Ngjarja ondblclick paraprihet nga tre ngjarje: onmousedown, onmouseup dhe onclick. Ne do të shfaqim një mesazh kur klikoni dy herë në ndonjë paragraf.
$("p").dblclick(funksion() (
alert ("Ke klikuar dy herë");
});

mousedown (funksioni i kthimit të thirrjes) - ekzekutohet kur shtypet butoni i mausit në një element ose faqe. Ngjarja onmousedown ndodh para ngjarjeve onmouseup dhe onclick.

mouseup (funksioni i kthimit të thirrjes) - ekzekutohet kur lëshohet një buton i mausit i shtypur më parë. Ngjarja onmouseup ndodh midis ngjarjeve onmousedown dhe onclick. Ne do të shfaqim mesazhe kur shtypni dhe lëshoni butonin e miut mbi një paragraf.

$("p").mousedown(function() (
$("#divl").append("Ngjarja onmousedown" + "
");
)) mouseup(funksion() (
$("#divl").append("Ngjarja Onmouseup" + "
");
});
Klikoni mua

Mousemove (funksioni i kthimit të thirrjes) - ekzekutohet sa herë që mausi lëvizet. Ne do të shfaqim një mesazh kur lëvizni kursorin mbi një paragraf.

$("r").mousemove(function() (
$("#divl").append("Ngjarja Onmousemove" + "
");
});

mouseover (funksioni Callback) - ekzekutohet kur miu rri pezull mbi një element.

mouseout (funksioni i kthimit të thirrjes) - ekzekutohet kur kursori i miut largohet nga elementi. Kur kaloni kursorin mbi një lidhje, ne do ta bëjmë lidhjen me ngjyrë të kuqe dhe do të shfaqim një mesazh, dhe kur kursori largohet nga lidhja, ne do ta ndryshojmë ngjyrën e tij në të zezë dhe do të shfaqim një mesazh.

$("a"). mouseover(funksion() (
$(this).css("ngjyra", "e kuqe");
$("#divl").append("Ngjarjeonmouseover" + "
");
)) mouseout(funksion() (
$(this).css("ngjyrë", "e zezë");
$("#divl").append("Ngjarjeonmouseout" + "
");
}>;

Hover() - ju lejon të trajtoni kursorin duke lëvizur dhe duke u larguar nga një element duke përdorur një metodë. Ka formatin e mëposhtëm.
hover (mbrapsht thirrja e ngjarjes onmouseover, kthimi i ngjarjes mbi mouseout)

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

$("a").hover(funksion() (
$ (kjo).css ("ngjyra", "e kuqe");
$("#divl").append("Ngjarja Onmouseover" + "
"); },
funksioni () (
$(this).css("ngjyrë", "e zezë");
$("#divl").append("Ngjarja Onmouseout" + "
");
});

Përdorimi i metodës hover() ka një avantazh tjetër. Nëse një bllok tjetër ekziston brenda një blloku, atëherë funksionet individuale do të thirren kur futen në bllok. njësi e brendshme, si dhe kur e lini atë. Kur përdorni metodën hover(), këto lëvizje do të injorohen (Lista 6.2).

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

Karakteristikat e përdorimit të metodës hover().






.cls1 (

mbushje: 30 px;
}
.cls2 (

}



Të ndaratrajtuesit:



Linjë 1

Rreshti 2



Funksionirri pezull ():



Linjë 1

Rreshti 2

Për bllokun e parë të mbivendosur, ne përcaktuam mbajtës të veçantë të ngjarjeve. Nëse lëvizim kursorin e miut nëpër të gjithë bllokun në mes, marrim sekuencën e mëposhtme të ngjarjeve.
ngjarje mbi mouseover
ngjarje onmouseout
ngjarje mbi mouseover
ngjarje onmouseout
ngjarje mbi mouseover
ngjarje 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.
ngjarje mbi mouseover
ngjarje onmouseout

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

// ...
}

Elementi që shkaktoi ngjarjen është i aksesueshëm brenda funksionit përmes këtij treguesi. Vini re se ky tregues i referohet elementit modeli i objektit dokument, jo elementi i mbledhjes jQuery. Nëse një variabël është specifikuar në parametrin e objektit të ngjarjes, atëherë përmes tij 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 klikohet, ne do të shfaqim emrin e etiketës në elementin me identifikuesin divl.

$("r, div"). kliko(funksion(p.sh) {
$("#divl")
.append("Element" + e.srcElement.tagName + "
");
});

Ngjarjet e tastierës në jQuery

Metodat e mëposhtme përdoren për të trajtuar ngjarjet e tastierës në jQuery.

tastierë (funksioni i kthimit të thirrjes) - ekzekutohet kur shtypet një tast i tastierës.

keyprcss (funksioni i kthimit të thirrjes) - ekzekutohet kur shtypet një tast i tastierës. Ngjashëm me metodën keydown(), por kthen vlerën e kodit të karakterit në Kodimi Unicode. Ngjarja gjenerohet vazhdimisht derisa përdoruesi të lëshojë çelësin.

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

Parametri Callback Function është një referencë për një funksion të formatit të mëposhtëm.

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

Nëse një variabël është specifikuar në parametrin e objektit të ngjarjes, atëherë përmes tij 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, do të marrim kodin e tastit të shtypur dhe do të demonstrojmë sekuencën e ngjarjeve (Lista 6.3).

Listimi 6.3. Ngjarjet e tastierës

Ngjarjettastierat

Zgjidhni një fushë teksti dhe shtypni një tast në tastierën tuaj. Për shembull, shtypni tastin A me paraqitjen e tastierës ruse. Si rezultat, ne do të marrim mesazhin e mëposhtëm.
çelësi 70
keyprcss 1072
tastierë 70

Formoni ngjarje në jQuery

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

fokus ([funksioni i kthimit të thirrjes]) - ekzekutohet kur një element i formës merr fokusin. Nëse parametri nuk specifikohet, elementi do të marrë fokusin e hyrjes.

blur ([funksioni i kthimit të thirrjes]) - ekzekutohet kur një element i formës humbet fokusin. Nëse parametri nuk specifikohet, elementi do të humbasë fokusin e hyrjes.

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

submit([Callbackfunction]) - ekzekutohet kur dorëzohen të dhënat e formularit. Nëse parametri nuk specifikohet, formulari do të dorëzohet.

zgjidhni ([ Funksioni i kthimit të thirrjes ]) - Ekzekutohet kur përmbajtja e një elementi zgjidhet. Nëse parametri nuk specifikohet, përmbajtja e elementit do të theksohet plotësisht.

Parametri Callback Function është një referencë për një funksion të formatit të mëposhtëm.

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

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

Le të demonstrojmë se si të përpunojmë ngjarje të formave të ndryshme (Lista 6.4).

Ngjarjetforma









Paragraf 1
Paragraf 2
Paragraf 3
Paragraf 4

Pra, ne kemi krijuar një formë me tre elementë. Kur zgjidhni një artikull nga lista, do të shfaqet një mesazh me vlerën e artikullit të zgjedhur. Nëse zgjidhni një fushë teksti, ngjyra e sfondit do të ndryshojë dhe nëse hiqni fokusin nga fusha, ngjyra e sfondit do të kthehet në të bardhë. Duke klikuar butonin Submit shfaqet një kuti dialogu që ju lejon të anuloni dërgimin e të dhënave të formularit. Poshtë formularit ka katër butona. Butoni i parë ju lejon të nënvizoni përmbajtjen fushë teksti. Pas zgjedhjes, do të shfaqet një mesazh për zgjedhjen e fragmentit, pasi ne kemi përcaktuar mbajtësin përkatës. I njëjti mesazh mund të merret nëse përdorni miun për të zgjedhur një fragment në fushë. Butoni i dytë ju lejon të vendosni fokusin e hyrjes në fushën e tekstit dhe butoni i tretë ju lejon ta hiqni atë. Dhe së fundi, butoni i katërt është për dërgimin e të dhënave të formularit. Duke klikuar këtë buton shfaqet një kuti dialogu për të konfirmuar që të dhënat janë dërguar.

Trajtuesit e përgjithshëm të ngjarjeve në jQuery

Në seksionet e mëparshme, ne shikuam trajtuesit e ngjarjeve specifike. Biblioteka jQuery ju lejon gjithashtu të caktoni mbajtës për ngjarje të ndryshme (përfshirë ngjarjet tuaja) me një metodë. Metodat e mëposhtme përdoren për të caktuar, thirrur dhe hequr mbajtësit.

Lidhja (Lloji i ngjarjes[, Të dhënat], Funksioni i kthimit të thirrjes) - ju lejon të caktoni një mbajtës për të gjithë elementët e koleksionit. Vlerat e mëposhtme mund të specifikohen në parametrin Lloji i ngjarjes:
ngjarjet e dokumentit: ngarkimi, shkarkimi, ndryshimi i madhësisë, lëvizja, gabimi;
Ngjarjet e miut: klikoni, dblclick, ulja e miut, mouseup, mousemove, mouseover, mouseout, mouseenter, mouseeleave;
ngjarjet e tastierës: keydown, keyprcss, keyup;
formoni ngjarjet: fokusimi, turbullimi, ndryshimi, përzgjedhja, dërgimi.

Ne kemi shqyrtuar tashmë pothuajse të gjitha këto ngjarje në seksionet e mëparshme. Për shembull, mund të caktoni një mbajtës të ngjarjeve të klikimeve për të gjithë butonat si ky.

$ (":button") .bind("kliko", funksion()
( alarm ("Tie shtypurnëbutonin");
});

Dy ngjarje të miut mbetën të paekzaminuara. Ngjarja mouseenter ekzekutohet kur kursori i miut qëndron pezull mbi një element dhe ngjarja e largimit të miut ekzekutohet kur kursori i miut largohet nga elementi. Përdorimi i këtyre ngjarjeve është i ndryshëm nga trajtimi i ngjarjeve të zhvendosjes së miut dhe të zhvendosjes së miut. Nëse një bllok tjetër ekziston brenda një blloku, atëherë ngjarja e kalimit të miut do të aktivizohet kur hyn në bllokun e brendshëm dhe ngjarja e daljes së miut do të aktivizohet kur largohet prej tij. Kur përdorni ngjarjet e futjes së miut dhe të fletës së miut, këto lëvizje do të shpërfillen (Lista 6.5).

Listimi 6.5. mouseenter dhe mouseeleave ngjarjet

Ngjarjetfutni miun dhegjethe miu






.cls1 (
kufiri: 2 px i zi; ngjyra e sfondit: jeshile;
mbushje: 30 px;
}
.cls2 (
kufiri: 2 px i zi; ngjyra e sfondit: argjendi;
}



Ngjarjetmbi mouse dhemouseout:



Linjë 1

Rreshti 2



Ngjarjetfutni miun dhegjethe miu:



Linjë 1

Rreshti 2

Për bllokun e parë të mbivendosur, ne përcaktuam mbajtësit e ngjarjeve të zhvendosjes së miut dhe të zhvendosjes së miut. Nëse lëvizni kursorin e miut nëpër të gjithë bllokun në mes, marrim sekuencën e mëposhtme të ngjarjeve.
ngjarje mbi mouse
ngjarja e largimit të miut
ngjarje mbi mouse
ngjarja e largimit të miut
ngjarje mbi mouse
ngjarja e largimit të miut

Trajtuesit e ngjarjeve të futjes së miut dhe të fletës së miut janë caktuar në bllokun e dytë të mbivendosur. Me të njëjtin veprim, marrim vetëm dy ngjarje.
ngjarje mouseenter
ngjarje e gjetheve të miut

Parametri Lloji i ngjarjes mund të specifikojë një kombinim ngjarjesh të ndara nga një hapësirë. Le të ndryshojmë klasën e lidhjes kur miu është pezulluar dhe kur kursori të largohet, ne do ta fshijmë klasën.

$("a").bind("mouseenter mouseeleave", function() (
$(this).toggleClass("clsl");
});

Për më tepër, ju mund të caktoni ngjarjet tuaja duke përdorur metodën bind(). Ngritja e ngjarjeve tuaja bëhet duke përdorur metodat trigger() dhe triggerHandler(). Le të krijojmë ngjarjen tonë dhe më pas ta quajmë atë.

$("#divl").bind("MyEvent", funksion() (
alarm ("Trajtimi i ngjarjes suaj");
});
$("#divl"). shkas ("myEvent11) ; // Aktivizon një ngjarje

Parametri Callback Function është një referencë për një funksion të formatit të mëposhtëm.

Emri i funksionit ([Ngjarja e objektit[, Argumentet] ]) (
// ...
}

$("#divl").bind("myEvent11, funksion(e, msg) (

});
$("#divl").trigger("MyEvent", ["Mesazhi ynë"]);

Duke përdorur parametër opsional Të dhënat mund t'i kalojnë vlerat funksionit të mbajtësit. Për ta bërë këtë, parametrat dhe vlerat e kaluara duhet të specifikohen si më poshtë.
{
Parametri 1: "Vlera 1",
Parametri 2: "Vlera 2",
Parametrat: "Vlera"
}

Ju mund të merrni vlerën e parametrit të kaluar brenda funksionit si kjo.
3vlera = Ngjarja e objektit.data.Parametri

Le të shohim një shembull.

funksioni f_click(e) (
var str = "msgl = 11 + e.data.msgl + "\n";
str += "msg2 = 11 + e.data.msg2; alarm(str);
kthej false;
}
$("a").bind(
"kliko", // Ngjarja
(msgl: "Message 1", msg2: "Message 2"), // Të dhënat tona
f_click // Lidhja e funksionit
) ;

msgl = Mesazh 1
msg2 = Mesazhi 2

Ju mund të caktoni shumë mbajtës për një ngjarje. Në këtë rast, ato do të thirren sipas radhës në të cilën janë përcaktuar.

alarm ("Së parimbajtës");
});
$("#btnl").bind("kliko", funksion() (
alarm ("E dytambajtës");
});

Kur klikoni në një element me ID btnl, dy mesazhe do të shfaqen në sekuencë.
Trajtuesi i parë
Trajtuesi i dytë

One(Lloji i ngjarjes[, Të dhënat], Funksioni i kthimit të thirrjes) - ju lejon të caktoni një mbajtës për të gjithë elementët e koleksionit. Metoda është identike me bind(), por ngjarja aktivizohet vetëm një herë, pas së cilës mbajtësi do të hiqet automatikisht.
$("button").one("kliko", funksion()
( alarm ("Keni klikuar një buton");
});

Pas klikimit të parë në buton, do të shfaqet mesazhi i specifikuar, dhe pas klikimit të dytë, mbajtësi nuk do të thirret më.

Trigger (Lloji i ngjarjes[, grupi i të dhënave]) - thërret mbajtësin e caktuar të ngjarjeve.
$(document).bind("kliko", funksion() (
// Paralajmërim i mbajtësit ("Ngjarja Onclick");
});
$(dokument).trigger("kliko"); // Thirrni mbajtësin

Nëse specifikohet një grup të dhënash, ai do t'i kalohet funksionit të kthimit të thirrjes në mbajtës. Çdo parametër do të korrespondojë me një element të grupit.

$("#divl").bind("myEvent", funksion(e, msgl, msg2) (
$("#div2") . shtoj ("NgjarjaNgjarja ime. " + msgstr " 11 +
msg2) .append("br");
});
$("p").click(function() (
$("#divl").trigger("MyEvent", ["Message1", "Message2" ]);
});

Kliko këtu

Si rezultat i ekzekutimit të këtij kodi, ne do të marrim një mesazh.
Ngjarja ime Event. Mesazhi 1 Mesazhi 2

TaggerHandler(EventType[, DataArray]) - thërret një mbajtës për ngjarjen e specifikuar. Ndryshe nga metoda trigger(), ngjarja aktivizohet vetëm në elementin e parë të koleksionit. Për më tepër, kur përdorni metodën triggerHandle(), veprimi i paracaktuar nuk ndodh.
$("formë").bind("submit", funksion(e, msg) (
nëse (msg) (
alert("Formulari nuk do të dorëzohet." + msg);
}
tjeter(
alert ("Formulari do të dorëzohet");
});
$(":button").bind("kliko", funksion() (
$("formë") . triggerHandler("submit", ["Të dhënat tona"]);
});