Dokumentirajte dogodke javascript. JavaScript - Vrste dogodkov. Dogodke povežite s pravimi elementi

Tema dogodkov je zelo pomembna in zelo zanimiva. Zahvaljujoč njej lahko naredite veliko zanimivih stvari, nad katerimi bo uporabnik navdušen. JavaScript dogodek je specifično dejanje, ki ga sproži bodisi uporabnik bodisi brskalnik. Dogodek je lahko na primer klik z miško na gumb, premikanje miške, fokus na element, sprememba vrednosti v nekem besedilnem polju, sprememba velikosti okna brskalnika itd.

Pripravila sem tabelo z vsemi dogodki (ki jih vsaj poznam). JavaScript... V njem boste najprej našli ime dogodka, elemente, ki lahko ustvarijo ta dogodek in opis samega dogodka. JavaScript dogodki.

Dogodek	Predmet	Vzrok za nastanek
Prekini	Slika	Prekinitev nalaganja slike
Zamegljenost		Izguba fokusa elementa
Spremeni se	FileUpload, Select, Text, Textarea	Sprememba vrednosti
Kliknite	Območje, Gumb, Potrditveno polje, Dokument, Povezava, Radio, Ponastavi, Pošlji	Kliknite z miško na element
DblClick	Območje, dokument, povezava	Dvokliknite na element
Povleci spusti	okno	Premakni se v okno brskalnika
Fokus	Gumb, Potrditveno polje, Nalaganje datoteke, Okvir, Sloj, Geslo, Radio, Ponastavitev, Izberi, Pošlji, Besedilo, Textarea, Okno	Nastavitev fokusa na element
KeyDown		Pritisk tipke na tipkovnici
Pritisnite tipko	Dokument, Slika, Povezava, Textarea	Držanje tipke na tipkovnici
KeyUp	Dokument, Slika, Povezava, Textarea	Sprostitev tipke na tipkovnici
Naloži	Dokument, slika, plast, okno
MouseDown	Gumb, dokument, povezava	Gumb miške je pritisnjen
MouseMove	okno	Miška v gibanju
MouseOut	Območje, plast, povezava	Miška je izven meja elementa
Prek miške	Območje, plast, povezava	Miška je nad elementom
MouseUp	Gumb, dokument, povezava	Gumb miške je sproščen
Premakni se	Okvir	Premikanje predmeta
Ponastaviti	Oblika	Ponastavitev obrazca
Spremeni velikost	Okvir, okno	Spreminjanje velikosti
Izberite	Besedilo, Textarea	Izbira besedila
Pošlji	Oblika	Prenos podatkov
Raztovoriti	okno	Razlaganje trenutne strani

Zdaj pa ugotovimo, kako uporabite dogodke v JavaScriptu... Obstajajo tako imenovani obdelovalci dogodkov. Upravljavci dogodkov samo določite, kaj se bo zgodilo, ko se zgodi določen dogodek. Obdelovalci dogodkov JavaScript ima naslednjo splošno obliko:

OnNameEvents

To pomeni, da najprej pride predpona " na«, kaj je torej naslednje ime dogodka, na primer takšna obdelovalci dogodkov: onFocus, onClick, onSubmit itd. Mislim, da tukaj ni bilo vprašanj. In zdaj glavno vprašanje: " Kako uporabljam dogodke v JavaScriptu?". Področje njihove uporabe je ogromno, zdaj pa bomo z vami obravnavali eno težavo. Na strani so tri povezave. Vsaka od povezav je odgovorna za drugačno barvo ozadja (recimo bela, rumena in zelena) . Na začetku je ozadje belo. Ko premaknete miško nad določeno povezavo, se barva ozadja spremeni. Ko premaknete miško, se barva ozadja vrne na privzeto. Ko z miško kliknete povezavo, se barva ozadja ohrani kot privzeto.

Bela
Rumena
Zelena

Opravimo se s tem scenarijem oziroma s celoto HTML stran s podporo JavaScript in CSS(z drugimi besedami, to je primer DHTML). Na prvem mestu so običajni HTML oznake, s katerim se začne kateri koli HTML stran... Nato ustvarimo slog, v katerem zahtevamo, da so vse povezave na tej strani modre, podčrtane in da je kazalec miške na njih v obliki "kazalca". Lahko bi rekli: "Zakaj morate nastaviti slog? Konec koncev bodo povezave vseeno popolnoma enake." Tako je, povezave, ampak povezav kot takih nimamo (navsezadnje ni nobenega atributa href v oznaki), tako da bodo privzeto navadno črno besedilo (čeprav lahko kliknete tudi na besedilo). Zato je slog obvezen. Lahko ga odstranite in vidite, kaj se bo zgodilo. Še bolje, daj href atribut(kakršna koli vrednost, tudi prazna) in pojasnite, zakaj je skript prenehal delovati. Nadalje se že začne JavaScript... Ustvarimo spremenljivko privzeta_barva ki je odgovorna za privzeto barvo. Potem so tu tri funkcije:

Funkcija setTempColor () odgovoren za začasno spremembo barve.

Funkcija setDefaultColor () odgovoren za spreminjanje privzete barve.

Funkcija privzeta barva () nastavi privzeto barvo ozadja.

Nato so v obrazcu povezave z atributi obdelovalci dogodkov... Ko premaknete miško nad povezavo, Dogodek MouseOver, oz. onMouseOver obdelovalec dogodkov pokliče funkcijo setTempColor () in prenese ustrezen parameter. Ko odstranite miško iz elementa, Dogodek MouseOut, nato pa poklical funkcija defaultColor ()., zaradi česar je barva ozadja privzeta. In končno, ko kliknete na povezavo ( onClick obdelovalec) funkcija je poklicana setDefaultColor (), ki nastavi barvo, določeno v parametru, na privzeto barvo ozadja. Kot lahko vidite, je vse precej preprosto.

Bilo je načelo uporabe dogodkov v JavaScriptu, potem pa je vse odvisno samo od vaše domišljije!

Sposobnost JavaScripta za ustvarjanje dinamičnih strani html temelji na treh stebrih. Dva od njih smo že obravnavali v prejšnjih člankih. In tretji so dogodki.

• Upravljanje okna brskalnika - z uporabo predmeta okna.
• Upravljanje predmetov znotraj okna je DOM.
• Izvajanje kode javaScript na dogodkih.

Dogodek- reakcija računalnika na dejanje uporabnika. Na primer, s T. Dogodek javaScript se šteje za pritisk na gumb na tipkovnici, premikanje in kliki miške ter zapiranje okna brskalnika. Vsi dogodki s t. javaScript generirajo dokumenti in objekti brskalnika (brez pojma 'uporabnik'). Na primer, ko kliknete na odstavek, dogodek klika miške ustvari predmet – odstavek.

Da bi lahko zagnali kodo javaScript, ki se odziva na dogodke, morate to kodo povezati z dogodkom, ustvarjenim iz določenega predmeta, t.j. z določenim dogodkom iz določenega predmeta. To dejanje se imenuje - naročnina na dogodek.

Naročnina pomeni, da funkcijo povežemo z določenim dogodkom iz določenega predmeta v objektnem modelu brskalnika. In ko ta objekt ustvari (generira) ta dogodek, se bo ta funkcija samodejno sprožila.

• onclick - klik na gumb miške.
• ondblclick - dvojni klik na gumb miške.
• onmousedown - gumb miške je pritisnjen (dol).
• onmousemove - miška se premakne čez predmet (pride se veliko dogodkov, premikanje miške za 1px = 1 dogodek).
• onmouseout - miška zapusti predmet.
• onmouseover - miška se premakne čez želeni predmet.
• onmouseup - gumb miške se sprosti (dvigne navzgor).
• onkeydown - gumb tipkovnice pritisnjen (dol).
• onkeypress - pritisk na gumb na tipkovnici.
• onkeyup - gumb tipkovnice se sprosti (dvigne navzgor).
• onblur - izguba fokusa vnosa (utripajoči kazalec).
• onfocus - trenutek, ko ta element prejme vhodno fokus.
• onchange - ustvari kontrolnik po izgubi fokusa, če se je besedilo spremenilo (na primer v polju z besedilom). Izjema je element seznama 'izberi', pri katerem se ta dogodek ustvari takoj in ne po izgubi fokusa.
• onload - ustvari se, ko se stran nalaga v oknu. Običajno se uporablja, ko morate zagnati kodo javaScript, potem ko se stran v celoti naloži.
• onunload - pojavi se, preden se dokument razloži iz okna (tj. ko zapremo ta dokument ali preklopimo na drug dokument).
• onreset - obrazec je bil ponastavljen.
• onsubmit - podatkovni obrazec je bil oddan.

Naročnina na dogodke

• Naročnina prek javaScript. Ta metoda se uporablja v večini primerov. Najprej moramo poiskati objekt elementa, za katerega se želimo naročiti na dogodek, na primer z metodo getElementById (določite id zahtevanega elementa).

funkcija myFunc () ( // ustvaril preprosto funkcijo opozorilo ("zdravo"); ) funkcija pageInit () (var p = document. getElementById ("1"); p. onclick = myFunc;) // klical funkcijo za sprožitev dogodka okno. onload = pageInit; // dogodek se bo sprožil, ko se stran naloži < p id= 1 >1. odstavek // nastavimo id za odstavek

• Naročnina preko html kode. Pomanjkljivost te metode je, da zamaši html kodo s kodo javaScript; poleg tega obstaja več omejitev, v zapletenih primerih pa je neprimerna za uporabo.

< script type= "text/javascript" >funkcija myFunc () ( // ustvaril preprosto funkcijo opozorilo ("zdravo"); ) < p onclick= "myFunc()" >2. odstavek // pokliče funkcijo

Model ravnanja z dogodki

Ko pride do dogodka za kateri koli element, bi se morali podobni dogodki zgoditi za vse njegove nadrejene elemente do samega vrha strani (do 'telo', saj je to glavno področje dokumenta). Zato se bo vsak dogodek, ki se zgodi na strani, sprožil na telesu.

Potem se postavlja vprašanje, v kakšnem vrstnem redu se bodo zgodili takšni dogodki? V sodobnih brskalnikih se model obdelave dogodkov imenuje model mehurčkov. Njegovo bistvo: najprej se zgodi dogodek za element, ki je bil kliknjen, nato za njegov nadrejeni element in tako naprej do samega vrha - do "telesa".

Element -> element 2 -> dokument -> okno

Parametri dogodka (predmet dogodka)

Obstaja takšen predmet dogodek ki ima številne lastnosti. Z branjem teh lastnosti lahko dobite informacije o dogodkih. Če želite dobiti informacije, morate najprej dobiti sam predmet.

Glavni lastnosti tega predmeta:

• x, y - koordinate miške v času dogodka.
• clientX, clientY sta enaka.
• offsetX, offsetY - enako, vendar je to odmik miške glede na nadrejeni element.
• screenX, screenY - koordinate zaslona.
• gumb - kateri gumb miške je bil pritisnjen (0 - ni pritisnjen, 1 - pritisnjen levi gumb, 2 - pritisnjen desni gumb, 4 - pritisnjen srednji gumb).
• keyCode Številčna koda pritisnjene tipke na tipkovnici.
• srcElement - element, ki je sprožil dogodek.
• fromElement - element, s katerega se je miška premaknila.
• toElement - indikacija predmeta, ki ga je miška povozila.
• cancelBubble - nestandarden način, če mu date vrednost true, bo "pojavni mehurček" preklican; ali pa spremenite kodo tipke, ki jo je uporabnik pritisnil.

Od avtorja: Ko je spletna stran v celoti naložena in pripravljena, se v JavaScriptu sproži cela kaskada dogodkov, ki postanejo še večji, ko začne uporabnik tako ali drugače komunicirati s stranjo. Dogodki vključujejo nalaganje strani, pomikanje navzdol, klik na gumb ali celo izpolnjevanje obrazca. Če želite sprožiti dogodke v JavaScriptu, potrebujete posebno kodo, ki jo oblikujete in napišete sami, s čimer gradite globljo interakcijo.

Dogodke v JS lahko razdelimo v 4 velike skupine:

Dogodki uporabniškega vmesnika: sprožijo se, ko uporabnik komunicira z uporabniškim vmesnikom brskalnika (gumbi okoli spletne strani, ki so del vmesnika brskalnika). Ti dogodki lahko vključujejo tudi tista dejanja, ki jih stran izvede neodvisno od uporabnika. Ti dogodki vključujejo spreminjanje velikosti okna, pomikanje po strani ter nalaganje in razlaganje vsebine.

Dogodki tipkovnice, miške in zaslona na dotik: sproži se, ko uporabnik pritisne ali spusti gumbe na tipkovnici, nadzoruje miško, sledilno ploščico ali uporablja zaslon na dotik.

Fokus in hendikep dogodki. Večinoma povezano z obrazci: vnosno polje "prejme fokus", ko je uporabnik pripravljen na interakcijo z njim. Drugi dogodki spremljajo oddaje obrazcev, spremembe vrednosti polj obrazca itd.

JavaScript. Hiter začetek

Dogodki mutacij in opazovalci. Mutirajočim elementom se sledi, ko se struktura DOM spremeni: na primer, ko se elementi na strani vstavijo ali odstranijo s skriptom.

Vezava upravljalnika dogodkov

Koda po meri, ki se bo sprožila samo za določen element DOM, ustvari upravljalnik dogodkov. V JS lahko ustvarite upravljalnik dogodkov na tri načine:

1. Standardni obdelovalec dogodkov HTML prek atributov

Najstarejši način vezave dogodkov, eden najbolj uporabljenih doslej. Metoda uporablja posebne atribute v označevanju. Na primer:

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

V zgornjem primeru, ko polje prejme fokus in uporabnik nadaljuje z izpolnjevanjem naslednjega polja (na primer z uporabo TAB ali običajnega klika), bo element poklical funkcijo checkName, ki je napisana v JS.
Standardni obdelovalci dogodkov HTML niso priporočljivi za uporabo v sodobnem razvoju, predvsem zaradi dejstva, da je funkcionalnost pomešana z označevanjem, kar otežuje delo in odpravljanje napak kode.

2. Standardni obdelovalci dogodkov v DOM

Ta tehnika ločuje JS in označevanje, vendar ima isto omejitev – dogodkom je mogoče dodeliti samo eno funkcijo. Ekvivalent HTML obdelovalnika dogodkov v DOM bi bil:

var uporabniško ime = document.getElementbyId ("uporabniško ime"); username.onblur = checkName;

uporabniško ime. onblur = ime preverjanja;

JavaScript. Hiter začetek

Naučite se osnov JavaScripta s praktičnim primerom izdelave spletne aplikacije

Tako kot v prejšnjem primeru se funkcija checkName zažene, ko element obrazca izgubi fokus.

3. Poslušalci dogodkov

Sodobna metoda za dodajanje upravljalnika dogodkov, ki vam omogoča veriženje več dogodkov in funkcij:

var uporabniško ime = document.getElementbyId ("uporabniško ime"); username.addEventListener ("zamegljenost", checkName, false);

var uporabniško ime = dokument. getElementbyId ("uporabniško ime"); uporabniško ime. addEventListener ("zamegljenost", checkName, false);

Logična vrednost na koncu označuje, ali je treba dogodek zajeti. Običajno nastavljeno na false. V preprostih skriptih je dogodek pogosto zapisan kot anonimna funkcija:

var uporabniško ime = document.getElementbyId ("uporabniško ime"); username.addEventListener ("zamegljenost", funkcija () (// dejanja za sprožitev dogodka))

Vsi dogodki niso enaki Pomembno je razumeti, da vseh dogodkov ni mogoče obravnavati na enak način. Dogodka pomikanja in spreminjanja velikosti se sprožita zelo pogosto, zato morate biti z njimi zelo previdni, da ne upočasnite delovanja skripta. Enako velja za na videz neškodljive vhodne dogodke. Zmogljivost skripta se lahko močno poslabša, če se poskuša nenehno odzivati ​​na pogosto sprožen vhodni dogodek na drsniku obsega. Vsi dogodki se ne spremljajo Opazovalci mutacij trenutno ne morejo slediti vsem spremembam vseh elementov na strani. Na primer, ni mogoče slediti spremembi višine elementa (ko se vsebnik v odzivnem oblikovanju skrči, se besedilo v njem prerazporedi in elementi postanejo daljši). Še vedno obstajajo načini za sledenje spremembam, o tem bom govoril v naslednjem članku. Dogodke povežite s pravimi elementi Dogodek onclick velja za številne elemente, vključno s povezavami. Obstaja splošno pravilo - povezavam ni priporočljivo dodajati kode JS. S klikom na povezavo naj uporabnik odide na drugo področje spletnega mesta ali na sidro. Če potrebujete element uporabniškega vmesnika, s katerim lahko nekaj spremenite na isti strani, potem vam bo gumb ustrezal. JavaScript lahko brez težav obesite na gumb. Ne uporabljajte JavaScripta, če lahko to storite s CSS V primerjavi s CSS je JavaScript počasen in nezanesljiv. V bistvu je treba CSS uporabljati kot alternativo zapletenemu skriptnemu ustvarjanju, kjer je to mogoče. Vendar CSS ne naredi vsega. Dobro opravi z: lebdenjem (v mnogih primerih nadomesti dogodke dotika) in lahko v nekaterih primerih zamenja tudi dogodke klikov z: target. Animacije CSS se samodejno sprožijo, ko se stran naloži, in obstajajo posebna stanja CSS, ki se lahko sprožijo za elemente, kot so izbirni gumbi. Vendar je nekaj bolj zapletenega običajno najbolje prepustiti JavaScriptu.

Med delom s stranjo uporabnik izvaja različna dejanja: klikne gumbe miške, vnese besedilo na tipkovnico. Vsako takšno dejanje je dogodek brskalnika. Lahko ga izsledijo in izvedejo določene vrstice programa, ko se pojavijo. JavaScript ima za to obdelovalce dogodkov. Poleg uporabniških dejanj obstajajo tudi drugi dogodki brskalnika, kot je nalaganje celotne strani.

Vsak dogodek ima svoje ime. klik je pritisk na levi gumb miške, tipka navzdol je pritisk tipke, fokus je fokus elementa obrazca,

Obravnava dogodkov

Pokliče se funkcija, ki se izvede, ko se dogodek sproži upravljalnik dogodkov... Vsaka vrsta dogodka ima svojega upravljavca. Ime upravljavca je sestavljeno iz besede on in imena dogodka. Na primer, upravljalnik dogodkov klika se imenuje onclick. Dogodki se ne dogajajo na strani na splošno, ampak na določenem elementu. V skladu s tem upravljavec ni ločena funkcija. Obravnavalec je nameščen na nekem elementu strani.

Elementu lahko dodelite upravljalnik dogodkov na različne načine. Upravljalca lahko dodelite prek atributa oznake. Koda, ki se izvede, ko se dogodek sproži, je zapisana v vrednosti atributa. Ustvarimo stran, ji dodamo gumb in ji dodelimo upravljalnik dogodka klika:

1 2 3 4 5 6 7

JavaScript:

JavaScript:

17 18 19 20 21 22

var inform = funkcija () (opozorilo ("Drugi gumb");); var mbutton = document.getElementById ("mbutton"); mbutton.onclick = obvesti;

Ko je funkcija dodeljena upravljavcu, za imenom funkcije ni oklepajev. Če postavite oklepaje, potem to ne bo dodelitev funkcije, ampak klic za izvedbo.

Obstaja metoda addEventListener (), ki elementu dodeli tudi obdelovalca dogodkov. Velja za bolj moderno. Zdaj se ne uporablja prav pogosto, vendar obstajajo novi dogodki v JavaScriptu, ki jih je mogoče obravnavati samo s to metodo.

element.addEventListener (dogodek, funkcija)

Opcije:

dogodek - dogodek, ki ga je treba obdelati

funkcija - funkcija, ki postane upravljavec

V parametrih te metode je ime dogodka zapisano v narekovajih in vam ni treba pisati besede pred njim.

HTML koda:

Nov gumb

JavaScript:

24 25 26 27 28 29

var newinform = funkcija () (opozorilo ("pritisnjen nov gumb");); var newbutton = document.getElementById ("newbutton"); newbutton.addEventListener ("klik", newinform);

Metoda removeEventListener () vam omogoča, da odstranite upravljalnik.

element.removeEventListener (dogodek, funkcija)

Z uporabo obravnavane metode je mogoče elementu dodeliti več upravljavcev za isti dogodek. Nato morate izbrisati vsako od njih posebej.

Objekt dogodka

Vsakič, ko se dogodek sproži, se ustvari objekt dogodka. Objekt vsebuje informacije o dogodku. Različne vrste dogodkov imajo različne predmete. Obstajajo pa tudi lastnosti, ki jih ima vsak predmet. Lastnost tipa na primer vsebuje vrsto dogodka.

Objekt dogodka se posreduje kot parameter funkciji, ki je upravljavec. Za dostop do predmeta morate v funkciji ustvariti parameter. Ta parameter se uporablja za sklicevanje na predmet. Če funkcija zahteva tudi druge parametre, mora biti objekt dogodka prvi parameter. Spremenimo upravljalnik za gumb z ID-jem enakim "button". Dostopimo do objekta dogodka. Namesto sporočila o pritisku na gumb bomo prikazali vrsto dogodka. Zdaj bo upravljalnik izgledal takole:

13 14 15 16

button.onclick = funkcija (dogodek) (opozorilo (vrsta dogodka););

S klikom na gumb se prikaže vrsta sproženega dogodka.

Vsi objekti dogodkov imajo lastnost currentTarget. Vrne element, ki je sprožil dogodek. To se morda zdi nesmiselno. Konec koncev je upravljalec dodeljen določenemu elementu. Zakaj bi ta element znova vračal? Toda z dogodki brskalnika so stvari nekoliko bolj zapletene. Kako se to uporablja, boste izvedeli malo kasneje. Pri preučevanju posebnih dogodkov bomo upoštevali druge lastnosti.

Vrste dogodkov

Na zori razvoja svetovnega spleta so se spletni razvijalci morali ukvarjati le z majhnim številom dogodkov: »nalaganje«, »klik«, »preklop miške« in drugi. Te dokaj stare vrste dogodkov dobro podpirajo vsi brskalniki. Ko se je spletna platforma razvijala, so bili vključeni močnejši API-ji in število dogodkov se je znatno povečalo. Ni standarda, ki bi definiral celoten nabor dogodkov, število podprtih dogodkov pa še naprej hitro raste. Ti novi dogodki so opredeljeni v naslednjih dveh virih:

Specifikacija DOM Level 3 Events, ki se je po dolgih letih stagnacije začela aktivno razvijati pod okriljem konzorcija W3C.

Številni novi API-ji v specifikaciji HTML5 (in z njimi povezane dodatne specifikacije) definirajo nove dogodke, ki se uporabljajo na primer za upravljanje zgodovine, povleci in spusti, izmenjavo sporočil med dokumenti ter predvajanje zvoka in videoposnetkov.

Upoštevajte, da veliko teh novih vrst dogodkov še ni široko podprtih in jih definirajo standardi, ki so še v fazi načrtovanja. Dogodki, ki jih boste najpogosteje uporabljali v svojih spletnih aplikacijah, običajno spadajo v kategorijo dolgotrajnih in jih podpirajo vsi brskalniki: to so dogodki za delo z miško, tipkovnico, obrazci HTML in objektom Window. Te dogodke bomo upoštevali.

Dogodki nalaganja dokumenta

Večina spletnih aplikacij nujno potrebuje spletni brskalnik, da jih obvesti, ko se dokument konča nalaganje in je pripravljen za izvajanje operacij na njem. Temu namenu služi dogodek obremenitev v objektu Window. Dogodek nalaganja se sproži šele, ko so dokument in vse njegove slike v celoti naložene. Vendar pa je skripte običajno mogoče zagnati takoj po razčlenjevanju dokumenta, preden se slike naložijo. Čas zagona spletne aplikacije lahko znatno skrajšate tako, da začnete s skriptnimi dogodki, ki niso nalaganje.

Dogodek DOMContentLoaded sproži se takoj, ko je bil dokument naložen, razčlenjevalnik ga razčleni in vsi odloženi skripti so bili izvedeni. Na tej točki se slike in skripti z atributom async morda še naprej nalagajo, vendar bo sam dokument pripravljen za izvajanje operacij. Ta dogodek je bil prvič predstavljen v Firefoxu in so ga od takrat sprejeli vsi drugi izdelovalci brskalnikov, vključno z Microsoftom, ki je dodal podporo za ta dogodek v IE9. Kljub predponi DOM v imenu ta dogodek ni del standarda dogodkov DOM Level 3, vendar je standardiziran s specifikacijo HTML5.

Ko se dokument naloži, se vrednost lastnosti document.readyState spremeni. Vsako spremembo vrednosti te lastnosti v IE spremlja dogodek readystatechange na objektu Document, zato se lahko v IE ta dogodek uporabi za določitev, kdaj pride do popolnega stanja. Specifikacija HTML5 standardizira dogodek readystatechange, vendar naroči, da ga sproži neposredno pred dogodkom nalaganja, zato ni povsem jasno, kakšna je prednost dogodka readystatechange pred obremenitvijo.

Spodnji primer definira funkcijo whenReady (). Funkcija, ki se posreduje v whenReady () se pokliče (kot metoda objekta Document), takoj ko je dokument pripravljen za izvajanje operacij. whenReady () posluša dogodke DOMContentLoaded in readystatechange in uporablja dogodek nalaganja le kot nadomestno, če se uporablja v starejših brskalnikih, ki ne podpirajo prvih dveh dogodkov. Funkcija whenReady () bo uporabljena v nekaterih od naslednjih scenarijev:

/ * Posredujte svojo funkcijo v whenReady () in poklicala jo bo (kot metodo predmeta dokumenta), takoj ko bo dokument razčlenjen in pripravljen za izvajanje operacij. Registrirane funkcije se kličejo ob prvem dogodku DOMContentLoaded, readystatechange ali nalaganju. Ko je dokument pripravljen in so poklicane vse funkcije, koReady () takoj pokliče vse funkcije, ki so mu bile posredovane. * / var whenReady = (funkcija () (// To funkcijo vrne funkcija whenReady () var funcs =; // Funkcije, ki jih je treba poklicati ob dogodku var ready = false; // Bo resnična, ko se kliče funkcija upravljalnika // Obravnavalec dogodka, ki se pokliče takoj, ko je dokument // pripravljen za izvajanje operacij. Obdelovalec funkcije (e) (// Če je bil upravljalnik že poklican, samo vrni kontrolnik, če (pripravljen) se vrne; // Če je ta dogodek je readystatechange in stanje je // odlično od "dokončano", kar pomeni, da dokument še ni pripravljen, če (e.type === "readystatechange" && document.readyState! == "complete") vrne; // Pokliči vse registrirane funkcije. // Upoštevajte, da je vsaka vrednost // lastnosti funcs.length enkrat preverjena, če ena od klicanih funkcij // registrira dodatne funkcije.for (var i = 0; i

Dogodki z miško

Z miško je povezanih kar nekaj dogodkov. Vsi so navedeni v spodnji tabeli. Vsi dogodki miške, razen mouseenter in mouseleave, se pojavijo. Dogodki klikov na povezavah in gumbi za oddajo obrazca imajo privzeta dejanja, ki jih je mogoče razveljaviti. Teoretično je mogoče preklicati dogodek kontekstnega menija in preprečiti prikaz kontekstnega menija, vendar imajo nekateri brskalniki nastavitve, zaradi katerih tega dogodka ni mogoče preklicati.

Dogodki miške JavaScript

Tip	Opis
kliknite	Dogodek na visoki ravni, ki se pojavi, ko uporabnik pritisne in spusti gumb miške ali kako drugače aktivira element.
kontekstni meni	Preklicni dogodek, ki se sproži, preden se prikaže kontekstni meni. Trenutni brskalniki prikažejo kontekstni meni z desnim klikom, tako da lahko ta dogodek uporabite tudi kot dogodek klika.
dblclick	Sproži se, ko uporabnik dvoklikne.
mousedown	Sproži se, ko uporabnik pritisne gumb miške.
mouseup	Sproži se, ko uporabnik spusti gumb miške.
mousemove	Dvigne se, ko uporabnik premakne kazalec miške.
miško	Dvigne se, ko je kazalec miške postavljen nad element. Lastnost relatedTarget (ali fromElement v IE) identificira element, iz katerega je bil premaknjen kazalec miške.
mouseout	Dvigne se, ko kazalec miške zapusti element. Lastnost relatedTarget (ali toElement v IE) določa element, na katerega je bil premaknjen kazalec miške.
mouseenter	Podobno kot pri premikanju miške, vendar se ne prikaže. Prvič se je pojavil v IE in je bil standardiziran v HTML5, vendar še ni podprt v vseh brskalnikih.
mišji pusti	Kot mouseout, vendar se ne pojavi. Prvič se je pojavil v IE in je bil standardiziran v HTML5, vendar še ni podprt v vseh brskalnikih.

Objekt, posredovan obdelovalcem dogodkov miške, ima lastnosti clientX in strankaY ki določajo koordinate kazalca glede na okno. Če jih želite pretvoriti v koordinate dokumenta, jim morate dodati položaje drsnega traku okna.

Lastnosti altKey, ctrlKey, metaKey in shiftKey definirajo stanja različnih modifikacijskih tipk, ki so bile morda pritisnjene v času dogodka: z njimi je mogoče na primer razlikovati preprost klik od klika s pritisnjeno tipko Shift.

Lastnina gumb določa, kateri gumb miške je bil v času dogodka pritisnjen. Vendar pa različni brskalniki v to lastnost zapisujejo različne vrednosti, zato jo je težko uporabljati na prenosni način.

Nekateri brskalniki sprožijo dogodek klika le, ko kliknete levi gumb. Če torej želite upravljati klike drugih gumbov, uporabite dogodka mousedown in mouseup. Dogodek kontekstnega menija običajno signalizira, da je bil izveden klik z desno tipko miške, vendar, kot je navedeno zgoraj, ni vedno mogoče preprečiti, da bi se kontekstni meni prikazal v upravljalnikih tega dogodka.

Spodnji primer prikazuje funkcijo povleci (), ki ob klicu iz obdelovalca dogodkov mousedown omogoča uporabniku, da z miško povleče absolutno postavljene elemente dokumenta. Funkcija povleci () deluje z obema modeloma dogodkov, DOM in IE.

Funkcija povleci () sprejme dva argumenta. Prvi je predmet, ki se vleče. To je lahko element, ki je sprožil dogodek mousedown, in element, ki ga vsebuje (uporabniku lahko na primer dovolite, da zgrabi element, ki je videti kot naslov okna, in povleče vsebujoči element, ki je videti kot okno). Vendar pa mora biti v vsakem primeru element dokumenta, ki je absolutno pozicioniran z uporabo atributa položaja CSS. Drugi argument je objekt dogodka, prejet z dogodkom mousedown:

/ * povlecite () - povlecite in spustite absolutno postavljene elemente HTML. To funkcijo je treba poklicati iz obdelovalca dogodkov onmousedown. Naslednji dogodki mousemove bodo povzročili premikanje podanega elementa. Dogodek mouseup bo dokončal premik. Ta izvedba deluje tako v standardnih modelih dogodkov kot v IE. Uporablja funkcijo getScrollOffsets (). Argumenti elementToDrag: element, ki je prejel ali vsebuje dogodek mousedown. Ta element mora biti popolnoma nameščen. Vrednosti njegovih lastnosti style.left in style.top se bodo spremenile, ko bo uporabnik premaknil kazalec miške. dogodek: Objekt Event, ki ga prejme obdelovalec dogodkov mousedown. * / funkcija povleci (elementToDrag, dogodek) (// Pretvori začetne koordinate miške v koordinate dokumenta var scroll = getScrollOffsets (); // Spodaj deklarirana pomožna funkcija var startX = event.clientX + scroll.x; var startY = event. clientY + scroll.y; // Začetne koordinate (glede na začetek dokumenta) elementa, ki bo // premaknjen. Ker je elementToDrag absolutno pozicioniran, // se domneva, da se njegova lastnost offsetParent nanaša na dokument body var origX = elementToDrag.offsetLeft; var origY = elementToDrag.offsetTop; // Poiščite razdaljo med točko dogodka mousedown in zgornjim levim kotom elementa. // Ta razdalja bo upoštevana pri premikanju kazalca miške.var deltaX = startX - origX; var deltaY = startY - origY; // Registrirajte upravljalnike dogodkov mousemove in mouseup // ki sledijo dogodku mousedown.if (document.addEventListener) (// Standardni model dogodka // Registracija prestrezanje obdelovalcev v dokumentu document.addEventListener ("mousemove", moveHandler, true); document.addEventListener ("mouseup", upHandler, true); ) drugače if (document.attachEvent) (// model dogodkov IE za IE5-8 // V modelu dogodkov IE se dogodki prestrežejo s klicem // metode setCapture () elementa. elementToDrag.setCapture (); elementToDrag. attachEvent ("onmousemove", moveHandler); elementToDrag.attachEvent ("onmouseup", upHandler); // Razlaga izgube zajemanja dogodka miške kot dogodka mouseup elementToDrag.attachEvent ("onlosecapture", upHandler);) // Ta dogodek je bil obravnavana in se ne sme posredovati drugim obdelovalcem if (event .stopPropagation) event.stopPropagation (); // Standardni model else event.cancelBubble = true; // IE // Prepreči izvajanje privzetih dejanj. if (event.preventDefault) event.preventDefault (); // Standardni model else event.returnValue = false; // IE / * Ta upravljalnik ujame dogodke mousemove, ki se pojavijo med vlečenjem elementa. Odgovoren je za premikanje elementa. * / funkcija moveHandler (e) (če (! e) e = window.event; // Model dogodka IE // Premaknite element na položaj kazalca miške na podlagi položaja // drsnih trakov in odmikov glede na začetni klik.var scroll = getScrollOffsets ( ); elementToDrag.style.left = (e.clientX + scroll.x - deltaX) + "px"; elementToDrag.style.top = (e.clientY + scroll.y - deltaY) + "px"; // In prekinite nadaljevanje širjenja dogodka.if (e.stopPropagation) e.stopPropagation (); // Standardni model else e.cancelBubble = true; // IE) / * Ta upravljalnik prestreže zadnji dogodek miške, ki dokonča operacijo vlečenja. * / funkcija upHandler (e) (if (! e) e = window.event; // Model dogodka IE // Odstrani obdelovalce prestrezajočih dogodkov. if (document.removeEventListener) (// Model dogodka DOM document.removeEventListener ("mouseup" , upHandler, true); document.removeEventListener ("mousemove", moveHandler, true);) drugače if (document.detachEvent) (// IE 5+ model dogodka elementToDrag.detachEvent ("onlosecapture", upHandler); elementToDrag.detachEvent ( "onmouseup", upHandler); elementToDrag.detachEvent ("onmousemove", moveHandler); elementToDrag.releaseCapture ();) // In prekiniti nadaljnje širjenje dogodka. if (e.stopPropagation) e.stopPropagation (); // Standard model else e.cancelBubble = true; // IE)) // Vrne trenutne položaje drsnega traku kot lastnosti x in y funkcije objekta getScrollOffsets (w) (// Uporabi določeno okno ali trenutno, // če funkcija je poklicana brez argumenta w = w | | okno; // Naslednja metoda deluje v vseh brskalnikih razen IE različice 8 in spodaj if (w.pageXOffset! = null) vrne (x: w.pageXOffset, y: w.pageYOffset); // Za IE (in druge brskalnike) v standardnem načinu var d = w.document; if (document.compatMode == "CSSICompat") vrne (x: d.documentElement.scrollLeft, y: d.documentElement.scrollTop); // Za brskalnike v načinu združljivosti vrnitev (x: d.body.scrollLeft, y: d.body.scrollTop); )

Naslednji delček prikazuje, kako uporabiti funkcijo povleci () v datoteki HTML:

Najpomembnejši pri tem je atribut onmousedown na ugnezdenem elementu