Jquery. Događaj lebdenja mišem. Događaji prelaska miša, podizanja miša i klika

Dok nastavljamo s istraživanjem jQueryja, prijeđimo na istraživanje teme rukovanja događajima u jQueryju.

Dokumentirajte događaje
Događaji se događaju kada korisnik stupi u interakciju s web stranicom. Događaji su svojevrsna obavijest iz sustava da je korisnik izvršio neku radnju ili da je došlo do nekog stanja unutar samog sustava. Događaji se pokreću klikom na element, pomicanjem miša, pritiskom tipke na tipkovnici, promjenom veličine prozora, završetkom učitavanja web stranice i još mnogo toga. Znajući koje događaje ovaj ili onaj element web-stranice može generirati, možete napisati funkciju za obradu ovog događaja. Na primjer, prilikom slanja podataka obrasca pokreće se događaj onsubmit. Kada se ovaj događaj dogodi, možete provjeriti podatke koje je unio korisnik, te ako ne odgovaraju očekivanim, prekinuti slanje podataka.

Na samom početku knjige već smo razmotrili mogućnost izvršavanja skripti odmah nakon formiranja strukture dokumenta, bez čekanja na učitavanje ostalih elemenata. Kao što već znate, ovaj događaj možete obraditi pomoću metode ready ().

upozorenje ("Dokument je dostupan za izvršavanje skripti");
});

Ako trebate izvršiti bilo koju radnju tek nakon puno opterećenje sam HTML dokument, kao i svi ostali elementi (na primjer, slike), tada možete koristiti metodu load (). Sintaksa metode je sljedeća.

opterećenje (funkcija uzvratiti poziv)

funkcija<Название функции>([Objekt događaja]) (
// ...
}

Prikažimo poruku potvrde i vrstu događaja nakon što se web stranica potpuno učita.

$ (prozor) .load (funkcija (e) (
upozorenje ("Dokument je potpuno učitan");
upozorenje ("Tip događaja" + e.type);
});

Kao rezultat izvršenja, dobit ćemo dvije poruke.

Dokument je u potpunosti učitan
Učitaj vrstu događaja

Metoda unload () koristi se za izvođenje bilo kakvih radnji neposredno prije uklanjanja dokumenta. Metoda ima sljedeću sintaksu.
istovar (funkcija povratnog poziva)

Parametar Funkcija povratnog poziva navodi referencu funkcije u sljedećem formatu.

funkcija<Название функции>([<Объект event>]) {
// ...
}
Prikažimo poruku prije uklanjanja dokumenta.
$ (prozor) .unload (funkcija ()
(upozorenje ("Uđiviše!");
});

U ovom ćemo odjeljku pogledati još dvije korisne metode.

promjena veličine (Povratni poziv) - Izvršava se kada se promijeni veličina prozora.

pomicanje (Povratni poziv) - Izvršava se kada se pomiče sadržaj stranice, dokumenta, prozora ili elementa okvira.

Parametar Funkcija povratnog poziva navodi referencu funkcije u sljedećem formatu.
funkcija Naziv funkcije ([Objekt događaja]) (
// ...
}

Možete upravljati pomicanjem sadržaja prozora i prikazati poruku na sljedeći način.
$ (prozor) .scroll (funkcija () (
upozorenje ("Pomicanje sadržaja prozora");
});

Kao primjer korištenja metode resize (), dohvatite širinu i visinu prozora nakon promjene veličine (listing 6.1).

Listing 6.1. Prikaz širine i visine prozora prilikom promjene veličine

Kada se promijeni veličina prozora u elementu s divl identifikatorom, prikazat će se širina i visina prozora.

Metoda pogreške (Funkcija povratnog poziva) se poziva kada postoji greška na stranici ili u JavaScript kod... Parametar Funkcija povratnog poziva navodi referencu funkcije u sljedećem formatu.

funkcija Naziv funkcije ([Poruka [, URL [, broj retka]]]) (
// ...
}

Ako se pogreška dogodila u objektu prozora, tada će u funkciji povratnog poziva biti dostupna tri parametra:

Poruka - tekst koji opisuje pogrešku;
URL je puni URL dokumenta pogreške.
Broj reda - broj reda s greškom.

Sakriti JavaScript pogreške od korisnika, potrebno je vratiti true unutar callback funkcije.

$ (prozor) .pogreška (funkcija () (
vratiti istinito;
});

Pomoću metode pogreške () možete riješiti pogrešku učitavanja slike.

$ ("img"). pogreška (funkcija () (
$ (ovo) .attr ("src", "noimage.gif");
});

Bilješka
Za ispravan rad Za ovaj primjer, morate skriptu ugostiti na poslužitelju. U suprotnom, događaj neće biti obrađen.

Događaji miša u jQueryju

Sljedeće metode su predviđene za rukovanje događajima miša u jQueryju.

Klik ([Povratni poziv]) - Izvršava se kada se klikne na element ili web stranicu. Ako parametar nije naveden, simulira se klik na element. Onclick događaju prethode dva događaja: onmousedown i onmouseup. Prikažimo poruku nakon klika na bilo koji gumb.
$ ("ibutton") .kliknite (funkcija () (
});

Prebaci () - Omogućuje vam izmjenu više funkcija kada kliknete na element ili web stranicu. Funkcije se pozivaju redom. Prvi klik poziva prvu funkciju, drugi, drugi, a treći, treću. Ako treća funkcija nije definirana, onda se prva funkcija ponovno poziva i tako dalje. Metoda prekidača () ima sljedećem formatu.
prebaci (<Функция обратного вызова 1>,
<Функция обратного вызова 2>[,
<Функция обратного вызова N>])

Učinimo da se boja teksta odlomka promijeni nakon svakog klika mišem.
$ ("p"). prebacivanje
(funkcija () (
$ (ovo) .css ("boja", "crveno");
funkcija () (
$ (ovo) .css ("boja", "plava");
funkcija () (
$ (ovo) .css ("boja", "zelena");
}
) .kliknite ();

Pokušajte kliknuti na odlomak nekoliko puta. Boja teksta će se mijenjati uzastopno od crvene do plave, od plave do zelene, od zelene do ponovno crvene. Obratite pažnju na zadnji redak primjera. Nakon dodjele rukovatelja događajem, onclick događaj se poziva pomoću metode click () bez parametara. Zbog toga će boja pasusa biti crvena od samog početka.

Dblclick ([Funkcija povratnog poziva]) - izvršava se kada dvostruki klik na stavku ili web stranici. Ako parametar nije naveden, simulira se dvostruki klik na element. Ondblclick događaju prethode tri događaja: onmousedown, onmouseup i onclick. Prikažimo poruku kada dvaput kliknete na bilo koji odlomak.
$ ("p"). dblclick (funkcija () (
upozorenje ("Dvaput ste kliknuli");
});

mousedown (Povratni poziv) - Izvršava se kada se pritisne tipka miša na elementu ili stranici. Događaj onmousedown pokreće se prije događaja onmouseup i onclick.

mouseup (Povratni poziv) - Izvršava se kada se otpusti prethodno pritisnuta tipka miša. Događaj onmouseup pokreće se između događaja onmousedown i onclick. Prikažimo poruke kada kliknemo i otpustimo tipku miša iznad odlomka.

$ ("p"). mousedown (funkcija () (
$ ("# divl"). append ("Onmousedown događaj" + "
");
)). mouseup (funkcija () (
$ ("# divl"). append ("Onmouseup događaj" + "
");
});
<р>Klikni me

Mousemove - Izvršava se svaki put kada se miš pomakne. Prikažimo poruku kada pomičemo kursor preko odlomka.

$ ("p") .mousemove (funkcija () (
$ ("# divl"). append ("Onmousemove događaj" + "
");
});

mouseover (Povratni poziv) - Izvršava se kada miš pređe iznad elementa.

mouseout (Povratni poziv) - Izvršava se kada pokazivač miša napusti element. Kada zadržite pokazivač miša iznad linka, boju veze ćemo učiniti crvenom i prikazati poruku, a kada kursor napusti poveznicu, promijenit ćemo njenu boju u crnu i prikazati poruku.

$ ("a") .prelazak miša (funkcija () (
$ (ovo) .css ("boja", "crveno");
$ ("# divl"). append ("Događajprelazak miša na "+"
");
)). mouseout (funkcija () (
$ (ovo) .css ("boja", "crna");
$ ("# divl"). append ("Događajonmouseout "+"
");
}>;

Hover () - omogućuje vam upravljanje lebdenjem i napuštanjem elementa jednom metodom. Ima sljedeći format.
lebdeći (povratni poziv za događaj onmouseover, povratni poziv za događaj onmouseover)

Ponovimo naš prethodni primjer i upotrijebimo metodu hover ().

$ ("a"). zadržite pokazivač miša (funkcija () (
$ (ovo) .css ("boja", "crveno");
$ ("# divl"). append ("Onmouseover događaj" + "
"); },
funkcija () (
$ (ovo) .css ("boja", "crna");
$ ("# divl"). append ("Onmouseout događaj" + "
");
});

Metoda hover () ima još jednu prednost. Ako unutar bloka postoji još jedan blok, tada će se prilikom ulaska pozvati zasebne funkcije unutarnja jedinica a također i pri izlasku iz njega. Kada se koristi metoda lebdenja () ovi pomaci će biti zanemareni (listing 6.2).

Listing 6.2. Specifičnosti korištenja metode lebdenja()

Odabranrukovaoci:

Crta 1

2. redak

Funkcijalebdjeti ():

Crta 1

2. redak

Za prvi ugniježđeni blok definirali smo zasebne rukovaoce događajima. Ako pomaknemo pokazivač miša preko cijelog bloka u sredini, dobit ćemo sljedeći slijed događaja.
Događaj prelaska miša
Onmouseout događaj
Događaj prelaska miša
Onmouseout događaj
Događaj prelaska miša
Onmouseout događaj

Za drugi ugniježđeni blok, rukovatelji događaja se dodjeljuju metodom lebdenja (). S istom akcijom dobit ćemo samo dva događaja.
Događaj prelaska miša
Onmouseout događaj

U svim metodama predstavljenim u ovom odjeljku, još nismo shvatili parametre koji im se mogu prenijeti.

// ...
}

Element koji je pokrenuo događaj dostupan je unutar funkcije preko pokazivača this. Imajte na umu da se pokazivač this odnosi na element objektni model dokumentu, a ne na elementu zbirke jQuery. Ako je varijabla navedena u parametru objekta događaja, tada preko nje možete pristupiti svojstvima objekta događaja. Napišimo rukovao klikom miša za dva elementa odjednom. Kada se pritisne, prikažite naziv oznake u elementu s divl identifikatorom.

$ ("str, div "). kliknite (funkcija (npr) {
$ ("# divl")
.append ("Element"+ e.srcElement.tagName +"
");
});

Događaji tipkovnice u jQueryju

JQuery pruža sljedeće metode za rukovanje događajima tipkovnice.

keydown - Izvršava se kada se pritisne tipka na tipkovnici.

keyprcss (funkcija povratnog poziva) - Izvršava se kada se pritisne tipka na tipkovnici. Isto kao keydown (), ali vraća vrijednost koda znakova u Unicode kodiranje... Događaj se generira kontinuirano sve dok korisnik ne otpusti ključ.

keyup (funkcija povratnog poziva) - Izvršava se kada se otpusti prethodno pritisnuta tipka tipkovnice.

Kao parametar funkciji povratnog poziva navodite referencu na funkciju u sljedećem formatu.

funkcija Naziv funkcije ([Objekt događaja]) (
// ...
}

Ako je varijabla navedena u parametru objekta događaja, tada preko nje možete pristupiti svojstvima objekta događaja. Na primjer, da biste dobili kod pritisnute tipke, možete upotrijebiti svojstvo koda tipke. Kao primjer, uzmimo šifru pritisnute tipke i demonstriramo slijed događaja (listing 6.3).

Listing 6.3. Događaji na tipkovnici

Označite tekstni okvir i pritisnite tipku na tipkovnici. Na primjer, pritisnite tipku A s ruskim rasporedom tipkovnice. Kao rezultat toga, dobit ćemo sljedeću poruku.
pritisnuti tipku 70
ključprcss 1072
ključ 7 0

Formirajte događaje u jQueryju

Sljedeće metode osmišljene su za rukovanje događajima obrasca.

fokus ([Callback]) - izvršava se kada element obrasca primi fokus. Ako parametar nije naveden, tada će element dobiti fokus ulaza.

zamućenje ([Callback]) - Izvršava se kada element obrasca izgubi fokus. Ako parametar nije naveden, tada će element izgubiti fokus na unosu.

promjena (Povratni poziv) - Izvršava se kada se podaci u tekstualnom okviru promijene i fokus se premjesti na drugi element obrasca ili kada se podaci obrasca predaju.

dostavi ([Funkcija povratnog poziva]) - Izvršava se kada se podaci obrasca predaju. Ako parametar nije naveden, obrazac će biti poslan.

select ([Callback Function]) - Izvršava se kada je odabran sadržaj elementa. Ako parametar nije naveden, tada će sadržaj elementa biti potpuno odabran.

Kao parametar funkciji povratnog poziva navodite referencu na funkciju u sljedećem formatu.

funkcija Naziv funkcije ([Objekt događaja]) (
// ...
}

Element koji je pokrenuo događaj dostupan je unutar funkcije preko pokazivača this. Imajte na umu da se pokazivač this odnosi na element u objektnom modelu dokumenta, a ne na element u kolekciji jQuery. Ako je varijabla navedena u parametru objekta događaja, tada preko nje možete pristupiti svojstvima objekta događaja.

Pokažimo kako rukovati raznim događajima obrasca (listing 6.4).

Stavak 1
Stavak 2
Stavak 3
Stavak 4




!}

id = "btn2">

!}