Dokumentirajte javascript događaje. JavaScript - Vrste događaja. Priložite događaje ispravnim elementima

Tema događanja je vrlo važna i vrlo zanimljiva. Zahvaljujući njoj možete napraviti puno zanimljivih stvari kojima će korisnik biti oduševljen. JavaScript događaj je specifična 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 nekom tekstualnom polju, promjena veličine prozora preglednika i tako dalje.

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

Događaj	Objekt	Uzrok nastanka
Prekid	Slika	Prekid učitavanja slike
Zamućenje		Gubitak fokusa 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
DragDrop	Prozor	Premjesti u prozor preglednika
Usredotočenost	Gumb, Potvrdni okvir, Prijenos datoteke, Okvir, Sloj, Lozinka, Radio, Reset, Odaberi, Pošalji, Tekst, Textarea, Prozor	Postavljanje fokusa na element
KeyDown		Pritiskom na tipku na tipkovnici
Pritiskom na tipku	Dokument, Slika, Veza, Textarea	Držanje tipke na tipkovnici
KeyUp	Dokument, Slika, Veza, Textarea	Otpuštanje tipke na tipkovnici
Opterećenje	Dokument, slika, sloj, prozor
MouseDown	Gumb, dokument, veza	Tipka miša pritisnuta
MouseMove	Prozor	Miš u pokretu
MouseOut	Područje, sloj, veza	Miš je izvan granica elementa
Prelazak mišem	Područje, sloj, veza	Miš je iznad elementa
MouseUp	Gumb, dokument, veza	Gumb miša otpušten
Potez	Okvir	Premještanje stavke
Resetiraj	Oblik	Resetiranje obrasca
Promjena veličine	Okvir, prozor	Promjena veličine
Odaberi	Tekst, Textarea	Odabir teksta
podnijeti	Oblik	Prijenos podataka
Istovariti	Prozor	Učitavanje trenutne stranice

Sada shvatimo kako koristiti događaje u JavaScriptu... Postoje tzv obrađivači događaja. Obrađivači događaja samo odredite što će se dogoditi kada se dogodi određeni događaj. JavaScript obrađivači događaja ima sljedeći opći oblik:

OnNameEvents

To jest, prvo dolazi prefiks " na“, pa što je sljedeće naziv događaja, na primjer, takav obrađivači događaja: onFocus, na klik, onSubmit itd. Mislim da ovdje nije bilo pitanja. A sada glavno pitanje: " Kako mogu koristiti događaje u JavaScriptu?". Područje njihove primjene je ogromno, a mi ćemo sada s vama razmotriti jedan problem. Na stranici su tri linka. Svaki od linkova je odgovoran za drugu boju pozadine (recimo, bijela, žuta i zelena) . U početku je pozadina bijela. Kada mišem zadržite iznad određene veze, boja pozadine se mijenja. Kada zadržite miš, boja pozadine se vraća na zadanu. Kada se mišem klikne na vezu, boja pozadine se zadržava kao zadano.

Bijeli
Žuta boja
Zelena

Pozabavimo se ovim scenarijem, odnosno cjelinom HTML stranica uz podršku JavaScript i CSS(drugim riječima, ovo je primjer DHTML). Na prvom mjestu su oni uobičajeni HTML oznake, s kojim svaki počinje HTML stranica... Zatim stvaramo stil u kojem zahtijevamo da sve veze na ovoj stranici budu plave, podvučene i da je pokazivač miša na njima u obliku "Pointer". Mogli biste reći: "Zašto trebate postaviti stil? Uostalom, veze će ionako biti potpuno iste." Tako je, linkovi, ali mi nemamo linkove kao takve (na kraju krajeva, nema atributa href u oznaci), tako da će prema zadanim postavkama biti običan crni tekst (iako možete kliknuti i na tekst). Stoga je stil neophodan. Možete ga ukloniti i vidjeti što će se dogoditi. Još bolje, stavi href atribut(bilo koja vrijednost, čak i prazna) i objasnite zašto je skripta prestala raditi. Dalje već počinje JavaScript... Kreiramo varijablu zadana_boja koji je odgovoran za zadanu boju. Zatim postoje tri funkcije:

Funkcija setTempColor () odgovoran za privremenu promjenu boje.

Funkcija setDefaultColor () odgovoran za promjenu zadane boje.

Funkcija zadana boja () postavlja zadanu boju pozadine.

Zatim u obrascu postoje veze s atributima obrađivači događaja... Kada zadržite pokazivač miša iznad veze, Događaj MouseOver, odnosno onMouseOver obrađivač događaja poziva funkciju setTempColor () i prosljeđuje odgovarajući parametar. Kada uklonite miš iz elementa, Događaj MouseOut, a zatim nazvao funkcija defaultColor ()., što boju pozadine čini zadanom. I na kraju, kada kliknete na link ( onClick rukovalac) funkcija se poziva setDefaultColor (), koji boju navedenu u parametru postavlja na zadanu boju pozadine. Kao što vidite, sve je prilično jednostavno.

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

Sposobnost JavaScripta za stvaranje dinamičkih html stranica temelji se na tri stupa. Dva od njih su već bila obrađena u prethodnim člancima. I treći su događaji.

• Upravljanje prozorima preglednika - korištenjem objekta prozora.
• Upravljanje objektima unutar prozora je DOM.
• Izvršavanje javaScript koda na događajima.

Događaj- reakcija računala na radnju korisnika. Na primjer, s T. Događajem javaScript smatra se pritisak na tipku tipkovnice, pomicanje i klikovi mišem te zatvaranje prozora preglednika. Sva događanja s t. javaScript generiraju dokumenti i objekti preglednika (bez koncepta 'korisnika'). Na primjer, kada kliknete na odlomak, događaj klika mišem generira objekt - odlomak.

Da biste mogli pokrenuti neki javaScript kod koji odgovara na događaje, morate ovaj kod povezati s događajem generiranim iz određenog objekta, tj. s određenim događajem iz određenog objekta. Ova akcija se zove - pretplata na događaj.

Pretplata znači da vezujemo funkciju na određeni događaj iz određenog objekta u objektnom modelu preglednika. A kada ovaj objekt stvori (generira) ovaj događaj, tada će se ova funkcija automatski pokrenuti.

• onclick - klik na tipku miša.
• ondblclick - dvostruki klik na tipku miša.
• onmousedown - tipka miša je pritisnuta (dolje).
• onmousemove - miš se pomiče preko objekta (događa se mnogo, pomicanje miša za 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 prema gore).
• onkeydown - tipka tipkovnice pritisnuta (dolje).
• onkeypress - pritiskom na tipku na tipkovnici.
• onkeyup - tipka tipkovnice je otpuštena (podignuta prema gore).
• onblur - gubitak fokusa ulaza (trepćući kursor).
• onfocus - trenutak kada ovaj element prima ulazni fokus.
• onchange - generira kontrola nakon gubitka fokusa, ako se tekst promijenio (na primjer, u tekstualnom okviru). Iznimka je stavka popisa 'odaberi' u kojoj se ovaj događaj generira 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 potpuno učita.
• onunload - javlja se prije nego što se dokument učita iz prozora (tj. kada zatvorimo ovaj dokument ili prijeđemo na drugi dokument).
• onreset - obrazac je resetiran.
• onsubmit - obrazac podataka je dostavljen.

Pretplata na događaje

• Pretplata putem javaScript-a. Ova metoda se koristi u većini slučajeva. Prvo, trebamo pronaći objekt elementa za koji se želimo pretplatiti na događaj, na primjer, putem getElementById metode (navesti id potrebnog elementa).

funkcija myFunc () ( // stvorio jednostavnu funkciju upozorenje ("zdravo"); ) funkcija pageInit () (var p = dokument. getElementById ("1"); p. onclick = myFunc;) // poziva funkciju za pokretanje događaja prozor. onload = pageInit; // događaj će se pokrenuti kada se stranica učita < p id= 1 >Stavak 1 // postavlja id za paragraf

• Pretplata putem html koda. Nedostatak ove metode je što zatrpa html kod svojim javaScript kodom; osim toga, postoji nekoliko ograničenja, au složenim slučajevima je nezgodno koristiti.

< script type= "text/javascript" >funkcija myFunc () ( // stvorio jednostavnu funkciju upozorenje ("zdravo"); ) < p onclick= "myFunc()" >Stavak 2 // zove funkciju

Model upravljanja događajima

Kada se događaj dogodi za element, tada bi se slični događaji trebali dogoditi i za sve njegove roditeljske elemente do samog vrha stranice (do 'tijela', budući da je to glavno područje dokumenta). Stoga će se svaki događaj koji se dogodi na stranici aktivirati na tijelu.

Tada se postavlja pitanje kojim će se redoslijedom događati takvi događaji? U modernim preglednicima model upravljanja događajima naziva se model mjehurića. Njegova bit: prvo se događa događaj za element koji je kliknut, zatim za njegov roditelj, i tako dalje do samog vrha - do 'tijela'.

Element -> element 2 -> dokument -> prozor

Parametri događaja (objekt događaja)

Postoji takav objekt događaj koji ima mnoga svojstva. Čitanjem ovih svojstava možete dobiti informacije o događajima. Da biste dobili informaciju, prvo morate dobiti sam objekt.

Glavni Svojstva ovog objekta:

• x, y - koordinate miša u vrijeme događaja.
• clientX, clientY su isti.
• offsetX, offsetY - isto, ali ovo je pomak miša u odnosu na roditeljski element.
• screenX, screenY - koordinate zaslona.
• tipka - koja tipka miša je pritisnuta (0 - nije pritisnuta, 1 - lijeva tipka pritisnuta, 2 - desna tipka pritisnuta, 4 - srednja tipka pritisnuta).
• keyCode Numerički kod pritisnute tipke na tipkovnici.
• srcElement - element koji je pokrenuo događaj.
• fromElement - element s kojeg se miš pomaknuo.
• toElement - indikacija objekta preko kojeg je miš pregazio.
• cancelBubble - nestandardan način, ako mu date vrijednost true, tada će 'skočni balon' biti otkazan; ili možete promijeniti kod tipke koju je korisnik pritisnuo.

Od autora: Nakon što je web stranica potpuno učitana i spremna, u JavaScriptu se pokreće čitav niz događaja, koji postaje još veći kada korisnik počne komunicirati sa stranicom na ovaj ili onaj način. Događaji uključuju učitavanje stranice, pomicanje prema dolje, klikanje na gumb ili čak ispunjavanje obrasca. Da biste pokrenuli događaje u JavaScriptu, potreban vam je poseban kod koji sami dizajnirate i napišete, čime se gradi dublja interakcija.

Događaji u JS-u mogu se podijeliti u 4 velike grupe:

Događaji korisničkog sučelja: aktiviraju se kada korisnik stupi u interakciju s korisničkim sučeljem preglednika (gumbi oko web-stranice koji su dio sučelja preglednika). Ti događaji također mogu uključivati ​​one radnje koje stranica izvodi neovisno o korisniku. Ti događaji uključuju promjenu veličine prozora, pomicanje stranice te učitavanje i istovar sadržaja.

Događaji tipkovnice, miša i zaslona osjetljivog na dodir: aktiviraju se kada korisnik pritisne ili otpusti tipke na tipkovnici, upravlja mišem, dodirnom podlogom ili koristi zaslon osjetljiv na dodir.

Fokus i hendikep događaji. Uglavnom povezano s obrascima: polje za unos "prima fokus" kada je korisnik spreman za interakciju s njim. Drugi događaji prate slanje obrazaca, promjene vrijednosti polja obrasca itd.

JavaScript. Brzi početak

Događaji mutacije i promatrači. Mutirajući elementi se prate kada se DOM struktura promijeni: na primjer, kada se elementi na stranici umetnu ili uklone skriptom.

Vezivanje rukovatelja događaja

Prilagođeni kôd koji će se aktivirati samo za određeni DOM element stvara rukovatelj događaja. U JS-u postoje tri načina za kreiranje rukovatelja događaja:

1. Standardni HTML obrađivač događaja putem atributa

Najstarija metoda povezivanja događaja, jedna od najčešće korištenih do sada. Metoda koristi posebne atribute u označavanju. Na primjer:

< input type = "text" id = "username" onblur = "checkName()" >

U gornjem primjeru, nakon što polje dobije fokus i korisnik nastavi ispunjavati sljedeće polje (na primjer, koristeći TAB ili normalan klik), element će pozvati funkciju checkName, koja je napisana u JS-u.
Standardni HTML obrađivači događaja ne preporučuju se za korištenje u modernom razvoju, uglavnom zbog činjenice da je funkcionalnost pomiješana s označavanjem, što otežava rad i otklanjanje pogrešaka koda.

2. Standardni obrađivači događaja u DOM-u

Ova tehnika razdvaja JS i označavanje, ali ima isto ograničenje - samo jedna funkcija može se dodijeliti događajima. HTML ekvivalent rukovatelja događaja u DOM-u bio bi:

var korisničko ime = document.getElementbyId ("korisničko ime"); korisničko ime.onblur = ime provjere;

Korisničko ime. onblur = ime provjere;

JavaScript. Brzi početak

Naučite osnove JavaScripta s praktičnim primjerom izrade web aplikacije

Kao u prethodnom primjeru, funkcija checkName se pokreće nakon što element obrasca izgubi fokus.

3. Slušatelji događaja

Moderna metoda za dodavanje rukovatelja događajima, koja vam omogućuje povezivanje više događaja i funkcija:

var korisničko ime = document.getElementbyId ("korisničko ime"); username.addEventListener ("blur", checkName, false);

var korisničko ime = dokument. getElementbyId ("korisničko ime"); Korisničko ime. addEventListener ("blur", checkName, false);

Booleova vrijednost na kraju pokazuje treba li uhvatiti događaj. Obično se postavlja na false. U jednostavnim skriptama događaj se često piše kao anonimna funkcija:

var korisničko ime = document.getElementbyId ("korisničko ime"); username.addEventListener ("zamućenje", funkcija () (// radnje za pokretanje događaja))

Nisu svi događaji jednaki Važno je razumjeti da se svi događaji ne mogu rješavati na isti način. Događaji pomicanja i promjene veličine se vrlo često aktiviraju, zbog čega morate biti vrlo oprezni s njima kako ne biste usporili izvedbu skripte. Isto vrijedi i za naizgled bezopasne ulazne događaje. Izvedba skripte može se ozbiljno pogoršati ako pokušava stalno reagirati na često pokretani ulazni događaj na klizaču raspona. Ne prate se svi događaji Promatrači mutacija trenutno ne mogu pratiti sve promjene svih elemenata na stranici. Na primjer, ne postoji način da se prati promjena visine elementa (kada se spremnik skupi u responzivnom dizajnu, tekst unutar njega se preuređuje i elementi postaju duži). Još uvijek postoje načini za praćenje promjena, o tome ću govoriti u sljedećem članku. Priložite događaje ispravnim elementima Onclick događaj se odnosi na mnoge elemente, uključujući veze. Postoji opće pravilo - ne preporuča se povezivati ​​JS kod. Klikom na link korisnik bi trebao otići na drugo područje stranice ili na sidro. Ako vam je potreban UI element koji se može koristiti za promjenu nečega na istoj stranici, onda će vam gumb odgovarati. JavaScript možete objesiti na gumb bez ikakvih problema. Nemojte koristiti JavaScript ako to možete učiniti s CSS-om U usporedbi s CSS-om, JavaScript je spor i nepouzdan. U osnovi, CSS bi se trebao koristiti kao alternativa složenom skriptiranju gdje god je to moguće. Međutim, CSS ne radi sve. Dobro radi s: lebdenjem (zamjenjuje dodirne događaje u mnogim slučajevima), a također može zamijeniti događaje klika s: target u nekim slučajevima. CSS animacije se automatski pokreću nakon učitavanja stranice, a postoje posebna CSS stanja koja se mogu pokrenuti za elemente kao što su radio gumbi. Međutim, nešto složenije obično je najbolje prepustiti JavaScriptu.

Tijekom rada sa stranicom korisnik izvodi razne radnje: klika na tipke miša, upisuje tekst na tipkovnici. Svaka takva radnja je događaj preglednika. Može se pratiti i izvršiti određenim redovima programa kada se pojave. JavaScript ima rukovaoce događajima za to. Osim radnji korisnika, postoje i drugi događaji preglednika kao što je učitavanje cijele stranice.

Svaki događaj ima svoje ime. klik je pritisak lijevom tipkom miša, dolje je pritisak tipke, fokus je fokus elementa obrasca,

Rukovanje događajima

Poziva se funkcija koja se izvršava kada se događaj pokrene obrađivač događaja... Svaka vrsta događaja ima svoj rukovatelj. Ime rukovatelja sastoji se od riječi on i naziva događaja. Na primjer, obrađivač događaja klika naziva se onclick. Događaji se ne događaju na stranici općenito, već na određenom elementu. Sukladno tome, rukovatelj nije zasebna funkcija. Rukovalac se postavlja na neki element stranice.

Postoje različiti načini da se elementu dodijeli rukovalac događaja. Rukovatelja možete dodijeliti putem atributa oznake. Kod koji će se izvršiti kada se događaj pokrene upisan je u vrijednost atributa. Kreirajmo stranicu, dodajmo joj gumb i dodijelimo joj rukovatelj događaja klika:

1 2 3 4 5 6 7

JavaScript:

JavaScript:

17 18 19 20 21 22

var inform = funkcija () (upozorenje ("Još jedan gumb");); var mbutton = document.getElementById ("mbuton"); mbutton.onclick = obavijestiti;

Kada je funkcija dodijeljena rukovaocu, nakon naziva funkcije nema zagrada. Ako stavite zagrade, onda to neće biti dodjela funkcije, već poziv za izvršenje.

Postoji addEventListener () metoda koja elementu također dodjeljuje rukovalac događaja. Smatra se modernijim. Sada se ne koristi često, ali postoje novi događaji u JavaScriptu koji se mogu rukovati samo ovom metodom.

element.addEventListener (događaj, funkcija)

Opcije:

događaj – događaj koji treba obraditi

funkcija - funkcija koja postaje rukovalac

U parametrima ove metode, naziv događaja je napisan u navodnicima i ne morate pisati riječ prije njega.

HTML kod:

Novi gumb

JavaScript:

24 25 26 27 28 29

var newinform = funkcija () (upozorenje ("Novi gumb pritisnut"); var newbutton = document.getElementById ("newbutton"); newbutton.addEventListener ("klik", newinform);

Metoda removeEventListener () omogućuje vam uklanjanje rukovatelja.

element.removeEventListener (događaj, funkcija)

Koristeći razmatranu metodu, elementu se može dodijeliti više rukovatelja za isti događaj. Zatim morate izbrisati svaki od njih zasebno.

Objekt događaja

Svaki put kada se neki događaj pokrene, generira se objekt događaja. Objekt sadrži informacije o događaju. Različite vrste događaja imaju različite objekte. Ali postoje i svojstva koja ima svaki predmet. Na primjer, svojstvo tipa sadrži tip događaja.

Objekt događaja prosljeđuje se kao parametar funkciji koja je rukovalac. Da biste pristupili objektu, morate stvoriti parametar u funkciji. Ovaj parametar se koristi za upućivanje na objekt. Ako funkcija također zahtijeva druge parametre, tada objekt događaja mora biti prvi parametar. Promijenimo obrađivač za gumb s ID-om jednakim "button". Pristupimo objektu događaja. Umjesto poruke o pritisku na tipku, prikazat ćemo vrstu događaja. Sada će rukovatelj izgledati ovako:

13 14 15 16

button.onclick = funkcija (događaj) (upozorenje (vrsta događaja););

Kliknite na gumb, prikazat će se vrsta pokrenutog događaja.

Svi objekti događaja imaju svojstvo currentTarget. Vraća element koji je pokrenuo događaj. Ovo se može činiti besmislenim. Uostalom, rukovatelj je dodijeljen određenom elementu. Zašto ponovno vraćati ovaj element? Ali s događajima u pregledniku stvari su malo kompliciranije. Kako se to koristi naučit ćete malo kasnije. Prilikom proučavanja konkretnih događaja razmotrit ćemo druga svojstva.

Vrste događaja

U zoru razvoja World Wide Weba, web programeri su se morali nositi s samo malim brojem događaja: "učitavanje", "klik", "prelazak mišem" i drugi. Svi preglednici dobro podržavaju ove prilično stare vrste događaja. Kako se web platforma razvijala, uključeni su snažniji API-ji, a broj događaja se značajno povećao. Ne postoji standard koji definira kompletan skup događaja, a broj podržanih događaja nastavlja brzo rasti. Ovi novi događaji identificirani su u sljedeća dva izvora:

Specifikacija DOM Level 3 Events, koja se nakon dugo godina stagnacije počela aktivno razvijati pod okriljem W3C konzorcija.

Mnogi novi API-ji u HTML5 specifikaciji (i povezanim dodatnim specifikacijama) definiraju nove događaje koji se koriste, na primjer, za upravljanje poviješću, povlačenje i ispuštanje, razmjenu poruka između dokumenata i reprodukciju audio i video zapisa.

Imajte na umu da mnoge od ovih novih vrsta događaja još nisu široko podržane i definirane su standardima koji su još u fazi dizajna. Događaji koje ćete najčešće koristiti u svojim web aplikacijama obično spadaju u kategoriju dugotrajnih i podržanih od strane svih preglednika: to su događaji za rad s mišem, tipkovnicom, HTML obrascima i objektom Window. Razmotrit ćemo ove događaje.

Događaji učitavanja dokumenta

Većina web aplikacija apsolutno treba web preglednik kako bi ih obavijestio kada je dokument završio učitavanje i spreman je za obavljanje operacija na njemu. Ovoj svrsi služi događaj opterećenje u objektu Window. Događaj učitavanja pokreće se tek nakon što se dokument i sve njegove slike u potpunosti učitaju. Međutim, skripte se obično mogu pokrenuti odmah nakon što je dokument raščlanjen, prije nego što se slike učitaju. Možete značajno smanjiti vrijeme pokretanja web aplikacije pokretanjem skripti na događajima koji nisu učitavanje.

Događaj DOMContentLoaded aktivira se čim se dokument učita, analizira ga parser i sve odgođene skripte budu izvršene. U ovom trenutku slike i skripte s async atributom mogu se nastaviti učitavati, ali sam dokument će biti spreman za izvođenje operacija. Ovaj događaj je prvi put predstavljen u Firefoxu i od tada su ga prihvatili svi drugi proizvođači preglednika, uključujući Microsoft, koji je dodao podršku za ovaj događaj u IE9. Unatoč DOM prefiksu u nazivu, ovaj događaj nije dio standarda DOM razine 3 događaja, ali je standardiziran HTML5 specifikacijom.

Kako se dokument učitava, vrijednost svojstva document.readyState se mijenja. Svaka promjena vrijednosti ovog svojstva u IE-u je popraćena događajem readystatechange na objektu Document, tako da se u IE-u ovaj događaj može koristiti za određivanje kada će nastupiti potpuno stanje. HTML5 specifikacija standardizira događaj readystatechange, ali upućuje da se aktivira neposredno prije događaja učitavanja, tako da nije sasvim jasno koja je prednost događaja readystatechange nad opterećenjem.

Primjer u nastavku definira funkciju whenReady (). Funkcija koja se prosljeđuje u whenReady () se poziva (kao metoda objekta Document) čim je dokument spreman za izvođenje operacija. whenReady () osluškuje događaje DOMContentLoaded i readystatechange i koristi događaj učitavanja samo kao zamjenu u slučaju da se koristi u starijim preglednicima koji ne podržavaju prva dva događaja. Funkcija whenReady () koristit će se u nekim od sljedećih scenarija:

/ * Proslijedite svoju funkciju na whenReady () i ona će je pozvati (kao metodu objekta dokumenta) čim se dokument analizira i spreman za izvođenje operacija. Registrirane funkcije se pozivaju na prvi događaj DOMContentLoaded, readystatechange ili učitavanje. Nakon što je dokument spreman i sve funkcije su pozvane, whenReady () će odmah pozvati sve funkcije koje su mu proslijeđene. * / var whenReady = (function () (// Ovu funkciju vraća funkcija whenReady () var funcs =; // Funkcije koje se pozivaju na događaj var ready = false; // Bit će istinito kada se pozove funkcija rukovatelja // Obrađivač događaja , koji se poziva čim je dokument // spreman za izvođenje operacija, rukovatelj funkcije (e) (// Ako je rukovatelj već pozvan, samo vrati kontrolu ako se (spreman) vrati; // Ako je ovaj događaj je readystatechange i stanje je // izvrsno od "complete", što znači da dokument još nije spreman ako (e.type === "readystatechange" && document.readyState! == "complete") vrati; // Pozovi sve registrirane funkcije. // Imajte na umu da se svaka vrijednost // svojstva funcs.length provjerava jednom, u slučaju da jedna od pozvanih funkcija // registrira dodatne funkcije.for (var i = 0; i

Događaji miša

Postoji dosta događaja povezanih s mišem. Svi su navedeni u donjoj tablici. Svi događaji s mišem osim mouseenter i mouseleave pojavljuju se u mjehurićima. Događaji klika na veze i gumbi za slanje obrasca imaju zadane radnje koje se mogu poništiti. Teoretski je moguće otkazati događaj kontekstnog izbornika i spriječiti pojavljivanje kontekstnog izbornika, ali neki preglednici imaju postavke koje ovaj događaj čine neponištivim.

JavaScript događaji miša

Vrsta	Opis
klik	Događaj visoke razine koji se javlja kada korisnik pritisne i otpusti tipku miša ili na drugi način aktivira element.
kontekstualni izbornik	Događaj koji se može otkazati koji se pokreće prije nego što se prikaže kontekstni izbornik. Trenutni preglednici prikazuju kontekstni izbornik desnim klikom, tako da se ovaj događaj može koristiti i kao događaj klika.
dblclick	Pokreće se kada korisnik dvaput klikne.
mousedown	Pokreće se kada korisnik pritisne tipku miša.
mouseup	Pokreće se kada korisnik otpusti tipku miša.
mousemove	Podiže se kada korisnik pomakne pokazivač miša.
prelazak mišem	Podiže se kada se pokazivač miša postavi iznad elementa. Svojstvo relatedTarget (ili fromElement u IE) identificira element iz kojeg je pomaknut pokazivač miša.
mouseout	Aktivira se kada pokazivač miša napusti element. Svojstvo relatedTarget (ili toElement u IE) specificira element na koji je pomaknut pokazivač miša.
mouseenter	Slično prelasku mišem, ali se ne pojavljuje. Prvi put se pojavio u IE-u i bio je standardiziran u HTML5, ali još nije podržan u svim preglednicima.
mišjeg lišća	Kao mouseout, ali se ne pojavljuje. Prvi put se pojavio u IE-u i bio je standardiziran u HTML5, ali još nije podržan u svim preglednicima.

Objekt proslijeđen rukovaocima događaja miša ima svojstva klijentX i klijentY koji definiraju koordinate pokazivača u odnosu na prozor. Da biste ih pretvorili u koordinate dokumenta, morate im dodati pozicije trake za pomicanje prozora.

Svojstva altKey, ctrlKey, metaKey i shiftKey definiraju stanja različitih tipki modifikatora koje su možda bile pritisnute u vrijeme događaja: mogu se koristiti za razlikovanje jednostavnog klika od klika s pritisnutom tipkom Shift, na primjer.

Vlasništvo dugme određuje koja je tipka miša bila pritisnuta u vrijeme događaja. Međutim, različiti preglednici pišu različite vrijednosti ovom svojstvu, pa ga je teško koristiti na prijenosni način.

Neki preglednici samo pokreću događaj klika kada se klikne lijevi gumb. Stoga, ako trebate upravljati klikovima na druge gumbe, trebali biste koristiti događaje mousedown i mouseup. Događaj kontekstnog izbornika obično signalizira da je izveden desni klik, ali kao što je gore navedeno, nije uvijek moguće spriječiti pojavljivanje kontekstnog izbornika u rukovateljima za ovaj događaj.

Primjer u nastavku pokazuje funkciju povlačenja () koja, kada se pozove iz rukovatelja događaja mousedown, omogućuje korisniku da mišem povuče apsolutno pozicionirane elemente dokumenta. Funkcija drag () radi s oba modela događaja, DOM i IE.

Funkcija drag () uzima dva argumenta. Prvi je predmet koji se povlači. To može biti element koji je pokrenuo događaj mousedown i element koji ga sadrži (na primjer, možete dopustiti korisniku da zgrabi element koji izgleda kao naslov prozora i povuče element koji sadrži element koji izgleda kao prozor). Međutim, u svakom slučaju, to mora biti element dokumenta apsolutno pozicioniran pomoću CSS atributa položaja. Drugi argument je objekt događaja primljen s događajem mousedown:

/ * povucite () - povucite i ispustite apsolutno pozicionirane HTML elemente. Ova funkcija se mora pozvati iz rukovatelja događaja onmousedown. Sljedeći događaji mousemove će uzrokovati pomicanje navedenog elementa. Događaj mouseup dovršit će potez. Ova implementacija radi u standardnim i IE modelima događaja. Koristi funkciju getScrollOffsets (). Argumenti elementToDrag: element koji je primio ili sadrži događaj mousedown. Ovaj element mora biti apsolutno pozicioniran. Vrijednosti njegovih svojstava style.left i style.top promijenit će se kada korisnik pomakne pokazivač miša. događaj: Objekt Event koji je primio rukovatelj događaja mousedown. * / funkcija povucite (elementToDrag, događaj) (// Pretvorite početne koordinate miša u koordinate dokumenta var scroll = getScrollOffsets (); // Pomoćna funkcija deklarirana ispod var startX = event.clientX + scroll.x; var startY = event. clientY + scroll.y; // Početne koordinate (u odnosu na početak dokumenta) elementa koji će // biti premješten. Budući da je elementToDrag apsolutno pozicioniran, // pretpostavlja se da se njegovo svojstvo offsetParent odnosi na dokument body var origX = elementToDrag.offsetLeft; var origY = elementToDrag.offsetTop; // Pronađite udaljenost između točke događaja mousedown i gornjeg lijevog kuta elementa. // Ova udaljenost će se uzeti u obzir kada se pomakne pokazivač miša. var deltaX = startX - origX; var deltaY = startY - origY; // Registrirajte rukovaoce događaja mousemove i mouseup // koji slijede događaj mousedown.if (document.addEventListener) (// Standardni model događaja // Registrirajte se presretanje rukovatelja u dokumentu document.addEventListener ("mousemove", moveHandler, true); document.addEventListener ("mouseup", upHandler, istina); ) else if (document.attachEvent) (// IE model događaja za IE5-8 // U IE modelu događaja, događaji se presreću pozivanjem // setCapture () metode elementa. elementToDrag.setCapture (); elementToDrag. attachEvent ("onmousemove", moveHandler); elementToDrag.attachEvent ("onmouseup", upHandler); // Protumačiti gubitak hvatanja događaja miša kao događaj mouseup elementToDrag.attachEvent ("onlosecapture", upHandler);) // Ovaj događaj je obrađen i ne bi se trebao prosljeđivati ​​drugim rukovaocima if (događaj .stopPropagation) event.stopPropagation (); // Standardni model else event.cancelBubble = true; // IE // Spriječi izvođenje zadanih radnji. if (event.preventDefault) event.preventDefault (); // Standardni model else event.returnValue = false; // IE / * Ovaj rukovatelj hvata događaje mousemove koji se događaju dok se element povlači. On je odgovoran za pomicanje elementa. * / funkcija moveHandler (e) (if (! e) e = window.event; // IE model događaja // Premjestite element na položaj miša na temelju // položaja trake za pomicanje i pomaka u odnosu na početno pomicanje click.var = getScrollOffsets (); elementToDrag.style.left = (e.clientX + scroll.x - deltaX) + "px"; elementToDrag.style.top = (e.clientY + scroll.y - deltaY) + "px"; / / I prekinuti širenje događaja dalje if (e.stopPropagation) e.stopPropagation (); // Standardni model else e.cancelBubble = true; // IE) / * Ovaj rukovatelj presreće posljednji događaj pokretanja miša koji dovršava operaciju povlačenja. * / funkcija upHandler (e) (if (! e) e = window.event; // IE model događaja // Uklanjanje rukovatelja presretnutim događajima. if (document.removeEventListener) (// DOM model događaja document.removeEventListener ("mouseup" , upHandler, true); document.removeEventListener ("mousemove", moveHandler, true);) else if (document.detachEvent) (// IE 5+ model događaja elementToDrag.detachEvent ("onlosecapture", upHandler); elementToDrag.detachEvent ( "onmouseup", upHandler); elementToDrag.detachEvent ("onmousemove", moveHandler); elementToDrag.releaseCapture ();) // I prekinuti daljnje širenje događaja. if (e.stopPropagation) e.stopPropagation (); // Standard model else e.cancelBubble = true; // IE)) // Vraća trenutne pozicije trake za pomicanje kao svojstva x i y objektne funkcije getScrollOffsets (w) (// Koristi navedeni prozor ili trenutni, // ako funkcija se poziva bez argumenta w = w | | prozor; // Sljedeća metoda radi u svim preglednicima osim IE verzije 8 i ispod if (w.pageXOffset! = null) return (x: w.pageXOffset, y: w.pageYOffset); // Za IE (i druge preglednike) u standardnom načinu rada var d = w.document; if (document.compatMode == "CSSICompat") vrati (x: d.documentElement.scrollLeft, y: d.documentElement.scrollTop); // Za preglednike u načinu kompatibilnosti return (x: d.body.scrollLeft, y: d.body.scrollTop); )

Sljedeći isječak pokazuje kako koristiti funkciju drag () u HTML datoteci:

Ovdje je najvažniji atribut onmousedown na ugniježđenom elementu