JavaScript - Vrste događaja. JavaScript: Događaji Događaji za rad s javascript unosom

Mogućnost JavaScripta za stvaranje dinamike html stranice temelji se na tri stupa. O dva od njih već je bilo riječi u prethodnim člancima. I treće su događaji.

Upravljanje prozorima preglednika pomoću objekta prozora.
Upravljanje objektima unutar prozora je DOM.
Izvršite JavaScript kod na događajima.

Događaj je reakcija računala na radnju korisnika. Na primjer, uz t.z. JavaScript događajem smatra se pritisak tipke tipkovnice, pomicanje i klikanje tipki miša te zatvaranje prozora preglednika. Sva događanja s t.z. javaScript generiraju dokument i objekti preglednika (ne postoji koncept 'korisnika'). Na primjer, kada kliknete na odlomak, događaj klika mišem generira objekt - odlomak.

Kako biste mogli pokrenuti neki JavaScript kod koji reagira na događaje, morate taj kod povezati s događajem generiranim iz određenog objekta, tj. s određenim događajem iz određenog objekta. Ta se radnja naziva pretplata na događaj.

Pretplata znači da vezujemo funkciju za određeni događaj iz određenog objekta u objektnom modelu preglednika. I kada ovaj objekt kreira (generira) ovaj događaj, ova funkcija će automatski raditi.

onclick - klik na tipku miša.
ondblclick - dvostruki klik tipke miša.
onmousedown - tipka miša je pritisnuta (pomaknuta prema dolje).
onmousemove - miš se pomiče preko objekta (događa se mnogo događaja, pomak miša 1px = 1 događaj).
onmouseout - miš napušta objekt.
onmouseover - miš se pomiče preko željenog objekta.
onmouseup – tipka miša je otpuštena (podignuta).
onkeydown – tipka tipkovnice je pritisnuta (pomaknuta prema dolje).
onkeypress – pritisak tipke na tipkovnici.
onkeyup – tipka na tipkovnici je otpuštena (podignuta).
onblur – gubitak fokusa unosa (trepereći kursor).
onfocus - trenutak kada ovaj element primi fokus unosa.
onchange – generira ga kontrola nakon gubitka fokusa ako se tekst promijenio (na primjer, u tekstualnom polju). Izuzetak je 'select' element popisa, u kojem se ovaj događaj generira odmah, a ne nakon gubitka fokusa.
onload - generira se kada se stranica završi s učitavanjem u prozoru. Obično se koristi kada trebate pokrenuti JavaScript kôd nakon što se stranica u potpunosti učita.
onunload – događa se prije nego što se dokument isčita iz prozora (odnosno, kada zatvorimo ovaj dokument ili prijeđemo na drugi dokument).
onreset – forma je poništena.
onsubmit – obrazac za podatke je predan.

Pretplatite se na događaje

Pretplata putem JavaScripta. Ova metoda se koristi u većini slučajeva. Najprije moramo pronaći objekt elementa na koji se želimo pretplatiti, npr. metodom getElementById (navesti id željenom elementu).

funkcija myFunc () ( //stvorila je jednostavno upozorenje funkcije ("hello"); ) funkcija pageInit () ( var p= dokument. getElementById ("1"); p. onclick= myFunc; ) //pozvala je funkciju da se pokrene događaj prozora . onload=pageInit; //događaj će se aktivirati kada se stranica učita< p id= 1 >Stavak 1 //postavi ID za stavak

Pretplatite se putem html kod. Nedostatak ove metode je da je html kod zakrčen javaScript kodom; Osim toga, postoji nekoliko ograničenja, au složenim slučajevima je nezgodno koristiti.

< script type= "text/javascript" >funkcija myFunc () ( //stvorila je jednostavno upozorenje funkcije ("zdravo"); )< p onclick= "myFunc()" >Paragraf 2 //naziva se funkcija Model obrade događaja

Kada se događaj dogodi na elementu, slični događaji bi se trebali dogoditi na svim njegovim roditeljskim elementima do samog vrha stranice (do ‘tijela’, jer je to glavno područje dokumenta). Stoga se svaki događaj koji se dogodi na stranici događa u tijelu.

Postavlja se pitanje kojim redoslijedom će se takvi događaji dogoditi? U modernim preglednicima, model rukovanja događajima naziva se 'model mjehurića'. Njegova suština: prvo se događaj događa na elementu na koji je kliknuto, zatim na njegovom roditelju i tako dalje do samog vrha - do ‘tijela’.

Element --> element 2 --> dokument --> prozor

Parametri događaja (objekt događaja)

Postoji objekt događaja koji ima mnogo svojstava. Čitajući ova svojstva, možete dobiti informacije o događajima. Da biste dobili informacije, prvo morate dobiti sam objekt.

Glavna svojstva ovog objekta:

x, y - koordinate miša u trenutku kada se događaj dogodi.
clientX, clientY - isto.
offsetX, offsetY - ista stvar, ali ovo je pomak miša u odnosu na nadređeni element.
screenX, screenY - koordinate ekrana.
tipka - koja je tipka miša pritisnuta (0 - nije pritisnuta, 1 - pritisnuta lijeva tipka, 2 - pritisnuta desna tipka, 4 - pritisnuta srednja tipka).
keyCode - numerički kod pritisnute tipke tipkovnice.
srcElement - element koji je generirao događaj.
fromElement - element s kojeg se miš pomaknuo.
toElement - indikacija objekta preko kojeg je miš prešao.
cancelBubble je nestandardan način ako ga date pravi, tada će se "skočni balon" poništiti; ili možete zamijeniti šifru tipke koju je korisnik pritisnuo.

U ovoj lekciji pogledat ćemo glavne vrste događaja koje možete presresti pomoću JavaScripta za izvođenje nekog koda.

Kategorije događaja

Svi JavaScript događaji mogu se podijeliti u sljedeće kategorije: događaji miša, događaji tipkovnice, događaji okvira/objekta, događaji obrazaca, događaji povlačenja, događaji animacije, događaji međuspremnika, medijski događaji, prijelazni događaji, događaji poslani s poslužitelja, događaji dodira, događaji ispisa (Ispis događaja), razni događaji (Razno događanja).

Pažnja: svi događaji u JavaScriptu pišu se malim (malim) slovima.

Mišji događaji

mousedown - događaj se događa kada se tipka miša pritisne iznad nekog elementa, ali još nije otpuštena.
mouseup - događaj se događa kada tipka miša preko nekog elementa pređe iz pritisnutog stanja u otpušteno stanje.
click - događaj se događa kada korisnik klikne mišem na element. Redoslijed kojim se pojavljuju klikovi (za lijevu i srednju tipku miša) je miš dolje -> miš gore -> klik.
kontekstni izbornik - događaj se događa kada korisnik desnom tipkom miša klikne element. Redoslijed događaja povezanih s kontekstnim izbornikom (za desnu tipku miša) je mousedown -> mouseup -> contextmenu.
dblclick - događaj se događa kada korisnik dvaput klikne element. Redoslijed pojavljivanja događaja povezanih s dblclickom je: mousedown -> mouseup -> click -> mousedown -> mouseup -> click -> dblclick .
mouseover - događaj se događa kada kursor miša uđe u područje koje je u vlasništvu elementa ili jednog od njegovih potomaka.
mouseout - događaj se događa kada se pokazivač miša pomakne iz područja koje je u vlasništvu elementa ili jednog od njegovih potomaka.
mousemove - događaj se događa kada se kursor miša pomakne unutar područja koje pripada elementu.
mouseenter - događaj se događa kada pokazivač miša uđe u područje koje je u vlasništvu elementa. Ovaj se događaj često koristi zajedno s događajem mouseleave, koji se događa kada pokazivač miša napusti područje u vlasništvu elementa. Događaj mouseenter sličan je događaju mouseover i razlikuje se samo po tome što se događaj mouseenter ne pojavljuje u mjehurićima (s konceptom mjehurića događaja upoznat ćemo se malo kasnije).
mouseleave - događaj se događa kada pokazivač miša napusti područje u vlasništvu elementa. Događaj mouseleave sličan je događaju mouseout i razlikuje se samo po tome što se događaj mouseleave ne pojavljuje u mjehurićima (s konceptom mjehurića događaja upoznat ćemo se malo kasnije).

Događaji na tipkovnici

Redoslijed pojavljivanja događaja je: keydown -> keypress -> keyup .

keydown - događaj se događa kada je tipka na tipkovnici iznad elementa pritisnuta, ali još nije otpuštena.
keyup - događaj se događa kada se pritisnuta tipka na tipkovnici iznad elementa promijeni u otpušteno stanje.
pritisak na tipku - događaj se događa kada korisnik pritisne tipku na tipkovnici iznad elementa.

Događaji objekta i okvira

beforeunload - događaj se događa prije nego što je dokument istovaren. Ovaj vam događaj omogućuje prikaz dodatne poruke u dijaloškom okviru za potvrdu, "Jeste li sigurni da želite napustiti ovu stranicu?" Standardna poruka koja se pojavljuje prilikom zatvaranja dokumenta može se razlikovati ovisno o različitim preglednicima. Ali ne možete je promijeniti ili izbrisati, ovu metodu možete koristiti samo da joj dodate vlastitu poruku, koja će biti prikazana zajedno sa zadanom porukom.
pogreška - događaj se pokreće kada se pojavi pogreška, koja se javlja prilikom učitavanja vanjske datoteke (na primjer, dokumenta ili slike).
hashchange - događaj se događa kada se dio sidra (počinje simbolom "#") trenutnog URL-a promijeni.
load - događaj se događa kada je učitavanje objekta završeno. Događaj učitavanja najčešće se koristi na elementu tijela za izvršavanje skripte odmah nakon što se web stranica potpuno učita.
unload - događaj se događa kada se stranica istovaruje (na primjer, kada je kartica (prozor) preglednika zatvorena).
pageshow - događaj se događa kada korisnik navigira na web stranicu, tj. nakon što stranica postane dostupna korisniku. Događaj pageshow sličan je događaju učitavanja, osim što se pokreće svaki put kada se stranica učita, čak i ako se učitava iz predmemorije. Kada se stranica prvi put učita, događaj pageshow pokreće se odmah nakon događaja učitavanja.
pagehide - događaj se događa kada korisnik napusti stranicu (događaj pagehide se događa prije događaja unload). Osim toga, ovaj događaj, za razliku od događaja istovara, ne sprječava predmemoriranje stranice.
promjena veličine - događaj se događa kada se promijeni veličina prozora preglednika.
pomicanje - Događaj se događa kada pomičete sadržaj elementa koji ima traku za pomicanje.

Obrazac i kontrolni događaji

fokus - događaj se događa kada element dobije fokus. Ovaj događaj se ne pojavljuje.
zamućenje - događaj se događa kada objekt izgubi fokus. Ovaj događaj se ne pojavljuje.
focusin - događaj se događa kada element dobije fokus. Događaj fokusin sličan je događaju fokusa, ali se od njega razlikuje po tome što mjehuri. Stoga se može koristiti kada trebate saznati tko gubi fokus: element ili njegovo dijete?
focusout - događaj se događa kada element uskoro izgubi fokus. Događaj fokusa sličan je događaju zamućenja, ali se od njega razlikuje po tome što se pojavljuje u mjehurićima. Stoga se može koristiti kada trebate saznati tko gubi fokus: element ili njegovo dijete?
promjena - događaj se događa kada se vrijednost elementa promijeni, ali nakon što je element izgubio fokus. Osim događaja promjene, JavaScript također ima sličan ulazni događaj, koji se od događaja promjene razlikuje po tome što se događa odmah nakon promjene vrijednosti elementa. Change event, za razliku od input eventa, također radi s keygen i select elementima. Za gumbe za odabir i potvrdne okvire, događaj promjene događa se kada se promijeni stanje ovih elemenata.
input - događaj se događa nakon promjene vrijednosti elementa input ili elementa textarea.
invalid - Događaj se događa kada ulazni element čiji se podaci trebaju poslati zajedno s drugim podacima obrasca na poslužitelj sadrže nevažeće podatke.
reset - događaj se događa prije brisanja forme, što čini ulazni element s type="reset" .
pretraživanje - Događaj se događa nakon što korisnik pritisne tipku Enter ili klikne gumb "x" (otkaži) na elementu unosa s type="search" .
select - događaj se događa nakon što ste odabrali neki tekst u elementu. Događaj odabira uglavnom se koristi za ulazni element s type="text" ili textarea.
pošalji - događaj se događa prije slanja obrasca na poslužitelj.

Povucite događaje

Događaji povezani s povučenim objektom (cilja koja se može povući, izvorni objekt):

dragstart – događaj se događa kada korisnik počne povlačiti element;
drag – događaj se događa kada korisnik povuče element;
dragend – događaj se događa kada korisnik završi s povlačenjem elementa, tj. kada sam pustio kursor miša.

Događaji povezani s ispuštenim ciljem koji prima cilj koji se može povlačiti:

dragenter – događaj se događa kada cilj koji se može povlačiti uđe u područje cilja koji može prihvatiti cilj koji se može povlačiti.
ragleave - događaj se događa kada povučeni objekt (draggable target) napusti granice elementa (drop target) koji ga može prihvatiti.
dragover - događaj se događa kada se cilj koji se može povlačiti pomakne u područje elementa (drop target) koji ga može prihvatiti.
drop - događaj se događa kada korisnik pusti objekt koji se može povlačiti u područje elementa (drop target) koji ga može prihvatiti.

Animacijski događaji

Tri događaja koja se mogu dogoditi dok se izvodi CSS animacija:

animationstart - Dešava se kada je pokrenuta CSS animacija.
animationiteration - javlja se kada se CSS animacija ponavlja.
animationend - javlja se kada CSS animacija završeno.

Događaji međuspremnika

copy - događaj se događa kada korisnik kopira sadržaj elementa. Događaj kopiranja također se događa kada korisnik kopira element (na primjer, slike stvorene s elementom img). Događaj kopiranja prvenstveno se koristi za elemente unosa s type="text" .
cut - događaj se događa kada korisnik reže sadržaj elementa.
paste - događaj se događa kada korisnik zalijepi neki sadržaj u element.

Ispis događaja

afterprint - Događaj se događa kada se stranica počne ispisivati (to jest, nakon klika na gumb Ispis u dijaloškom okviru) ili ako je dijaloški okvir Ispis zatvoren.
beforeprint - događaj se događa prije ispisa stranice, tj. prije otvaranja dijaloškog okvira Ispis.

Prijelazni događaji

conversionend - događaj se pokreće kada je prijelaz CSS-a dovršen. Napomena: Ako je prijelaz uklonjen prije dovršetka (na primjer, ako CSS svojstvo Prijelaz-svojstvo je uklonjeno), tada se događaj conversionend neće pokrenuti.

Događaji koje šalje poslužitelj

pogreška - događaj se javlja kada se pojavi pogreška s izvorom događaja. Greška se obično javlja kada je komunikacija prekinuta. Ako se to dogodi, objekt EventSource automatski će se pokušati spojiti na poslužitelj.
open - događaj se događa kada je veza s izvorom događaja otvorena.
poruka - događaj se događa kada je poruka primljena kroz izvor događaja.
Objekt događaja poruke podržava sljedeća svojstva:
- podaci - sadrži poruku.
- porijeklo - URL dokumenta koji je pokrenuo događaj.
- lastEventId - identifikator (id) posljednje primljene poruke.

Medijski događaji

Tijekom procesa učitavanja zvuka/videozapisa događaji se događaju sljedećim redoslijedom: loadstart -> durationchange -> loadedmetadata -> loadeddata -> napredak -> canplay -> canplaythrough .

abort - događaj se događa kada se prekine učitavanje audio/video zapisa. Ovaj događaj se događa kada je preuzimanje medijskih podataka prekinuto (otkazano), a ne zato što je došlo do pogreške.
greška - događaj se događa kada se pojavi greška prilikom učitavanja audio/video zapisa.
stalled - događaj se događa kada preglednik pokuša primiti medijske podatke, ali podaci nisu dostupni.
- događaj se događa kada preglednik počne tražiti navedeni audio/video zapis, tj. kada započne proces preuzimanja.
durationchange - događaj se događa kada se promijeni trajanje audio/video zapisa. Ako je audio/video učitan, trajanje će varirati od "NaN" do stvarnog trajanja audio/video zapisa.
loadedmetadata - događaj se pokreće kada se učitaju metapodaci za navedeni audio/video zapis. Audio/video metapodaci sastoje se od: trajanja, veličine (samo video) i tekstualnog zapisa.
loadeddata - događaj se događa nakon učitavanja prvog okvira medija.
napredak - događaj se događa kada preglednik preuzme navedeni audio/video zapis.
canplay - događaj se događa kada preglednik može započeti reprodukciju navedenog audio/video zapisa (to jest, kada je audio/video stream dovoljno spremljen u međuspremnik da ga preglednik počne reproducirati).
canplaythrough - događaj se događa u trenutku kada preglednik može reproducirati navedeni medij bez zaustavljanja radi spremanja u međuspremnik.
završeno - događaj se događa kada je audio/video reprodukcija završena (dosla je do kraja). Ovaj se događaj može koristiti za prikaz poruka poput "Hvala na pažnji", "Hvala na gledanju" itd.
pauza - događaj se događa kada je audio/video reprodukcija pauzirana od strane korisnika ili koda (programski).
play - događaj se događa kada započne audio/video reprodukcija. Također se događa kada se audio/videozapis ponovo zaustavi i počne reproducirati.
reprodukcija - Događaj se događa kada se audio/video reproducira nakon što je pauziran ili zaustavljen radi spremanja u međuspremnik.
ratechange - događaj se događa kada se promijeni brzina audio/video reprodukcije.
traženje - događaj se događa kada korisnik počne pomicati klizač (prijelaz) na novu vremensku poziciju audio/video zapisa koji se reproducira.
traženo - događaj se događa kada korisnik završi pomicanje klizača (prijelaz) na novu privremenu poziciju audio/video zapisa koji se reproducira. Traženi događaj je suprotan od traženog događaja. Da biste dobili trenutnu poziciju reprodukcije, upotrijebite svojstvo currentTime objekta Audio/Video.
timeupdate - događaj se događa kada se promijeni vremenska pozicija audio/video zapisa koji se reproducira.
Ovaj događaj se događa:
- prilikom reprodukcije audio/video streama.
- kada pomičete klizač na novu vremensku poziciju audio/video zapisa koji se reproducira.
Događaj timeupdate često se koristi u kombinaciji sa svojstvom currentTime objekta Audio/Video, koje vraća trenutnu vremensku poziciju audio/video zapisa koji se trenutno reproducira u sekundama.
volumechange – događaj se događa svaki put kada se glasnoća reproduciranog video/audio streama promijeni.
Ovaj događaj se događa kada:
- povećanje ili smanjenje glasnoće;
- isključivanje ili uključivanje zvuka.
čekanje - događaj se događa kada je video zaustavljen radi spremanja u međuspremnik.

Razni događaji

prebacivanje - Događaj se događa kada korisnik otvori ili zatvori element detalja. Element detalja dizajniran je za stvaranje dodatnih informacija koje korisnik može vidjeti ili sakriti prema potrebi.
kotačić - događaj se događa kada se kotačić miša pomiče naprijed ili nazad preko elementa.

Zadaci

Je li događaj "Pritisnite tipku na tipkovnici (onkeypress)" složen? A ako jest, onda kao rezultat kojih jednostavnih događaja nastaje?

Na primjer, imate 2 p elementa i korisnik pomiče miš iz područja koje pripada jednom p elementu u područje koje pripada drugom p elementu. Koji se događaji događaju u ovom slučaju i koji ih elementi generiraju?

Tema događanja je vrlo važna i vrlo zanimljiva. Zahvaljujući njemu možete učiniti mnogo zanimljivih stvari kojima će korisnik biti oduševljen. Događaj u JavaScriptu je određena radnja koju pokreće korisnik ili preglednik. Na primjer, događaj može biti klik mišem na gumb, pomicanje miša, fokusiranje na element, promjena vrijednosti u tekstualnom polju, promjena veličine prozora preglednika i tako dalje.

Pripremio sam tablicu sa svim događajima (iz kojih znam barem) u JavaScriptu. U njemu ćete pronaći, prvo, naziv događaja, elemente koji mogu generirati ovaj događaj i opis samog JavaScript događaja.

Događaj	Objekt	Uzrok nastanka
Abortus	Slika	Prekid učitavanja slike
Zamutiti		Izgubljeni fokus elementa
Promijeniti	FileUpload, Select, Text, Textarea	Promjena vrijednosti
Klik	Područje, Gumb, Potvrdni okvir, Dokument, Veza, Radio, Reset, Pošalji	Kliknite mišem na element
DblClick	Područje, dokument, veza	Dvaput kliknite na element
Povuci i ispusti	Prozor	Prijeđi na prozor preglednika
Usredotočenost	Gumb, potvrdni okvir, FileUpload, Frame, Layer, Password, Radio, Reset, Select, Submit, Text, Textarea, Window	Postavljanje fokusa na element
KeyDown		Pritiskom tipke na tipkovnici
Pritiskom na tipku	Dokument, slika, poveznica, tekstualno područje	Držanje tipke na tipkovnici
KeyUp	Dokument, slika, poveznica, tekstualno područje	Otpuštanje tipke na tipkovnici
Opterećenje	Dokument, slika, sloj, prozor
MouseDown	Gumb, dokument, poveznica	Tipka miša pritisnuta
MouseMove	Prozor	Miš u pokretu
MouseOut	Područje, sloj, veza	Miš prelazi granice elementa
Prelazak mišem	Područje, sloj, veza	Miš je iznad elementa
MouseUp	Gumb, dokument, poveznica	Tipka miša otpuštena
Potez	Okvir	Pomicanje elementa
Resetiraj	Oblik	Poništi obrazac
Promjena veličine	Okvir, prozor	Promjena veličine
Izaberi	Tekst, Textarea	Izbor teksta
podnijeti	Oblik	Prijenos podataka
Istovariti	Prozor	Učitavanje trenutne stranice

Sada shvatimo kako koristiti događaje u JavaScriptu. Postoje takozvani rukovatelji događajima. Rukovatelji događajima određuju što će se dogoditi kada se dogodi određeni događaj. Rukovatelji događajima u JavaScriptu imaju sljedeći opći oblik:

OnEventName

To jest, prvo dolazi prefiks "on", a zatim naziv događaja, na primjer, sljedeći rukovatelji događajima: onFocus, onClick, onSubmit i tako dalje. Mislim da tu nema pitanja. A sada glavno pitanje: “Kako koristiti događaje u JavaScriptu?”. Opseg njihove primjene je ogroman, a sada ćemo se osvrnuti na jedan problem. Na stranici su tri poveznice. Svaka od poveznica odgovorna je za različitu boju pozadine (na primjer, bijela, žuta i zelena). Isprva je pozadina bijela. Kada prijeđete mišem preko određene veze, mijenja se boja pozadine. Kada odmaknete miš, boja pozadine vraća se na zadanu boju. Kada kliknete na poveznicu, boja pozadine se zadržava kao zadana.

a (
boja:plava;
tekst-ukras: podcrtano;
kursor: pokazivač;
}

var default_color = "bijela";

funkcija setTempColor(boja) (
document.bgColor = boja;
}

funkcija setDefaultColor(boja) (
zadana_boja = boja;
}

funkcija defaultColor() (
document.bgColor = zadana_boja;
}

Bijela
Žuta boja
zelena

Pogledajmo ovu skriptu, odnosno cijelu HTML stranicu s podrškom za JavaScript i CSS (drugim riječima, ovo je primjer DHTML-a). Prvo dolaze uobičajeni HTML tagovi, s kojima počinje svaka HTML stranica. Zatim kreiramo stil u kojem zahtijevamo da sve veze na danoj stranici budu plave, podvučene i da pokazivač miša na njima bude u obliku "Pointera". Možete reći: "Zašto trebate postaviti stil? Uostalom, veze će biti potpuno iste." Tako je, poveznice, ali mi nemamo veze kao takve (uostalom, nema atributa href u oznaci), tako da će one prema zadanim postavkama biti običan crni tekst (međutim, možete i kliknuti na tekst). Stoga je stil neophodan. Možete ga ukloniti i vidjeti što će se dogoditi. Još bolje, dodajte atribut href (s bilo kojom vrijednošću, čak i praznom) i objasnite zašto je skripta prestala raditi. Tada počinje JavaScript. Kreiramo varijablu default_color odgovornu za zadanu boju. Slijede tri funkcije:

Funkcija setTempColor() odgovorna je za privremenu promjenu boje.

Funkcija setDefaultColor() odgovorna je za promjenu zadane boje.

Funkcija defaultColor() postavlja zadanu boju pozadine.

Zatim postoje veze s atributima u obliku rukovatelja događajima. Kada mišem prijeđete preko veze, događa se događaj MouseOver; u skladu s tim, rukovatelj događaja onMouseOver poziva funkciju setTempColor() i prosljeđuje odgovarajući parametar. Kada uklonite miš s elementa, pokreće se događaj MouseOut, a zatim se poziva funkcija defaultColor(), koja boju pozadine postavlja na zadanu boju. I na kraju, kada se mišem klikne na poveznicu (onClick handler), poziva se funkcija setDefaultColor() koja boju navedenu u parametru postavlja na zadanu boju pozadine. Kao što vidite, sve je vrlo jednostavno.

To je bio princip korištenja događaja u JavaScriptu, a onda sve ovisi samo o vašoj mašti!

Neki programi koji koriste JavaScript događaj raditi izravno s korisničkim unosom. Trenutak nastanka i redoslijed takvih interakcija nije moguće unaprijed predvidjeti.

Rukovatelji događajima

Na pritisak tipke možete reagirati stalnim čitanjem njenog stanja kako biste uhvatili trenutak pritiska tipke prije nego što je ponovno otpustite.

Ovako se unos podataka obrađivao na primitivnim strojevima. Naprednije je otkrivanje pritiska tipke i njegovo stavljanje u red čekanja. Program tada može povremeno provjeravati red čekanja novih događaja i reagirati na ono što tamo pronađe. U tom slučaju program mora zapamtiti skeniranje reda i to često.

U razdoblju od pritiska tipke do detekcije ovog događaja program zapravo ne odgovara na zahtjeve. Ovaj pristup se naziva anketiranje (anketa).

Većina programera to pokušava izbjeći ako je moguće.

Najbolji način je implementirati sustav koji kodu daje mogućnost da reagira na događaje dok se događaju. Preglednici to implementiraju pružajući mogućnost registracije funkcija rukovatelja za određene JavaScript događaje:

Kliknite na ovaj dokument da aktivirate rukovatelja.

addEventListener("klik", funkcija() ( console.log("Kliknuli ste!"); ));

Funkcija addEventListener registrirana je tako da se njezin drugi argument poziva kad god se dogodi događaj opisan prvim argumentom.

Događaji i DOM čvorovi

Svaki rukovatelj događajima preglednika registriran je s kontekstom. Kada se pozove funkcija addEventListener, ona se poziva kao metoda za cijeli prozor, budući da je u pregledniku globalni raspon ekvivalentan objekt prozora. Svaki DOM element ima vlastitu metodu addEventListener, koja vam omogućuje da slušate događaje posebno na tom elementu:

Kliknite na mene

Ovdje nema rukovatelja.

var button = document.querySelector("button"); button.addEventListener("klik", funkcija() ( console.log("Kliknut je gumb."); ));

U u ovom primjeru rukovatelj je spojen na čvor gumba. JavaScript događaji miša aktiviraju rukovatelj, ali klikovi u ostatku dokumenta ne.

Postavljanjem onclick atributa čvora dobivamo isti rezultat. Ali čvor ima samo jedan onclick atribut, tako da možete registrirati samo jedan rukovatelj po čvoru. Metoda addEventListener omogućuje vam dodavanje bilo kojeg broja rukovatelja. Na taj način smo osigurani od slučajne zamjene procesora koji je već registriran.

Metoda removeEventListener poziva se s argumentima sličnim addEventListeneru. Uklanja rukovatelj:

Jednokratni gumb var button = document.querySelector("button"); funkcija jednom() ( console.log("Gotovo."); button.removeEventListener("klik", jednom); ) button.addEventListener("klik", jednom);

Da bismo otkazali funkciju rukovatelja, dajemo joj ime (na primjer, jednom). Stoga ga prosljeđujemo addEventListeneru i removeEventListeneru.

Objekti događaja

Iako to nismo spomenuli u gornjim primjerima, funkciji rukovatelja događajima JavaScripta prosljeđuje se argument: objekt događaja. Pruža dodatne informacije o događaju. Na primjer, ako želimo znati koja je tipka miša pritisnuta, moramo dobiti vrijednost svojstva objekta which event:

Kliknite na mene bilo kojom tipkom miša var button = document.querySelector("button"); button.addEventListener("mousedown", function(event) ( if (event.which == 1) console.log("Lijevi gumb"); else if (event.which == 2) console.log("Srednji gumb" ); else if (event.which == 3) console.log("Desni gumb"); ));

Informacije pohranjene u objektu razlikuju se ovisno o vrsti događaja. Svojstvo tipa objekta uvijek sadrži niz koji identificira događaj (na primjer, "click" ili "mousedown").

Širenje

Rukovatelji događajima (kao što su JavaScript dodirni događaji) registrirani za nadređene čvorove također će primati događaje koji se javljaju na podređenim elementima. Ako se klikne gumb unutar odlomka, rukovatelji događajima odlomka također će primiti kliknite događaj.

Događaj se širi od čvora u kojem se dogodio, do nadređenog čvora i do korijena dokumenta. Nakon što svi rukovatelji registrirani u određenom čvoru redom poduzmu radnju, rukovatelji registrirani za cijeli prozor mogu odgovoriti na događaj.

U bilo kojem trenutku rukovatelj događajem može pozvati metodu stopPropagation na objektu događaja kako bi spriječio daljnje širenje događaja. Ovo može biti korisno kada imate gumb unutar drugog interaktivnog elementa i ne želite da klik na gumb pokrene ponašanje navedeno za klikanje na vanjske elemente.

U sljedećem primjeru registriramo rukovatelje "MouseDown" i za gumb i za odlomak. Kada kliknete desnom tipkom miša (JavaScript događaji miša), rukovatelj poziva metodu stopPropagation, koja sprječava pokretanje rukovatelja paragrafa. Kada kliknete na gumb drugom tipkom miša, pokreću se oba rukovatelja:

Paragraf i gumb u njemu.

var para = document.querySelector("p"); var button = document.querySelector("button"); para.addEventListener("mousedown", function() ( console.log("Rukovatelj odlomkom."); )); button.addEventListener("mousedown", function(event) ( console.log("Handler for button."); if (event.which == 3) event.stopPropagation(); ));

Većina objekata događaja ima ciljno svojstvo koje upućuje na čvor u kojem su se dogodili. Možete koristiti ovo svojstvo kako biste izbjegli slučajno rukovanje nekim događajem koji se širi od čvora.

Također možete koristiti cilj JavaScript događaja da proširite opseg događaja određene vrste. Na primjer, ako imate čvor koji sadrži dugačak popis gumba, prikladnije je registrirati jedan rukovatelj klikom za vanjski čvor i koristiti ciljno svojstvo za praćenje je li gumb kliknut, umjesto registracije instanci rukovatelja za sve gumbe:

A B C document.body.addEventListener("klik", funkcija(event) ( if (event.target.nodeName == "BUTTON") console.log("Kliknuto", event.target.textContent); ));

Zadane radnje

Mnogi događaji imaju zadane radnje povezane s njima. Ako kliknete na vezu, odvest će vas do ciljanog elementa veze. Ako kliknete strelicu prema dolje, preglednik će se pomicati prema dolje po stranici. Ako kliknete desnom tipkom miša, otvorit će se kontekstni izbornik.

Za većinu vrsta događaja, JavaScript rukovatelji događajima pozivaju se prije izvođenja zadanih radnji. Ako ne želite da se pojavi zadano ponašanje, morate pozvati metodu preventDefault na objektu događaja.

Koristite ga za implementaciju prilagođenih tipkovničkih prečaca ili kontekstnih izbornika. Ili, za nadjačavanje ponašanja koje korisnici očekuju. Ispod je poveznica koju nije moguće slijediti:

MDN var link = document.querySelector("a"); link.addEventListener("klik", funkcija(događaj) ( console.log("Ne."); event.preventDefault(); ));

Pokušajte to ne činiti osim ako za to nemate dobar razlog.

Ovisno o pregledniku, neki događaji možda neće biti presretnuti. U Google Chrome na primjer, tipkovnički prečac (JavaScript kod događaja) za zatvaranje trenutne kartice (Ctrl-W ili Command-W) ne može se obraditi pomoću JavaScripta.

Ključni događaji

Kada korisnik pritisne tipku na tipkovnici, preglednik aktivira događaj "keydown". Kada otpusti tipku, aktivira se događaj "keyup":

Ova stranica postaje ljubičasta kada pritisnete tipku V.

addEventListener("keydown", function(event) ( if (event.keyCode == 86) document.body.style.background = "violet"; )); addEventListener("keyup", function(event) ( if (event.keyCode == 86) document.body.style.background = ""; ));

Ovaj se događaj također pokreće kada korisnik pritisne i drži tipku ili dok je tipka pritisnuta. Na primjer, ako želite povećati brzinu lika u igri pritiskom na tipku sa strelicom, a ponovno je smanjiti otpuštanjem tipke, tada morate paziti da ne povećate brzinu svaki put kada pritisnete tipku.

Prethodni primjer koristio je svojstvo JavaScript koda ključa objekta događaja. Uz njegovu pomoć utvrđuje se koja je tipka pritisnuta ili puštena. Nije uvijek očito kako prevesti numerički kod ključa u stvarni ključ.

Kod znakova Unicode koristi se za čitanje vrijednosti ključeva slova i brojeva. Povezan je sa slovom (velikim slovom) ili brojem naznačenim na tipki. Metoda charCodeAt za nizove omogućuje vam da dobijete ovu vrijednost:

console.log("Ljubičasto".charCodeAt(0)); // → 86 console.log("1".charCodeAt(0)); // → 49

Druge tipke imaju manje predvidljive šifre tipki povezane s njima. Najbolji način Određivanje koda koji vam je potreban stvar je eksperimentiranja. Registrirajte rukovatelja događajima pritiska tipke koji hvata šifre tipki koje prima i pritišće željenu tipku.

Tipke kao što su Shift, Ctrl, Alt generiraju događaje poput običnih tipki. Ali kada pratite kombinacije tipki, također možete odrediti jesu li te tipke pritisnute svojstvima događaja tipkovnice i JavaScript događaja miša: shiftKey, ctrlKey, altKey i metaKey:

Za nastavak pritisnite Ctrl-razmaknica.

addEventListener("keydown", function(event) ( if (event.keyCode == 32 && event.ctrlKey) console.log("Nastavlja se!"); ));

Događaji "keydown" i "keyup" pružaju informacije o stvarnim pritiscima tipki. Ali što ako trebamo sam ulazni tekst? Dohvaćanje teksta iz kodova tipki je nezgodno. Za to postoji događaj, "keypress", koji se aktivira odmah nakon "keydown". Ponavlja se zajedno s "keydown" sve dok je tipka pritisnuta. Ali samo za tipke kojima se unose znakovi.

Svojstvo charCode na objektu događaja sadrži kod koji se može interpretirati kao Unicode kod znaka. Možemo koristiti funkciju String.fromCharCode za pretvaranje ovog koda u niz od jednog znaka.

Postavite fokus unosa na ovu stranicu i upišite nešto.

addEventListener("pritisak tipke", funkcija(događaj) ( console.log(String.fromCharCode(event.charCode)); ));

DOM čvor na kojem se događa događaj ovisi o elementu koji je imao fokus unosa kada je tipka pritisnuta. Uobičajeni čvorovi ne mogu imati fokus unosa (osim ako im ne postavite atribut tabindex), ali elementi kao što su veze, gumbi i polja obrazaca mogu.

Ako nijedan određeni element nema fokus unosa, tada je ciljni čvor za ključne događaje i JavaScript dodirne događaje document.body.

Klikovi mišem

Pritisak tipke miša također pokreće niz događaja. Događaji "mousedown" i "mouseup" slični su događajima "keydown" i "keyup". Pokreću se kada se pritisne i otpusti tipka miša. Ovi se događaji događaju na čvorovima DOM-a nad kojima je pokazivač miša postavljen kada se događaj dogodio.

Za dijeljeni čvor koji ima i pritisak i otpuštanje miša, događaj klika pokreće se nakon događaja pokretanja miša. Na primjer, ako pritisnete tipku miša na jednoj stavci, a zatim pomaknete pokazivač na drugu stavku i otpustite tipku, klik će se dogoditi na elementu koji sadrži obje ove stavke.

Ako se dva klika dogode blizu jedan drugome, također se pokreće događaj "dblclick" (dvostruki klik). Pojavljuje se nakon drugog klika. Da biste dobili točnu informaciju o mjestu gdje se dogodio događaj miša, morate dobiti vrijednost svojstava pageX i pageY, koja sadrže koordinate događaja (u pikselima) u odnosu na gornji lijevi kut dokumenta.

Ispod je implementacija primitivnog programa za crtanje. Svaki put kada kliknete mišem u dokumentu (ispod pokazivača), dodaje se točka:

tijelo (visina: 200px; pozadina: bež;) .dot (visina: 8px; širina: 8px; radijus granice: 4px; /* zaobljeni kutovi */ pozadina: plava; pozicija: apsolutna; ) addEventListener("klik", funkcija (događaj) ( var dot = document.createElement("div"); dot.className = "dot"; dot.style.left = (event.pageX - 4) + "px"; dot.style.top = (event .pageY - 4) + "px"; document.body.appendChild(dot); ));

Svojstva clientX i clientY slična su pageX i pageY, ali se odnose na vidljivi dio dokumenta. Mogu se koristiti za usporedbu koordinata miša s koordinatama koje vraća funkcija getBoundingClientRect.

Pokret miša

Svaki put kada se miš pomakne, pokreće se događaj "mousemove" iz JavaScript skupa događaja miša. Može se koristiti za praćenje položaja miša. Ovo se koristi kada se implementira mogućnost povlačenja elemenata mišem.

U sljedećem primjeru program prikazuje ploču i postavlja rukovatelje događajima tako da kada se povuče, ploča postaje uža ili šira:

Povucite rub ploče da promijenite širinu:

var lastX; // Prati zadnji X položaj miša var rect = document.querySelector("div"); rect.addEventListener("mousedown", function(event) ( if (event.which == 1) ( lastX = event.pageX; addEventListener("mousemove", premješteno); event.preventDefault(); // Sprječava odabir) ) ); funkcija buttonPressed(event) ( if (event.buttons == null) return event.which != 0; else return event.buttons != 0; ) funkcija moved(event) ( if (!buttonPressed(event)) ( removeEventListener( "mousemove", premješten); ) else ( var dist = event.pageX - lastX; var newWidth = Math.max(10, rect.offsetWidth + dist); rect.style.width = newWidth + "px"; lastX = događaj .stranicaX; ) )

Imajte na umu da je rukovatelj "mousemove" registriran za cijeli prozor. Čak i ako se miš pomakne izvan ploče tijekom promjene veličine, i dalje ažuriramo širinu ploče i prekidamo JavaScript dodirne događaje kada se tipka miša otpusti.

Moramo prestati mijenjati veličinu ploče kada korisnik otpusti tipku miša. Nažalost, ne postavljaju svi preglednici svojstvo which za događaje mousemove. Postoji standardno svojstvo gumba koje pruža slične informacije, ali također nije podržano u svim preglednicima. Srećom, svi glavni preglednici podržavaju jednu stvar: ili gumbe ili koji . Funkcija buttonPressed u gornjem primjeru prvo pokušava upotrijebiti svojstvo buttons, a ako ono nije dostupno, ide na which .

Kada se kursor miša pomakne iznad čvora ili ga napusti, pokreću se događaji "prelaženje mišem" ili "izlazak miša". Mogu se koristiti za stvaranje efekata lebdenja, prikaz neke vrste natpisa ili promjenu stila elementa.

Da biste stvorili takav učinak, nije dovoljno jednostavno ga početi prikazivati kada se dogodi događaj prelaska mišem i završiti nakon događaja prelaska miša. Kada se miš pomakne od čvora do jednog od njegovih potomaka, događa se događaj "mouseout" za nadređeni čvor. Iako pokazivač miša nije napustio raspon širenja čvora.

Da stvar bude još gora, ti se JavaScript događaji prenose kao i drugi događaji. Kada miš napusti jedan od podređenih čvorova za koje je registriran rukovatelj, pokrenut će se događaj "mouseout".

Da biste zaobišli ovaj problem, možete koristiti svojstvo objekta događaja relatedTarget. Kada se dogodi događaj "prelaženje pokazivačem miša", on označava nad kojim je elementom prethodno prijeđen pokazivač. I u slučaju "mouseout" - na koji element se pomiče pokazivač. Efekt prelaska mišem promijenit ćemo samo kada je relevantni cilj izvan našeg ciljnog čvora.

U ovom slučaju mijenjamo ponašanje jer je miš lebdio iznad čvora izvan njega (ili obrnuto):

Zadržite pokazivač miša iznad ovog odlomka.

var para = document.querySelector("p"); function isInside(čvor, cilj) ( for (; čvor != null; čvor = čvor.parentNode) if (čvor == cilj) return true; ) para.addEventListener("mouseover", function(event) ( if ( !isInside (event.relatedTarget, para)) para.style.color = "red"; )); para.addEventListener("mouseout", function(event) ( if (!isInside(event.relatedTarget, para)) para.style.color = ""; ));

Funkcija isInside prati nadređene veze određenog čvora ili dok se ne dosegne gornji dio dokument (kada je čvor null). Ili roditeljski element koji trebamo neće biti pronađen.

Efekt lebdenja mnogo je lakše stvoriti pomoću CSS:hover pseudo-selektora, kao što je prikazano u sljedećem primjeru. Ali kada učinak lebdenja uključuje nešto složenije od same promjene stila ciljnog čvora, tada morate upotrijebiti trik pomoću događaja prelaska mišem i izlaza miša (JavaScript događaji miša):

Pomicanje događaja

Svaki put kada se neki element pomiče, na njemu se aktivira JavaScript pomicanje. Može se koristiti za praćenje onoga što je unutra ovaj trenutak pogledao korisnik; da onemogućite animaciju koja se nalazi izvan okvira za prikaz.

U sljedećem primjeru prikazujemo traku napretka u gornjem desnom kutu dokumenta i ažuriramo je tako da se ispunjava drugom bojom dio po dio dok se pomičemo prema dolje po stranici:

.progress (obrub: 1px puno plavo; širina: 100px; položaj: fiksno; vrh: 10px; desno: 10px; ) .progress > div (visina: 12px; pozadina: plava; širina: 0%; ) tijelo (visina: 2000px ;)

Prelistaj me...

var bar = document.querySelector(".progress div"); addEventListener("scroll", function() ( var max = document.body.scrollHeight - innerHeight; var percent = (pageYOffset / max) * 100; bar.style.width = percent + "%"; ));

Postavljanjem položaja elementa ili fiksnog svojstva, dobivamo isti rezultat kao postavljanjem position:absolute. Ali ovo također zaključava element od pomicanja zajedno s ostatkom dokumenta. Kao rezultat toga, indikator napretka bit će statički fiksiran u gornjem kutu. Unutar njega nalazi se još jedan element čija se veličina mijenja u skladu s trenutnim napretkom.

Koristimo % umjesto px kao mjernu jedinicu kada postavljamo širinu, tako da se dimenzije elementa mijenjaju proporcionalno veličini trake napretka.

Globalna varijabla innerHeight sadrži visinu prozora koju moramo oduzeti od ukupne dostupne visine dokumenta koja se može pomicati. Ne možete se pomicati prema dolje po prozoru kada dođete do dna dokumenta. Uz innerHeight također se može koristiti innerWidth. Dijeljenjem pageYOffset (trenutni položaj okvira za pomicanje) s maksimalnim dopuštenim položajem pomicanja i množenjem sa 100 dobivamo postotak za traku napretka.

Pozivanje preventDefault na JavaScript događaj pomicanja ne sprječava pomicanje. Rukovatelj događajima poziva se tek nakon što se dogodi pomicanje.

Događaji fokusa unosa

Kada element ima fokus unosa, preglednik pokreće događaj "fokus" na njemu. Kada se fokus unosa ukloni, pokreće se događaj "zamućivanje".

Ova dva događaja se ne šire. Rukovatelj roditeljskog elementa ne dobiva obavijest kada podređeni element ima fokus unosa.

Sljedeći primjer prikazuje opis alata za polje za tekst, koji trenutno ima fokus unosa:

Ime:

Dob:

Objekt prozora prima događaje "fokus" i "zamućenje" kada korisnik navigira ili napusti karticu, prozor preglednika u kojem je dokument prikazan.

Događaj učitavanja

Kada se stranica završi s učitavanjem, pokreće se JavaScript događaj "učitavanje" za tijelo dokumenta i objekte prozora. Koristi se za planiranje pokretanja radnji koje zahtijevaju učitavanje cijelog dokumenta. Ne zaboravite da se sadržaj pokreće odmah kada se naiđe na ovu oznaku. Ponekad je prerano. Na primjer, kada skripta treba učiniti nešto s dijelovima dokumenta koji se učitavaju nakon .

i oznake skripti koje učitavaju vanjske datoteke također sadrže događaj "load". Označava da je datoteka koja je povezana s njima preuzeta. Poput događaja fokusa unosa, događaji učitavanja se ne šire.

Kada zatvorimo stranicu ili prijeđemo na drugu (na primjer, klikom na poveznicu), pokreće se događaj "beforeunload". Koristi se kako bi se spriječilo da korisnik slučajno izgubi ono na čemu je radio nakon zatvaranja dokumenta.

Sprječavanje učitavanja stranice ne radi se pomoću metode preventDefault. Umjesto toga, rukovatelj vraća niz. Koristi se u dijaloškom okviru koji pita korisnika želi li ostati na stranici ili je napustiti. Ovaj mehanizam osigurava da će korisnik imati priliku napustiti stranicu, čak i ako je pokrenuta zlonamjerna skripta čija je svrha zadržati posjetitelja na stranici.

Redoslijed izvršavanja skripte

Razni čimbenici mogu potaknuti izvršenje skripte: čitanje oznake, pojava događaja. Metoda requestAnimationFrame specificira poziv funkcije prije ponovnog iscrtavanja sljedeće stranice. Ovo je još jedan način na koji se mogu pokrenuti skripte.

JavaScript odabir događaja i svi ostali mogu se pokrenuti u bilo kojem trenutku, ali dvije skripte nikada se neće pokrenuti u isto vrijeme u istom dokumentu. Ako je skripta već pokrenuta, rukovatelji događajima i isječci koda zakazani drugom skriptom morat će pričekati svoj red. To je razlog zašto se dokument zamrzava kada se skripta izvodi dulje vrijeme. Preglednik ne reagira na klikove i druge događaje jer ne može pokrenuti rukovatelje događajima dok trenutna skripta ne završi s radom.

Neka programska okruženja dopuštaju stvaranje višestrukih niti izvršavanja koje se izvode istovremeno. Pružanjem mogućnosti obavljanja više zadataka istovremeno, možete povećati brzinu izvršavanja programa. Ali kada imamo više radnji koje utječu na iste dijelove sustava u isto vrijeme, programu postaje teže izvršiti ih.

Ako trebate pokrenuti procese pozadina Bez zamrzavanja stranice, preglednici nam pružaju ono što se naziva web radnicima. To je JavaScript sandbox koji radi na dokumentu uz glavni program i s njim može komunicirati samo slanjem i primanjem poruka.

Recimo da u datoteci pod nazivom code/squareworker.js imamo sljedeći kod:

addEventListener("poruka", funkcija(događaj) ( postMessage(event.data * event.data); ));

Zamislite da je broj koji kvadrirate vrlo velik, dugotrajan za izračunavanje, a morate izvršiti izračun na pozadinskoj niti. Ovaj kod pokreće web radnike, šalje im neke poruke i ispisuje odgovore:

var squareWorker = new Worker("code/squareworker.js"); squareWorker.addEventListener("message", function(event) ( console.log("Radnik je odgovorio:", event.data); )); squareWorker.postMessage(10); squareWorker.postMessage(24);

Funkcija postMessage šalje poruku koja pokreće događaj poruke na primatelju. Skripta koja je stvorila web radnike šalje i prima poruke preko objekta Worker. Koristeći ovaj objekt, okruženje stupa u interakciju sa skriptom koja ga je stvorila, šaljući informacije i slušajući ih u svom globalu s izvornom skriptom.

Postavljanje mjerača vremena

Funkcija setTimeout slična je requestAnimationFrame. Poziva drugu funkciju koja će biti pozvana kasnije. Ali umjesto da pozove funkciju sljedeći put kada se stranica prikazuje, ona čeka određeni broj milisekundi. U tome JavaScript primjer ako se pozadina stranice pretvori iz plave u žutu nakon dvije sekunde:

document.body.style.background = "plavo"; setTimeout(function() (document.body.style.background = "yellow";), 2000);

Ponekad moramo otkazati funkciju koju smo planirali. To se postiže pohranjivanjem povratne vrijednosti setTimeouta i pozivanjem clearTimeouta na njoj:

var bombTimer = setTimeout(function() ( console.log("BOOM!"); ), 500); if (Math.random()< 0.5) { // 50% chance console.log("Defused."); clearTimeout(bombTimer); }

Funkcija cancelAnimationFrame radi isto kao clearTimeout. Poziva se pomoću vrijednosti koju vraća requestAnimationFrame da poništi okvir (ako već nije pozvan).

Sličan skup funkcija, setInterval i clearInterval koriste se za postavljanje mjerača vremena koji bi trebao ponavljati radnju svakih X milisekundi:

var ticks = 0; var clock = setInterval(function() ( console.log("tick", ticks++); if (ticks == 10) ( clearInterval(clock); console.log("stop."); ) ), 200);

Razdvajanje

Neke vrste događaja mogu se aktivirati mnogo puta u kratkom vremenskom razdoblju (kao što je "pomak miša" i događaj pomicanja javascripta). Prilikom rukovanja takvim događajima morate paziti da to ne potraje predugo, inače će rukovatelju trebati toliko dugo da izvede radnju da interakcija s dokumentom postane spora i isprekidana.

Ako trebate učiniti nešto nestandardno u takvom rukovatelju, možete koristiti setTimeout kako biste bili sigurni da ne traje predugo. To se obično naziva podjela događaja. Postoji nekoliko različitih pristupa drobljenju.

U prvom primjeru želimo učiniti nešto dok korisnik tipka. Ali ne želimo to raditi nakon svakog pritiska tipke. Kada korisnik brzo tipka, morate pričekati da dođe do pauze. Umjesto da odmah izvršimo radnju u rukovatelju događajima, postavili smo odgodu. Također brišemo prethodno kašnjenje (ako postoji). Ako se događaji događaju u kratkim intervalima (manjim od odgode koju smo postavili), tada se odgoda iz prethodnog događaja poništava:

Upišite nešto ovdje... var textarea = document.querySelector("textarea"); var timeout; textarea.addEventListener("keydown", function() ( clearTimeout(timeout); timeout = setTimeout(function() ( console.log("Prestali ste tipkati."); ), 500); ));

Prosljeđivanje nedefinirane vrijednosti za clearTimeout ili njegovo pozivanje na odgodu koja je već pokrenuta neće imati učinka. Više ne moramo paziti kada ćemo ga nazvati, jednostavno to činimo za svaki događaj.

Možete koristiti drugu skriptu ako trebate razdvojiti odgovore u kratkom vremenskom razdoblju. Ali u isto vrijeme, oni bi trebali biti pokrenuti tijekom niza događaja, a ne tek nakon njega. Na primjer, možete poslati trenutne koordinate miša kao odgovor na događaje mousemove (JavaScript događaji miša), ali samo svakih 250 milisekundi:

funkcija displayCoords(event) (document.body.textContent = "miš je na " + event.pageX + ", " + event.pageY; ) var scheduled = false, lastEvent; addEventListener("mousemove", function(event) ( lastEvent = event; if (!scheduled) ( scheduled = true; setTimeout(function() ( scheduled = false; displayCoords(lastEvent); ), 250); ) ));

Zaključak

Rukovatelji događajima omogućuju nam otkrivanje i reagiranje na događaje nad kojima nemamo izravnu kontrolu. Za registraciju takvog rukovatelja upotrijebite metodu addEventListener.

Svaki događaj ima određenu vrstu ("keydown", "focus", itd.) koja ga identificira. Većina događaja pokreće se na određenom DOM elementu, a zatim se prenosi na nadređene čvorove elementa. To omogućuje rukovateljima pridruženim ovim elementima da ih obrade.

Kada se pozove rukovatelj, prosljeđuje mu se objekt događaja s dodatne informacije o akciji. Ovaj objekt također sadrži metode za zaustavljanje daljnjeg širenja događaja (stopPropagation) ili za sprječavanje zadanog preglednika da obradi događaj (preventDefault).

Pritisci tipki generiraju događaje "keydown", "keypress" i "keyup". Klikom miša generiraju se događaji "mousedown", "mouseup" i "click". Pomicanje miša - "mousemove", "mouseenter" i "mouseout".

JavaScript događaj pomicanja može se definirati pomoću događaja "scroll", a promjena fokusa može se definirati pomoću "focus" i "blur". Nakon što se dokument završi s učitavanjem, za prozor se pokreće događaj "load".

Samo jedan dio JavaScript programa može se izvoditi u isto vrijeme. Rukovatelji događajima i druge zakazane skripte moraju čekati da druge skripte u redu završe s izvršavanjem.

Ova publikacija je prijevod članka “Handling Events”, koji je pripremio prijateljski projektni tim

JavaScript događaji

JavaScript, kao i drugi objektno orijentirani jezici, definira niz događaja povezanih s elementima dokumenta. Rukovatelji omogućuju organiziranje reakcije na pojavu događaja iz skripte. U ovom slučaju, odgovarajući rukovatelj naveden je kao atribut elementa HTML dokumenta; vrijednost ovog atributa je JavaScript izraz. Na primjer,

- lebdenje i pomicanje pokazivača miša preko elementa prati promjena boje pozadine.

- kada korisnik pokuša zatvoriti prozor i izvaditi dokument, prikazuje se poruka

- kada kliknete na sliku, izvršava se određena funkcija showPict().

Polovicu rukovatelja podržavaju gotovo svi HTML elementi (). Neki se događaji mogu simulirati odgovarajućim metodama. U nastavku je popis događaja prema HTML specifikacije 4.0 i neki događaji koje podržava MS IE. Tumačenje preglednika može se razlikovati od standarda u smislu primjenjivosti rukovatelja na određene elemente

Rukovatelj događajima	Podržava HTML elemente	Opis	metoda imitacija
onPrekini	IMG	Prekid učitavanja slike
onBlur		Trenutni element gubi fokus, tj. prijeđite na drugi element. Nastaje kada se klikne mišem izvan elementa ili se pritisne tipka tab.	zamutiti ()
onChange	INPUT, SELECT, TEXTAREA	Promjena vrijednosti elemenata obrasca. Javlja se nakon što element izgubi fokus, tj. nakon događaja zamućenja	promijeniti()
na klik		Jedan klik (tipka miša pritisnuta i otpuštena)	klik()
onDblClick	Gotovo svi HTML elementi	Dvostruki klik
onError	IMG, PROZOR	Dolazi do pogreške u izvršavanju skripte
onFocus	A, PODRUČJE, GUMB, ULAZ, OZNAKA, ODABIR, TEKSTUALNO PODRUČJE	Postavljanje elementa u fokus (klikom na element ili ponovnim pritiskom tipke Tab)	usredotočenost()
onKeyDown	Gotovo svi HTML elementi	Na tipkovnici se pritisne tipka
onKeyPress	Gotovo svi HTML elementi	Tipka na tipkovnici se pritisne i otpusti
onKeyUp	Gotovo svi HTML elementi	Tipka tipkovnice otpuštena
onLoad	TIJELO, OKVIR
onMouseDown	Gotovo svi HTML elementi	Tipka miša pritisnuta unutar trenutnog elementa
onMouseMove	Gotovo svi HTML elementi	Pomaknite kursor miša unutar trenutnog elementa
onMouseOut	Gotovo svi HTML elementi	Kursor miša je izvan trenutnog elementa
onMouseOver	Gotovo svi HTML elementi	Kursor miša je iznad trenutnog elementa
onMouseUp	Gotovo svi HTML elementi	Tipka miša otpuštena unutar trenutnog elementa
onMove	PROZOR	Pomicanje prozora
onReset	OBLIK	Poništi podatke obrasca (kliknite na gumb )	reset()
onPromijeni veličinu	PROZOR	Promjena veličine prozora
onSelect	ULAZ, TEXTAREA	Odaberite tekst u trenutnom elementu
onSubmit	OBLIK	Slanje podataka obrasca (klik na gumb )	podnijeti()
onUnload	TIJELO, OKVIR	Pokušaj zatvaranja prozora preglednika i uklanjanja dokumenta