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

Sposobnost JavaScripta da kreira dinamiku html stranice zasniva se na tri stuba. Dva od njih su već razmatrana u prethodnim člancima. I treće su događaji.

Upravljanje prozorima pretraživača pomoću objekta prozora.
Upravljanje objektima unutar prozora je DOM.
Izvrši JavaScript kod na događajima.

Događaj je reakcija računara na radnju korisnika. Na primjer, sa t.z. Događajem javaScript smatra se pritisak na dugme tastature, pomeranje i klikanje tastera miša i zatvaranje prozora pretraživača. Svi događaji sa t.z. javaScript generišu dokumenti i objekti pretraživača (ne postoji koncept 'korisnika'). Na primjer, kada kliknete na pasus, događaj klika mišem se generiše od strane objekta - pasusa.

Da biste mogli da pokrenete neki JavaScript kod koji reaguje na događaje, potrebno je da ovaj kod povežete sa događajem generisanim iz određenog objekta, tj. sa određenim događajem iz određenog objekta. Ova radnja se zove pretplata na događaj.

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

onclick - klik na dugme miša.
ondblclick - dvostruki klik na dugme miša.
onmousedown - tipka miša je pritisnuta (pomaknuta dolje).
onmousemove - miš se kreće preko objekta (događaju se mnogi događaji, kretanje miša 1px = 1 događaj).
onmouseout - miš napušta objekat.
onmouseover - miš se kreće preko željenog objekta.
onmouseup – dugme miša je otpušteno (podignuto prema gore).
onkeydown – dugme na tastaturi je pritisnuto (pomaknuto nadole).
onkeypress – pritiskom na dugme na tastaturi.
onkeyup – dugme tastature je otpušteno (podignuto prema gore).
onblur – gubitak fokusa na ulazu (kursor koji treperi).
onfocus - trenutak kada ovaj element primi ulazni fokus.
onchange – generira kontrola nakon gubitka fokusa ako se tekst promijenio (na primjer, u tekstualnom polju). Izuzetak je element liste 'select', u kojem se ovaj događaj generiše odmah, a ne nakon gubitka fokusa.
onload - generira se kada se stranica završi učitavanjem u prozoru. Obično se koristi kada trebate pokrenuti neki JavaScript kod nakon što se stranica u potpunosti učita.
onunload – javlja se pre nego što se dokument učita iz prozora (tj. kada zatvorimo ovaj dokument ili pređemo na drugi dokument).
onreset – obrazac je resetovan.
onsubmit – obrazac podataka je dostavljen.

Pretplatite se na događaje

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

function myFunc () ( //napravio jednostavnu funkciju upozorenje ("zdravo"); ) function pageInit () ( var p= document. getElementById ("1"); p. onclick= myFunc; ) //poziva funkciju da se aktivira događaj prozora. onload=pageInit; //događaj će se pokrenuti kada se stranica učita< p id= 1 >Paragraf 1 //postavimo id za paragraf

Pretplatite se putem html kod. Nedostatak ove metode je što je html kod začepljen javaScript kodom; Osim toga, postoji nekoliko ograničenja, a u složenim slučajevima je nezgodno koristiti.

< script type= "text/javascript" >funkcija myFunc () ( //napravljeno jednostavno upozorenje funkcije ("zdravo"); )< p onclick= "myFunc()" >Paragraf 2 //nazvan funkcija Event Processing Model

Kada se događaj dogodi na elementu, slični događaji bi se trebali dogoditi na svim njegovim nadređenim elementima do samog vrha stranice (do 'tijela', budući da je to glavna oblast dokumenta). Stoga, svaki događaj koji se dogodi na stranici dešava se u tijelu.

Postavlja se pitanje kojim će se redoslijedom odvijati takvi događaji? U modernim pretraživačima, model rukovanja događajima se naziva 'model mehurića'. Njegova suština: prvo se događa događaj na elementu na koji je kliknut, zatim na njegovom roditelju, i tako sve 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 roditeljski element.
screenX, screenY - koordinate ekrana.
dugme - koji taster miša je pritisnut (0 - nije pritisnut, 1 - levi taster pritisnut, 2 - desni taster pritisnut, 4 - srednji taster pritisnut).
keyCode - numerički kod pritisnutog tastera na tastaturi.
srcElement - element koji je generirao događaj.
fromElement - element sa kojeg se miš pomerio.
toElement - indikacija objekta preko kojeg je miš prešao.
cancelBubble je nestandardan način ako ga date istinito, tada će 'pop-up balon' biti otkazan; ili možete zamijeniti šifru tipke koju je korisnik pritisnuo.

U ovoj lekciji ćemo pogledati glavne tipove događaja koje možete presresti koristeći JavaScript da biste izvršili neki kod.

Kategorije događaja

Svi JavaScript događaji se mogu podijeliti u sljedeće kategorije: Događaji miša, Događaji tipkovnice, Događaji okvira/objekta, Događaji obrasca, Događaji prevlačenja, Događaji animacije, Događaji međuspremnika, Medijski događaji, Prijelazni događaji, Događaji poslani serverom, Događaji dodira, Događaji štampanja (Print Events), razni događaji (Misc Events).

Pažnja: svi događaji u JavaScript-u su napisani malim (malim) slovima.

Događaji miša

mousedown - događaj se događa kada se tipka miša pritisne preko nekog elementa, ali još nije otpuštena.
mouseup - događaj se događa kada tipka miša iznad nekog elementa pređe iz pritisnutog stanja u stanje oslobođeno.
klik - događaj se događa kada korisnik klikne na element. Redoslijed po kojem se događaju klikovi (za lijevo i srednje dugme miša) je mousedown -> mouseup -> click .
contextmenu - događaj se javlja kada korisnik klikne desnim tasterom miša na element. Redoslijed događaja povezanih sa kontekstnim izbornikom (za desnu tipku miša) je mousedown -> mouseup -> contextmenu .
dblclick - događaj se događa kada korisnik dvaput klikne na element. Redoslijed pojavljivanja događaja povezanih s dblclick-om je: mousedown -> mouseup -> klik -> mousedown -> mouseup -> klik -> dblclick .
prelazak miša - događaj se događa kada kursor miša uđe u područje u vlasništvu elementa ili jednog od njegovih djece.
mouseout - događaj se događa kada se kursor miša pomakne iz područja u vlasništvu elementa ili jednog od njegovih djece.
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 u vlasništvu elementa. Ovaj događaj se često koristi u sprezi sa događajem mouseleave, koji se dešava 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 obliku mjehurića (koncept mouseenter događaja ćemo se upoznati 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 događaj mouseleave ne bubble (koncept mehurića događaja ćemo se upoznati malo kasnije).

Događaji na tastaturi

Redoslijed pojavljivanja događaja je: tipka dolje -> pritisak tipke -> tipka gore .

keydown - događaj se događa kada se tipka na tastaturi iznad elementa pritisne, ali još nije otpuštena.
keyup - događaj se dešava kada se pritisnuti taster na tastaturi iznad elementa promeni u otpušteno stanje.
keypress - događaj se događa kada korisnik pritisne tipku na tastaturi iznad elementa.

Objektni i okvirni događaji

preunload - događaj se dešava pre nego što se dokument isprazni. Ovaj događaj vam omogućava da prikažete dodatnu poruku u dijalogu za potvrdu, "Jeste li sigurni da želite napustiti ovu stranicu?" Standardna poruka koja se pojavljuje prilikom zatvaranja dokumenta može se razlikovati ovisno o tome različitim pretraživačima. Ali ne možete ga promijeniti ili izbrisati, možete koristiti samo ovaj metod da mu dodate vlastitu poruku, koja će biti prikazana zajedno sa zadanom porukom.
greška - događaj se pokreće kada dođe do greške, koja se javlja prilikom učitavanja eksterne 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 javlja kada je učitavanje objekta završeno. Događaj učitavanja se najčešće koristi na elementu tijela za izvršavanje skripte odmah nakon što se web stranica potpuno učita.
unload - događaj se javlja kada se stranica učita (na primjer, kada je kartica (prozor) pretraživača zatvorena).
pageshow - događaj se javlja kada korisnik dođe 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 je učitana iz keša. Kada se stranica prvi put učita, događaj pageshow se pokreće odmah nakon događaja učitavanja.
pagehide - događaj se događa kada korisnik napusti stranicu (pagehide događaj se događa prije događaja unload). Osim toga, ovaj događaj, za razliku od događaja unload, ne sprječava keširanje stranice.
resize - događaj se dešava kada se promeni veličina prozora pretraživača.
pomicanje - Događaj se događa kada pomičete sadržaj elementa koji ima traku za pomicanje.

Forma i kontrolni događaji

fokus - događaj se događa kada element primi 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 primi fokus. Događaj fokusa sličan je događaju fokusa, ali se razlikuje od njega po tome što mjehuri. Stoga se može koristiti kada trebate saznati ko gubi fokus: element ili njegovo dijete?
focusout - događaj se događa kada će element uskoro izgubiti fokus. Događaj fokusa sličan je događaju zamućenja, ali se razlikuje od njega po tome što se pojavljuje u obliku mjehurića. Stoga se može koristiti kada trebate saznati ko 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 razlikuje od događaja promjene po tome što se javlja odmah nakon promjene vrijednosti elementa. Događaj promjene, za razliku od događaja unosa, također radi sa keygen i elementima odabira. Za radio dugmad i potvrdne okvire, događaj promjene se događa kada se promijeni stanje ovih elemenata.
input - događaj se javlja nakon promjene vrijednosti elementa unosa ili elementa textarea.
nevažeći - Događaj se događa kada element unosa čiji podaci se trebaju poslati zajedno s drugim podacima obrasca na server sadrži nevažeće podatke.
reset - događaj se događa prije brisanja obrasca, što se radi pomoću elementa za unos sa type="reset" .
pretraga - Događaj se događa nakon što korisnik pritisne tipku Enter ili klikne dugme " x " (otkaži) na elementu unosa sa type="search" .
select - događaj se događa nakon što ste odabrali neki tekst u elementu. Select događaj se uglavnom koristi za ulazni element sa type="text" ili textarea .
submit - događaj se događa prije nego što se obrazac pošalje na server.

Prevucite događaje

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

dragstart – događaj se dešava kada korisnik počne da prevlači element;
drag – događaj se javlja kada korisnik povuče element;
dragend – događaj se javlja kada korisnik završi prevlačenje elementa, tj. kada sam pustio kursor miša.

Događaji povezani s ciljem ispuštanja koji prima metu za povlačenje:

dragenter – događaj se događa kada cilj koji se može prevući uđe u područje mete za ispuštanje koja može prihvatiti metu za prevlačenje.
ragleave - događaj se dešava kada prevučeni objekat (mešta koja se može povući) napusti granice elementa (meta za ispuštanje) koji ga može prihvatiti.
dragover - događaj se događa kada se cilj koji se može prevući pomakne u područje elementa (drop target) koji ga može prihvatiti.
drop - događaj se događa kada korisnik otpusti objekt koji se može prevući u područje elementa (drop target) koji ga može prihvatiti.

Animation Events

Tri događaja koji se mogu dogoditi dok je pokrenuta CSS animacija:

animationstart - Pojavljuje se kada je CSS animacija pokrenuta.
animationiteration - javlja se kada se CSS animacija izvršava više puta.
animationend - javlja se kada CSS animacija završio.

Clipboard događaji

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

Print Events

afterprint - Događaj se dešava kada stranica počne da se štampa (tj. nakon klika na dugme Štampanje u okviru za dijalog) ili ako je dijalog Print zatvoren.
beforeprint - događaj se događa prije štampanja stranice, tj. pre otvaranja dijaloga Štampanje.

Tranzicioni događaji

tranzicija - događaj se pokreće kada je CSS tranzicija završena. Napomena: Ako se prijelaz ukloni prije završetka (na primjer, ako CSS svojstvo tranzicijsko svojstvo je uklonjeno), onda se događaj tranzicije neće pokrenuti.

Događaji koje šalje server

greška - događaj se javlja kada dođe do greške sa izvorom događaja. Greška se obično javlja kada je komunikacija prekinuta. Ako se to dogodi, objekt EventSource će automatski pokušati da se poveže sa serverom.
otvoren - događaj se javlja kada je veza sa izvorom događaja otvorena.
poruka - događaj se javlja kada se poruka primi preko izvora 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

Tokom procesa učitavanja audio/video, događaji se javljaju sljedećim redoslijedom: loadstart -> durationchange -> loadedmetadata -> loadeddata -> progress -> canplay -> canplaythrough .

abort - događaj se javlja kada je audio/video učitavanje prekinuto. Ovaj događaj se događa kada je preuzimanje medijskih podataka prekinuto (otkazano), a ne zato što je došlo do greške.
greška - događaj se javlja kada dođe do greške prilikom učitavanja audio/videa.
zaustavljen - događaj se dešava kada pretraživač pokuša da primi medijske podatke, ali ti podaci nisu dostupni.
- događaj se javlja kada pretraživač počne da traži navedeni audio/video, tj. kada započne proces preuzimanja.
durationchange - događaj se događa kada se promijeni trajanje audio/videa. Ako je audio/video učitan, trajanje će varirati od "NaN" do stvarnog trajanja audio/videa.
loadedmetadata - događaj se pokreće kada su metapodaci za navedeni audio/video učitani. Audio/video metapodaci se sastoje od: trajanja, veličine (samo video) i tekstualnog zapisa.
loadeddata - događaj se javlja nakon što se prvi okvir medija učita.
napredak - događaj se javlja kada pretraživač preuzme navedeni audio/video.
canplay - događaj se dešava kada pretraživač može da počne da reprodukuje navedeni audio/video (to jest, kada je audio/video stream dovoljno baferovan da pretraživač počne da ga reprodukuje).
canplaythrough - događaj se događa u trenutku kada pretraživač može reproducirati navedeni medij bez zaustavljanja radi baferovanja.
završeno - događaj se događa kada se audio/video reprodukcija završi (dostigne kraj). Ovaj događaj se može koristiti za prikazivanje poruka poput "Hvala na pažnji", "Hvala na gledanju" itd.
pauza - događaj se javlja kada je audio/video reprodukcija pauzirana od strane korisnika ili kodom (programski).
play - događaj se javlja kada započne audio/video reprodukcija. Takođe se dešava kada se audio/video ponovo pauzira i počne da se reprodukuje.
reprodukcija - Događaj se dešava kada se audio/video reprodukuje nakon što je pauziran ili zaustavljen radi baferovanja.
ratechange - događaj se dešava kada se promeni brzina reprodukcije audio/video zapisa.
traženje - događaj se događa kada korisnik počne pomicati klizač (prijelaz) na novu vremensku poziciju audio/videa koji se reprodukuje.
traženi - događaj se događa kada korisnik završi pomicanje klizača (prijelaz) na novu privremenu poziciju audio/videa koji se reprodukuje. Traženi događaj je suprotan događaju koji se traži. Da biste dobili trenutnu poziciju reprodukcije, koristite svojstvo currentTime Audio/Video objekta.
timeupdate - događaj se događa kada se promijeni vremenska pozicija audio/videa koji se reprodukuje.
Ovaj događaj se dešava:
- prilikom reprodukcije audio/video toka.
- kada pomerate klizač na novu vremensku poziciju audio/videa koji se reprodukuje.
Događaj timeupdate se često koristi zajedno sa svojstvom currentTime objekta Audio/Video, koje vraća trenutnu vremensku poziciju audio/videa koji se trenutno reproducira u sekundama.
promjena jačine zvuka – događaj se javlja svaki put kada se promijeni glasnoća video/audio toka koji se reprodukuje.
Ovaj događaj se dešava kada:
- povećanje ili smanjenje jačine zvuka;
- utišavanje ili uključivanje zvuka.
čekanje - događaj se događa kada je video zaustavljen radi baferovanja.

Razni događaji

preklopni - Događaj se događa kada korisnik otvori ili zatvori element detalja. Element detalja je dizajniran da kreira dodatne informacije koje korisnik može vidjeti ili sakriti po potrebi.
kotačić - događaj se događa kada kotačić miša pomiče naprijed ili nazad preko elementa.

Zadaci

Da li je događaj "Pritisak na tastaturu (onkeypress)" složen? A ako jeste, 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 dešavaju u ovom slučaju i koji elementi ih generiraju?

Tema događaja je veoma važna i veoma interesantna. Zahvaljujući njemu možete napraviti mnogo zanimljivih stvari kojima će korisnik biti oduševljen. Događaj u JavaScript-u je specifična radnja koju pokreće korisnik ili pretraživač. Na primjer, događaj može biti klik mišem na dugme, pomicanje miša, fokusiranje na element, promjena vrijednosti u tekstualnom polju, promjena veličine prozora pretraživača i tako dalje.

Pripremio sam tabelu sa svim događajima (iz kojih znam najmanje) u JavaScript-u. U njemu ćete naći, prvo, naziv događaja, elemente koji mogu generisati ovaj događaj i opis samog JavaScript događaja.

Događaj	Objekt	Uzrok nastanka
Abortus	Slika	Prekid učitavanja slike
Zamućenje		Izgubljeni fokus elementa
Promjena	FileUpload, Select, Text, Textarea	Promijenite vrijednost
Kliknite	Područje, Dugme, Potvrdni okvir, Dokument, Link, Radio, Resetuj, Pošalji	Kliknite mišem na element
DblClick	Područje, dokument, veza	Dvaput kliknite na element
DragDrop	Prozor	Premjesti u prozor pretraživača
Focus	Dugme, Potvrdni okvir, Prijenos datoteke, Okvir, Sloj, Lozinka, Radio, Resetuj, Odaberi, Pošalji, Tekst, Textarea, Prozor	Postavljanje fokusa na element
KeyDown		Pritiskom na tipku na tastaturi
KeyPress	Dokument, Slika, Link, Textarea	Držanje tipke na tastaturi
KeyUp	Dokument, Slika, Link, Textarea	Otpuštanje tipke na tastaturi
Učitaj	Dokument, slika, sloj, prozor
MouseDown	Dugme, dokument, veza	Dugme miša pritisnuto
MouseMove	Prozor	Miš u pokretu
MouseOut	Područje, sloj, veza	Miš prelazi granice elementa
MouseOver	Područje, sloj, veza	Miš je iznad elementa
MouseUp	Dugme, dokument, veza	Dugme miša je otpušteno
Pokret	Okvir	Premještanje elementa
Resetovati	Forma	Resetirajte obrazac
Promjena veličine	Okvir, prozor	Promjena veličine
Odaberite	Tekst, Textarea	Odabir teksta
Submit	Forma	Prijenos podataka
Istovariti	Prozor	Učitavanje trenutne stranice

Sada hajde da shvatimo kako da koristimo događaje u JavaScript-u. Postoje takozvani obrađivači događaja. Rukovaoci događaja određuju šta će se dogoditi kada se određeni događaj dogodi. Obrađivači događaja u JavaScript-u imaju sljedeći opći oblik:

OnEventName

Odnosno, prvo dolazi prefiks “on”, a zatim naziv događaja, na primjer, sljedeći obrađivači događaja: onFocus, onClick, onSubmit i tako dalje. Mislim da ovde nema pitanja. A sada glavno pitanje: “Kako koristiti događaje u JavaScript-u?”. Opseg njihove primjene je ogroman, a sada ćemo se osvrnuti na jedan problem. Na stranici se nalaze tri linka. Svaki od linkova je odgovoran za različitu boju pozadine (na primjer, bijela, žuta i zelena). U početku je pozadina bijela. Kada pređete mišem preko određene veze, boja pozadine se mijenja. Kada odmaknete miša, boja pozadine se vraća na zadanu boju. Kada kliknete na vezu, boja pozadine se zadržava kao zadana.

a (
boja:plava;
dekoracija teksta: podvlačenje;
kursor: pokazivač;
}

var default_color = "bijelo";

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

funkcija setDefaultColor(color) (
default_color = boja;
}

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

Bijelo
Žuta
Zeleno

Pogledajmo ovu skriptu, odnosno cijelu HTML stranicu sa podrškom za JavaScript i CSS (drugim riječima, ovo je primjer DHTML-a). Prvo dolaze uobičajene HTML oznake, sa kojima svaka HTML stranica počinje. Zatim kreiramo stil u kojem tražimo da svi linkovi na datoj stranici budu plavi, podvučeni i da pokazivač miša na njima bude u obliku "Pointer". Možete reći: "Zašto trebate postaviti stil? Na kraju krajeva, veze će biti potpuno iste." Tako je, linkovi, ali mi nemamo linkove kao takve (na kraju krajeva, u oznaci nema href atributa), tako da će oni po defaultu biti običan crni tekst (međutim, možete kliknuti i na tekst). Stoga je stil neophodan. Možete ga ukloniti i vidjeti šta će se dogoditi. Još bolje, dodajte atribut href (sa bilo kojom vrijednošću, čak i prazan) 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() je odgovorna za privremenu promjenu boje.

Funkcija setDefaultColor() je odgovorna za promjenu zadane boje.

Funkcija defaultColor() postavlja zadanu boju pozadine.

Zatim postoje veze sa atributima u obliku rukovaoca događaja. Kada pređete mišem preko veze, događa se MouseOver događaj; u skladu s tim, onMouseOver rukovalac događaja poziva funkciju setTempColor() i prosljeđuje odgovarajući parametar. Kada uklonite miša iz elementa, pokreće se događaj MouseOut, a zatim se poziva funkcija defaultColor(), koja boju pozadine postavlja na zadanu boju. I konačno, kada miš klikne na vezu (onClick rukovalac), poziva se funkcija setDefaultColor() koja boju specificiranu u parametru postavlja na zadanu boju pozadine. Kao što vidite, sve je prilično jednostavno.

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

Neki programi koriste JavaScript događaj rade direktno sa korisničkim unosom. Trenutak nastanka i redoslijed takvih interakcija ne može se unaprijed predvidjeti.

Obrađivači događaja

Možete reagovati na pritisak na taster tako što ćete stalno čitati njegovo stanje kako biste uhvatili trenutak kada se taster pritisne pre nego što se ponovo otpusti.

Ovako je obrađen unos podataka na primitivnim mašinama. Naprednije je otkrivanje pritiska na tipku i stavljanje u red čekanja. Program tada može periodično provjeravati red novih događaja i reagirati na ono što tamo pronađe. U tom slučaju, program mora zapamtiti da skenira red i to često.

U periodu od pritiska na tipku dok program ne otkrije ovaj događaj, on zapravo ne odgovara na zahtjeve. Ovaj pristup se naziva anketiranje (anketa).

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

Najbolji način je implementacija sistema koji kodu daje mogućnost da reaguje na događaje kako se dešavaju. Preglednici to implementiraju tako što pružaju mogućnost registracije funkcija rukovatelja za određene JavaScript događaje:

Kliknite na ovaj dokument da aktivirate rukovalac.

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

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

Događaji i DOM čvorovi

Svaki rukovalac događaja pretraživača je registrovan sa kontekstom. Kada se pozove funkcija addEventListener, ona se poziva kao metoda za ceo prozor, pošto je u pretraživaču globalni opseg ekvivalentan prozorski objekat. Svaki DOM element ima svoju metodu addEventListener, koja vam omogućava da slušate događaje specifično na tom elementu:

Kliknite na mene

Ovde nema rukovaoca.

var button = document.querySelector("button"); button.addEventListener("klik", function() ( console.log("Kliknuto dugme."); ));

IN u ovom primjeru rukovalac je povezan sa čvorom dugmeta. JavaScript događaji miša pokreću rukovalac, ali klikovi u ostatku dokumenta ne.

Postavljanjem atributa onclick čvora, dobijamo isti rezultat. Ali čvor ima samo jedan onclick atribut, tako da možete registrirati samo jedan rukovalac po čvoru. Metoda addEventListener vam omogućava da dodate bilo koji broj rukovalaca. Na ovaj način smo osigurani od slučajne zamjene procesora koji je već registrovan.

Metoda removeEventListener se poziva s argumentima sličnim addEventListener. Uklanja rukovaoca:

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

Da bismo otkazali funkciju rukovaoca, dajemo joj ime (na primjer, jednom). Tako da ga prosljeđujemo i addEventListener i removeEventListener.

Objekti događaja

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

Kliknite na mene bilo kojim tasterom miša var button = document.querySelector("button"); button.addEventListener("mousedown", function(event) ( if (event.which == 1) console.log("Left button"); else if (event.which == 2) console.log("Srednje dugme" ); else if (event.which == 3) console.log("Desno dugme"); ));

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

Širenje

Rukovaoci događajima (kao što su JavaScript dodirni događaji) registrovani za roditeljske čvorove će takođe primati događaje koji se dešavaju na podređenim elementima. Ako se klikne na dugme unutar pasusa, rukovaoci događaja paragrafa će takođe primiti kliknite događaj.

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

U svakom trenutku, rukovalac događajem može pozvati metodu stopPropagation na objektu događaja kako bi spriječio dalje širenje događaja. Ovo može biti korisno kada imate dugme unutar drugog interaktivnog elementa i ne želite da kliknete na dugme da pokrene ponašanje određeno za klik na spoljne elemente.

U sljedećem primjeru registrujemo rukovaoce "MouseDown" i za dugme i za pasus. Kada kliknete desnim tasterom miša (JavaScript događaji miša), rukovalac poziva metodu stopPropagation, koja sprečava pokretanje obrađivača pasusa. Kada kliknete na dugme drugim tasterom miša, pokreću se oba rukovaoca:

Paragraf i dugme u njemu.

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

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

Također možete koristiti JavaScript cilj događaja da proširite opseg događaja određenog tipa. Na primjer, ako imate čvor koji sadrži dugu listu dugmadi, zgodnije je registrirati jedan rukovalac klikom za vanjski čvor i koristiti svojstvo cilja da prati da li je gumb kliknut, umjesto da registrirate instance rukovatelja za sve gumbe:

A B C document.body.addEventListener("klik", funkcija(događaj) ( 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 ciljnog elementa veze. Ako kliknete na strelicu nadole, pretraživač će pomerati stranicu prema dole. Ako kliknete desnim tasterom miša, otvoriće se kontekstni meni.

Za većinu tipova događaja, JavaScript obrađivači događaja se pozivaju prije izvođenja zadanih radnji. Ako ne želite da se dogodi zadano ponašanje, morate pozvati metodu preventDefault na objektu događaja.

Koristite ga za implementaciju prilagođenih prečica na tastaturi ili kontekstnih menija. Ili, da nadjačate ponašanje koje korisnici očekuju. Ispod je link koji se ne može pratiti:

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

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

Ovisno o pretraživaču, neki događaji možda neće biti presretnuti. IN google chrome na primjer, prečica na tipkovnici (kod ključa događaja JavaScript) 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 tastaturi, pretraživač pokreće događaj "keydown". Kada pusti ključ, 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 događaj se također pokreće kada korisnik pritisne i drži tipku ili dok se tipka drži pritisnutom. Na primjer, ako želite povećati brzinu lika u igri pritiskom na tipku sa strelicom, a opet je smanjiti otpuštanjem tipke, onda morate paziti da ne povećavate brzinu svaki put kada se tipka pritisne.

Prethodni primjer koristio je JavaScript svojstvo koda ključa objekta događaja. Uz njegovu pomoć utvrđuje se koji je taster pritisnut ili otpušten. Nije uvijek očigledno kako prevesti numerički kod ključa u stvarni ključ.

Unicode karakterni kod se koristi za čitanje vrijednosti slovnih i brojčanih tipki. Povezuje se sa slovom (velikim slovima) ili brojem naznačenim na ključu. Metoda charCodeAt za nizove vam omogućava da dobijete ovu vrijednost:

console.log("ljubičasta".charCodeAt(0)); // → 86 console.log("1".charCodeAt(0)); // → 49

Drugi ključevi imaju manje predvidljive šifre ključeva povezane s njima. Najbolji način Određivanje koda koji vam je potreban stvar je eksperimentiranja. Registrirajte rukovao događajima pritiska na tipku koji hvata primljene kodove i pritišće željeni taster.

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

Da nastavite, pritisnite Ctrl-Space.

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

Događaji "keydown" i "keyup" pružaju informacije o stvarnim pritiscima tipki. Ali šta ako nam treba sam ulazni tekst? Preuzimanje teksta iz kodova je nezgodno. Postoji događaj za ovo, "pritisak na taster", koji se pokreće odmah nakon "pritisak na taster". Ponavlja se zajedno sa "keydown" sve dok je tipka pritisnuta. Ali samo za ključeve pomoću kojih se unose znakovi.

Svojstvo charCode na objektu događaja sadrži kod koji se može protumačiti kao kod Unicode znakova. Možemo koristiti funkciju String.fromCharCode da pretvorimo ovaj kod u niz od jednog karaktera.

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

addEventListener("keypress", function(event) ( console.log(String.fromCharCode(event.charCode)); ));

DOM čvor na kojem se događaj događa ovisi o elementu koji je imao fokus na ulazu kada je tipka pritisnuta. Uobičajeni čvorovi ne mogu imati fokus za unos (osim ako im ne postavite atribut tabindex), ali elementi kao što su veze, dugmad i polja obrasca 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

Pritiskom na tipku miša također se 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 pusti dugme miša. Ovi događaji se događaju na DOM čvorovima nad kojima je lebdeći miš bio u trenutku kada se događaj dogodio.

Za zajednički čvor koji ima i pritisak i otpuštanje miša, događaj klika se pokreće nakon događaja mouseup. Na primjer, ako pritisnete dugme miša na jednoj stavci, a zatim pomerite kursor na drugu stavku i otpustite dugme, događaj klika će se desiti na elementu koji sadrži obe ove stavke.

Ako se dva klika dogode blizu jedan drugom, aktivira se i događaj "dblclick" (dvostruki klik). Pojavljuje se nakon drugog klika. Da biste dobili tačne informacije o lokaciji na kojoj 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 ugao dokumenta.

Ispod je implementacija primitivnog programa za crtanje. Svaki put kada kliknete mišem na dokument (ispod kursora), dodaje se tačka:

tijelo (visina: 200px; pozadina: bež; ) .dot (visina: 8px; širina: 8px; radijus granice: 4px; /* zaobljeni uglovi */ background: 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 = (događaj .pageY - 4) + "px"; document.body.appendChild(tačka); ));

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

Pokret miša

Svaki put kada se miš pomjeri, aktivira 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 prevlačenja elemenata pomoću miša.

U sljedećem primjeru, program prikazuje panel i postavlja rukovaoce događajima tako da kada se povuče, panel postaje uži ili širi:

Povucite rub panela da promijenite njegovu širinu:

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

Imajte na umu da je rukovalac "mousemove" registrovan za ceo prozor. Čak i ako se miš pomakne iz panela prilikom promjene veličine, mi i dalje ažuriramo širinu panela i prekidamo JavaScript dodirne događaje kada se otpusti tipka miša.

Moramo prestati mijenjati veličinu panela kada korisnik otpusti tipku miša. Nažalost, ne postavljaju svi pretraživači svojstva which za događaje mousemove. Postoji standardno svojstvo dugmadi koje pruža slične informacije, ali takođe nije podržano u svim pretraživačima. Srećom, svi glavni pretraživači podržavaju jednu stvar: ili dugmad ili koji . Funkcija buttonPressed u gornjem primjeru prvo pokušava koristiti svojstvo buttons, a ako nije dostupna, prelazi na koji .

Kada se miš pomakne preko čvora ili napusti čvor, aktiviraju se događaji "mouseover" ili "mouseout". Mogu se koristiti za kreiranje efekata lebdenja, prikazivanje neke vrste natpisa ili promjenu stila elementa.

Da biste stvorili takav efekat, nije dovoljno da ga jednostavno počnete prikazivati kada dođe do događaja prelaska miša i završiti nakon događaja mouseout. Kada se miš pomakne od čvora do jednog od njegovih potomaka, događa se "mouseout" događaj za roditeljski čvor. Iako pokazivač miša nije napustio raspon širenja čvora.

Da stvar bude gora, ovi JavaScript događaji se propagiraju baš kao i drugi događaji. Kada miš napusti jedan od podređenih čvorova za koje je registriran rukovalac, događaj "mouseout" će se pokrenuti.

Da biste zaobišli ovaj problem, možete koristiti svojstvo povezanog Target događaja. Kada dođe do događaja "prelazak mišem", on ukazuje na koji element je prije prešao pokazivač miša. A u slučaju "izlaska miša" - na koji element se pomjera pokazivač. Mi ćemo promijeniti samo efekat prelaska miša kada je povezani Target 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 pasusa.

var para = document.querySelector("p"); function isInside(čvor, cilj) (za (; čvor != null; čvor = node.parentNode) if (čvor == cilj) vrati true; ) para.addEventListener("prelazak miša", funkcija(događaj) ( if ( !isInside (event.relatedTarget, para)) para.style.color = "crveno"; )); para.addEventListener("mouseout", function(event) (if (!isInside(event.relatedTarget, para)) para.style.color = ""; ));

IsInside funkcija prati roditeljske veze datog čvora ili dok se ne dosegne gornji dio dokument (kada je čvor null). Ili roditeljski element koji nam treba neće biti pronađen.

Lebdeći efekat je mnogo lakše napraviti korišćenjem pseudo-selektora CSS:hover, kao što je prikazano u sledećem primeru. Ali kada efekat lebdenja uključuje nešto složenije od samo promjene stila ciljnog čvora, onda morate upotrijebiti trik koristeći događaje prelaska miša i izlaska miša (JavaScript događaji miša):

Scroll Events

Svaki put kada se element skroluje, na njemu se pokreće JavaScript događaj pomeranja. Može se koristiti za praćenje šta je unutra ovog trenutka pregledan od strane korisnika; 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 dio po dio ispunjava drugom bojom dok se pomičemo niz stranicu:

.progress ( granica: 1px puna plava; širina: 100px; pozicija: fiksna; vrh: 10px; desno: 10px; ) .progress > div (visina: 12px; pozadina: plava; širina: 0%; ) body (visina: 2000px ; )

Skroluj me...

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

Postavljanjem pozicije elementa ili fiksnog svojstva, dobijamo isti rezultat kao postavljanje position:apsolute . Ali ovo također zaključava element od pomicanja zajedno s ostatkom dokumenta. Kao rezultat toga, indikator napretka će biti statički fiksiran u gornjem uglu. Unutar njega je 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 kroz prozor kada dođete do dna dokumenta. Sa innerHeight može se koristiti i innerWidth. Deljenje pageYOffset (trenutne pozicije okvira za pomeranje) sa maksimalno dozvoljenom pozicijom pomeranja i množenjem sa 100 daje nam procenat za traku napretka.

Pozivanje preventDefault na događaju JavaScript pomicanja ne sprječava pomicanje. Rukovalac događajima se poziva tek nakon što dođe do pomicanja.

Događaji fokusa unosa

Kada element ima fokus za unos, pretraživač pokreće događaj "fokus" na njemu. Kada se fokus ulaza ukloni, aktivira se događaj "zamućenja".

Ova dva događaja se ne šire. Rukovalac roditeljskog elementa nije obaviješten kada podređeni element ima fokus za unos.

Sljedeći primjer prikazuje opis alata za tekstualno polje, koji trenutno ima fokus na unosu:

ime:

Dob:

Objekat prozora prima događaje "fokus" i "zamućenje" kada korisnik dođe do ili napusti karticu, prozor pretraživača u kojem je dokument prikazan.

Učitaj događaj

Kada se stranica završi sa učitavanjem, javlja se JavaScript događaj “load” za tijelo dokumenta i objekte prozora. Koristi se za planiranje inicijalizacije 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 nešto učiniti s dijelovima dokumenta koji se učitavaju nakon .

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

Kada zatvorimo stranicu ili pređemo na drugu (na primjer, klikom na vezu), aktivira se događaj "prije poništavanja". Koristi se kako bi se spriječilo da korisnik slučajno izgubi ono na čemu je radio nakon zatvaranja dokumenta.

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

Redoslijed izvršavanja skripte

Različiti faktori mogu pokrenuti izvršavanje skripte: čitanje oznake, pojava događaja. Metoda requestAnimationFrame specificira poziv funkcije prije nego što se sljedeća stranica ponovo prikaže. Ovo je još jedan način na koji se skripte mogu pokrenuti.

Događaji odabira JavaScripta i svi ostali se mogu pokrenuti u bilo koje vrijeme, ali dvije skripte se nikada neće pokrenuti u isto vrijeme u istom dokumentu. Ako je skripta već pokrenuta, rukovaoci događajima i isječci koda zakazani od strane druge skripte morat će čekati svoj red. To je razlog zašto se dokument zamrzava kada skripta radi duže vrijeme. Preglednik ne reaguje na klikove i druge događaje jer ne može pokrenuti rukovaoce događajima dok se trenutna skripta ne završi.

Neka programska okruženja vam omogućavaju da kreirate više niti izvršavanja koje se pokreću istovremeno. Pružajući mogućnost obavljanja više zadataka istovremeno, možete povećati brzinu izvršavanja programa. Ali kada imamo više radnji koje utiču na iste delove sistema u isto vreme, programu postaje teže da ih izvede.

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

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

addEventListener("message", function(event) (postMessage(event.data * event.data); ));

Zamislite da je broj koji kvadrirate vrlo velik, dugačak za izračunavanje i da morate izvršiti izračun na pozadinskoj niti. Ovaj kod pokreće web radnike, šalje mu 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 kod primaoca. Skripta koja je kreirala web radnike šalje i prima poruke preko Worker objekta. Koristeći ovaj objekat, okruženje stupa u interakciju sa skriptom koja ga je kreirala, šaljući informacije i slušajući ih u svom globalnom obliku sa originalnom skriptom.

Podešavanje tajmera

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

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

Ponekad moramo otkazati funkciju koju smo planirali. Ovo se radi pohranjivanjem vraćene vrijednosti setTimeout i pozivanjem clearTimeout na njemu:

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 vrijednošću koju vraća requestAnimationFrame da poništi okvir (ako već nije pozvan).

Sličan skup funkcija, setInterval i clearInterval se koristi za postavljanje tajmera 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

Neki tipovi događaja mogu se pokrenuti mnogo puta u kratkom vremenskom periodu (kao što je "mousemove" i događaj javascript skrolovanja). Prilikom rukovanja takvim događajima, morate biti oprezni da to ne potraje predugo, inače će rukovaocu trebati toliko dugo da izvrši radnju da interakcija s dokumentom postane spora i isprekidana.

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

U prvom primjeru želimo nešto učiniti dok korisnik kuca. Ali ne želimo ovo raditi nakon svakog pritiska na tipku. Kada korisnik brzo kuca, morate sačekati dok ne dođe do pauze. Umjesto da odmah izvršimo akciju u obrađivaču događaja, postavili smo odgodu. Također brišemo prethodno kašnjenje (ako ga ima). Ako se događaji događaju u kratkim intervalima (manjim od kašnjenja koje smo postavili), onda 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 kucati."); ), 500); ));

Prosljeđivanje nedefinirane vrijednosti za clearTimeout ili pozivanje na kašnjenje koje je već pokrenuto neće imati efekta. Više ne moramo da vodimo računa kada ćemo ga nazvati, samo to radimo za svaki događaj.

Možete koristiti drugu skriptu ako trebate razdvojiti odgovore u kratkom vremenskom periodu. Ali istovremeno ih treba pokrenuti tokom niza događaja, a ne tek nakon njih. 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 planirano = false, lastEvent; addEventListener("mousemove", function(event) ( lastEvent = događaj; if (!planirano) (planirano = istinito; setTimeout(function() (planirano = false; displayCoords(lastEvent); ), 250); ) ));

Zaključak

Obrađivači događaja nam omogućavaju da otkrijemo i odgovorimo na događaje nad kojima nemamo direktnu kontrolu. Za registraciju takvog rukovatelja koristite metodu addEventListener.

Svaki događaj ima specifičan tip („prekidanje tastera“, „fokus“ itd.) koji ga identifikuje. Većina događaja se pokreće na određenom DOM elementu, a zatim se širi na roditeljske čvorove elementa. Ovo omogućava rukovaocima povezanim s ovim elementima da ih obrađuju.

Kada se pozove rukovalac, prosleđuje mu se objekat događaja sa Dodatne informacije o akciji. Ovaj objekat takođe sadrži metode za zaustavljanje daljeg širenja događaja (stopPropagation) ili za sprečavanje podrazumevanog pretraživača da obradi događaj (preventDefault).

Pritisci na tipke generiraju događaje "keydown", "keypress" i "keyup". Klik mišem generiše događaje "mousedown", "mouseup" i "click". Pomicanje miša - "mousemove", "mouseenter" i "mouseout".

Događaj JavaScript pomicanja može se definirati korištenjem događaja "scroll", a promjena fokusa se može definirati korištenjem "focus" i "blur". Kada se dokument završi sa učitavanjem, za prozor se pokreće događaj “load”.

Samo jedan dio JavaScript programa može se izvoditi istovremeno. Rukovaoci događaja i druge zakazane skripte moraju čekati da se 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 orijentisani jezici, definiše niz događaja povezanih sa elementima dokumenta. Rukovaoci omogućavaju organizovanje reakcije na pojavu događaja iz skripte. U ovom slučaju, odgovarajući rukovatelj je specificiran kao atribut elementa HTML dokumenta; vrijednost ovog atributa je JavaScript izraz. Na primjer,

- lebdenje i pomeranje kursora miša preko elementa je praćeno promjenom boje pozadine.

- kada korisnik pokuša da zatvori prozor i skine dokument, prikazuje se poruka

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

Polovina rukovatelja je podržana od strane gotovo svih HTML elemenata (). Neki događaji se mogu simulirati odgovarajućim metodama. Ispod je lista događaja prema HTML specifikacije 4.0 i neki događaji koje podržava MS IE. Tumačenje pretraživača može se razlikovati od standarda u smislu primenljivosti rukovaoca na određene elemente

Obrađivač događaja	Podržava HTML elemente	Opis	Metoda imitacija
onAbort	IMG	Prekid učitavanja slike
onBlur		Trenutni element gubi fokus, tj. premjestiti na drugi element. Pojavljuje se kada se klikne mišem izvan elementa ili se pritisne tabulator.	zamagljivanje()
onChange	INPUT, SELECT, TEXTAREA	Promjena vrijednosti elemenata forme. Javlja se nakon što element izgubi fokus, tj. nakon događaja zamućenja	promijeniti()
onClick		Jednim klikom (tipka miša pritisnuta i otpuštena)	klik ()
onDblClick	Gotovo svi HTML elementi	Dvostruki klik
onError	IMG, PROZOR	Došlo je do greške u izvršavanju skripte
onFocus	A, PODRUČJE, DUGME, INPUT, LABEL, SELECT, TEXTAREA	Fokusiranje elementa (klikom na element ili ponovnim pritiskom na tipku Tab)	fokus()
onKeyDown	Gotovo svi HTML elementi	Na tastaturi se pritisne tipka
onKeyPress	Gotovo svi HTML elementi	Tipka na tastaturi se pritisne i otpusti
onKeyUp	Gotovo svi HTML elementi	Taster na tastaturi otpušten
onLoad	TELO, OKVIR
onMouseDown	Gotovo svi HTML elementi	Taster miša pritisnut unutar trenutnog elementa
onMouseMove	Gotovo svi HTML elementi	Pomjerite 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	Dugme miša je otpušteno unutar trenutnog elementa
onMove	PROZOR	Pomeranje prozora
onReset	FORMA	Resetirajte podatke obrasca (kliknite na dugme )	resetovati()
onResize	PROZOR	Promjena veličine prozora
onSelect	INPUT, TEXTAREA	Odaberite tekst u trenutnom elementu
onSubmit	FORMA	Slanje podataka obrasca (klikom na dugme )	podnijeti()
onUnload	TELO, OKVIR	Pokušaj zatvaranja prozora pretraživača i učitavanja dokumenta