Učenje Jave. Javascript događaji miša

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

Dokument događaji
Događaji se javljaju kada korisnik stupi u interakciju s web stranicom. Događaji su vrsta obavijesti iz sistema da je korisnik izvršio neku radnju ili da je došlo do nekog stanja unutar samog sistema. Događaji se pokreću klikom na element, pomicanjem miša, pritiskom na tipku 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 rukovanje ovim događajem. Na primjer, prilikom slanja podataka obrasca, onsubmit događaj se pokreće. Kada dođe do ovog događaja, možete provjeriti podatke koje je unio korisnik, a ako se ne poklapaju sa očekivanim, prekinuti slanje podataka.

Na samom početku knjige već smo razmatrali 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 rukovati pomoću metode ready ().

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

Ako trebate izvršiti bilo koju radnju tek nakon što se sam HTML dokument u potpunosti učita, kao i svi ostali elementi (na primjer, slike), onda možete koristiti metodu load (). Sintaksa metode je sljedeća.

učitavanje (funkcija povratnog poziva)

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

Prikažimo poruku potvrde i tip 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, dobićemo dvije poruke.

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

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

Parametar Callback Function specificira referencu funkcije u sljedećem formatu.

funkcija<Название функции>([<Объект event>]) {
// ...
}
Hajde da prikažemo poruku pre nego što učitamo dokument.
$ (prozor) .unload (funkcija ()
(upozorenje ("Uđiviše!");
});

U ovom dijelu ćemo 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 Callback Function specificira referencu funkcije u sljedećem formatu.
funkcija Naziv funkcije ([Objekat događaja]) (
// ...
}

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

Kao primjer korištenja metode resize (), dobijte š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 promeni veličina prozora u elementu sa divl identifikatorom, biće prikazana širina i visina prozora.

Metoda greške (povratni poziv) se poziva kada postoji greška na stranici ili JavaScript-u. Parametar Callback Function specificira referencu funkcije u sljedećem formatu.

funkcija Naziv funkcije ([Poruka [, URL [, Broj linije]]]) (
// ...
}

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

Poruka - tekst koji opisuje grešku;
URL je puni URL dokumenta o grešci.
Broj reda - broj reda sa greškom.

Da biste sakrili JavaScript greške od korisnika, vratite true unutar funkcije povratnog poziva.

$ (prozor) .error (funkcija () (
return true;
});

Koristeći metodu error (), možete riješiti grešku učitavanja slike.

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

Bilješka
Da bi ovaj primjer ispravno funkcionisao, morate postaviti skriptu na server. U suprotnom, događaj neće biti obrađen.

Događaji miša u jQueryju

Sledeće metode su obezbeđ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će se klik na element. Onclick događaju prethode dva događaja: onmousedown i onmouseup. Hajde da prikažemo poruku nakon klika na bilo koje dugme.
$ ("ibutton") .click (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, drugu, a treći, treću. Ako treća funkcija nije definirana, onda se prva funkcija ponovo poziva i tako dalje. Metoda toggle () ima sljedeći format.
prebaci (<Функция обратного вызова 1>,
<Функция обратного вызова 2>[,
<Функция обратного вызова N>])

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

Pokušajte kliknuti na pasus 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 red primjera. Nakon dodjeljivanja rukovatelja događajima, onclick događaj se poziva pomoću metode click () bez parametara. Iz tog razloga, boja pasusa će biti crvena od samog početka.

Dblclick ([Callback Function]) - Izvršava se kada dvaput kliknete na element ili web stranicu. Ako parametar nije naveden, simuliraće se dvostruki klik na element. Ondblclick događaju prethode tri događaja: onmousedown, onmouseup i onclick. Hajde da prikažemo poruku kada dvaput kliknete na bilo koji pasus.
$ ("p"). dblclick (funkcija () (
upozorenje ("Kliknuli ste dvaput");
});

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 pritisnuto dugme miša. Događaj onmouseup pokreće se između događaja onmousedown i onclick. Hajde da prikažemo poruke kada kliknemo i otpustimo dugme miša preko pasusa.

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

Mousemove - Izvršava se svaki put kada se miš pomjeri. Hajde da prikažemo poruku kada pomeramo kursor preko pasusa.

$ ("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 kursor miša napusti element. Kada pređete mišem preko linka, boju linka ćemo učiniti crvenom i prikazati poruku, a kada kursor napusti link, 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", "crno");
$ ("# divl"). append ("Događajonmouseout "+"
");
}>;

Hover () - omogućava vam da upravljate lebdenjem i ostavljanjem elementa jednom metodom. Ima sljedeći format.
lebdeći (povratni poziv za događaj onmouseover, povratni poziv za događaj onmouseout)

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

$ ("a"). lebdeći (funkcija () (
$ (ovo) .css ("boja", "crveno");
$ ("# divl"). append ("Onmouseover događaj" + "
"); },
funkcija () (
$ (ovo) .css ("boja", "crno");
$ ("# divl"). append ("Onmouseout događaj" + "
");
});

Metoda hover () ima još jednu prednost. Ako unutar bloka postoji još jedan blok, tada će se pojedinačne funkcije pozivati ​​pri ulasku u unutrašnji blok, kao i pri izlasku iz njega. Kada koristite metodu lebdenja () ovi pokreti će biti zanemareni (Listing 6.2).

Listing 6.2. Specifičnosti korištenja lebdeće metode()

Odabranorukovaoci:

Linija 1

Linija 2

Funkcijalebdjeti ():

Linija 1

Linija 2

Za prvi ugniježđeni blok, definirali smo odvojene rukovaoce događajima. Ako pomjerimo kursor miša preko cijelog bloka u sredini, dobićemo sljedeći niz događaja.
Onmouseover događaj
Onmouseout događaj
Onmouseover događaj
Onmouseout događaj
Onmouseover događaj
Onmouseout događaj

Za drugi ugniježđeni blok, obrađivači događaja se dodijeljuju pomoću metode hover (). Sa istom akcijom dobit ćemo samo dva događaja.
Onmouseover događaj
Onmouseout događaj

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

// ...
}

Element koji je pokrenuo događaj je dostupan 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, onda preko nje možete pristupiti svojstvima objekta događaja. Hajde da napišemo obrađivač klikova mišem za dva elementa odjednom. Kada se pritisne, prikazuje naziv oznake u elementu sa divl identifikatorom.

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

Događaji tastature u jQueryju

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

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

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

keyup (funkcija povratnog poziva) - Izvršava se kada se otpusti prethodno pritisnuti taster na tastaturi.

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

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

Ako je varijabla navedena u parametru objekta događaja, onda preko nje možete pristupiti svojstvima objekta događaja. Na primjer, da biste dobili šifru pritisnute tipke, možete koristiti svojstvo šifre ključa. Kao primjer, uzmimo šifru pritisnute tipke i demonstriramo slijed događaja (Listing 6.3).

Listing 6.3. Događaji na tastaturi

Označite okvir za tekst i pritisnite tipku na tastaturi. Na primjer, pritisnite tipku A sa ruskim rasporedom tastature. Kao rezultat toga, dobit ćemo sljedeću poruku.
tastatura 70
keyprcss 1072
ključ 7 0

Formirajte događaje u jQueryju

Sljedeće metode su dizajnirane za rukovanje događajima iz forme.

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

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

promjena (povratni poziv) - Izvršava se kada se podaci u tekstualnom polju promijene i fokus se pomjeri na drugi element obrasca ili kada se podaci obrasca predaju.

submit ([Callback Function]) - Izvršava se kada se podaci obrasca predaju. Ako parametar nije naveden, obrazac će biti dostavljen.

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, specificirate referencu na funkciju u sljedećem formatu.

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

Element koji je pokrenuo događaj je dostupan 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, onda preko nje možete pristupiti svojstvima objekta događaja.

Hajde da demonstriramo kako rukovati raznim događajima u formi (listing 6.4).

Paragraf 1
Paragraf 2
Paragraf 3
Paragraf 4




!}

id = "btn2">

!}