JavaScript spēja radīt dinamisku html lapas balstās uz trim pīlāriem. Divi no tiem jau ir apspriesti iepriekšējos rakstos. Un trešais ir notikumi.

• Pārlūka logu pārvaldība, izmantojot loga objektu.
• Objektu pārvaldība logā ir DOM.
• Izpildiet JavaScript kodu pasākumos.

Notikums ir datora reakcija uz lietotāja darbību. Piemēram, ar t.z. Par javaScript notikumu tiek uzskatīts tastatūras pogas nospiešana, peles pogu kustība un noklikšķināšana, kā arī pārlūkprogrammas loga aizvēršana. Visi pasākumi ar t.z. JavaScript ģenerē dokumentu un pārlūkprogrammas objekti (nav jēdziena “lietotājs”). Piemēram, noklikšķinot uz rindkopas, peles klikšķa notikumu ģenerē objekts - rindkopa.

Lai varētu palaist kādu JavaScript kodu, kas reaģē uz notikumiem, šis kods ir jāsaista ar notikumu, kas ģenerēts no konkrēta objekta, t.i. ar konkrētu notikumu no konkrēta objekta. Šo darbību sauc par notikuma abonēšanu.

Abonēšana nozīmē, ka mēs saistām funkciju ar konkrētu notikumu no konkrēta objekta pārlūkprogrammas objekta modelī. Un, kad šis objekts izveido (ģenerē) šo notikumu, šī funkcija darbosies automātiski.

• onclick — peles pogas noklikšķināšana.
• ondblclick — peles pogas dubultklikšķis.
• onmousedown - peles poga ir nospiesta (pārvietota uz leju).
• onmousemove - pele pārvietojas virs objekta (notiek daudz notikumu, peles kustība 1px = 1 notikums).
• onmouseout - pele atstāj objektu.
• onmouseover - pele pārvietojas virs vēlamā objekta.
• onmouseup – peles poga tiek atlaista (pacelta uz augšu).
• onkeydown – tastatūras poga tiek nospiesta (pārvietota uz leju).
• onkeypress – tastatūras pogas nospiešana.
• onkeyup – tastatūras poga tiek atlaista (pacelta uz augšu).
• onblur – ievades fokusa zudums (mirgojošs kursors).
• onfocus - brīdis, kad šis elements saņem ievades fokusu.
• onchange – ģenerē vadīkla pēc fokusa zaudēšanas, ja teksts ir mainījies (piemēram, teksta laukā). Izņēmums ir “atlasīt” saraksta elements, kurā šis notikums tiek ģenerēts uzreiz, nevis pēc fokusa zaudēšanas.
• onload - tiek ģenerēts, kad logā ir pabeigta lapas ielāde. Parasti tiek izmantots, ja jums ir nepieciešams palaist JavaScript kodu pēc tam, kad lapa ir pilnībā ielādēta.
• onunload – notiek, pirms dokuments tiek izlādēts no loga (tas ir, kad mēs aizveram šo dokumentu vai pārejam uz citu dokumentu).
• onreset – forma ir atiestatīta.
• onsubmit – datu veidlapa ir iesniegta.

Abonējiet pasākumus

• Abonēšana, izmantojot JavaScript. Šo metodi izmanto vairumā gadījumu. Pirmkārt, mums ir jāatrod elementa objekts, no kura mēs vēlamies abonēt, piemēram, izmantojot metodi getElementById (norādiet vajadzīgā elementa id).

function myFunc () ( //izveidoja vienkāršu funkcijas brīdinājumu ("sveiki"); ) function pageInit () ( var p= document. getElementById ("1"); p. onclick= myFunc; ) //izsauca funkciju, lai aktivizētu loga pasākums. onload=pageInit; //notikums tiks aktivizēts, kad lapa tiks ielādēta< p id= 1 >1. rindkopa //iestata rindkopas id

• Abonēt, izmantojot html kods. Šīs metodes trūkums ir tāds, ka html kods ir aizsērējis javaScript kodu; Turklāt ir vairāki ierobežojumi, un sarežģītos gadījumos tas ir neērti lietot.

< script type= "text/javascript" >function myFunc () ( //izveidoja vienkāršu funkcijas brīdinājumu ("sveiki"); )< p onclick= "myFunc()" >2. rindkopa //nosauca funkciju Event Processing Model

Ja elementā notiek notikums, līdzīgiem notikumiem jānotiek visos tā vecākelementos līdz pašai lapas augšai (līdz “pamattekstam”, jo tas ir dokumenta galvenais apgabals). Tāpēc jebkurš notikums, kas notiek lapā, notiek ķermenī.

Tad rodas jautājums, kādā secībā šādi notikumi notiks? Mūsdienu pārlūkprogrammās notikumu apstrādes modeli sauc par “burbuļa modeli”. Tās būtība: vispirms notikums notiek elementā, uz kura tika noklikšķināts, pēc tam tā vecākajā un tā tālāk līdz pašai augšai — līdz “ķermenim”.

Elements --> elements 2 --> document --> logs

Notikuma parametri (notikuma objekts)

Ir notikuma objekts, kuram ir daudz īpašību. Izlasot šos rekvizītus, varat iegūt informāciju par pasākumiem. Lai iegūtu informāciju, vispirms jāiegūst pats objekts.

Šī objekta galvenās īpašības:

• x, y - peles koordinātas brīdī, kad notiek notikums.
• clientX, clientY - tas pats.
• offsetX, offsetY - tas pats, bet tas ir peles nobīde attiecībā pret vecāku elements.
• screenX, screenY — ekrāna koordinātas.
• poga - kura peles poga tika nospiesta (0 - nav nospiesta, 1 - kreisā poga nospiesta, 2 - labā poga nospiesta, 4 - vidējā poga nospiesta).
• keyCode - nospiestā tastatūras taustiņa ciparu kods.
• srcElement — elements, kas ģenerēja notikumu.
• fromElement - elements, no kura pārvietojās pele.
• toElement - norāde uz objektu, kuram pele pārskrēja.
• cancelBubble ir nestandarta veids, ja jūs to piešķirat taisnība, tad uznirstošais burbulis tiks atcelts; vai arī varat aizstāt lietotāja nospiestās atslēgas kodu.

Šajā nodarbībā mēs apskatīsim galvenos notikumu veidus, kurus varat pārtvert, izmantojot JavaScript, lai izpildītu kādu kodu.

Pasākumu kategorijas

Visus JavaScript notikumus var iedalīt šādās kategorijās: peles notikumi, tastatūras notikumi, kadra/objekta notikumi, veidlapas notikumi, vilkšanas notikumi , animācijas notikumi, starpliktuves notikumi, multivides notikumi, pārejas notikumi, servera sūtīti notikumi, pieskāriena notikumi, drukāšanas notikumi (Print Events), dažādi pasākumi (Misc Events).

Uzmanību: visi notikumi JavaScript ir rakstīti ar mazajiem (mazajiem) burtiem.

Peļu notikumi

• peles leju - notikums notiek, kad peles poga tiek nospiesta virs kāda elementa, bet vēl nav atbrīvota.
• mouseup - notikums notiek, kad peles poga virs kāda elementa ir pārgājusi no nospiestā stāvokļa uz atbrīvoto stāvokli.
• klikšķis — notikums notiek, kad lietotājs noklikšķina uz elementa. Klikšķu notikumu secība (kreisajai un vidējai peles pogai) ir pele uz leju -> peles augšup -> klikšķis .
• kontekstizvēlne — notikums notiek, kad lietotājs ar peles labo pogu noklikšķina uz elementa. Ar konteksta izvēlni saistīto notikumu secība (labajai peles pogai) ir pele uz leju -> peles augšup -> kontekstizvēlne .
• dblclick — notikums notiek, kad lietotājs veic dubultklikšķi uz elementa. Ar dblclick saistīto notikumu rašanās secība ir šāda: mousedown -> mouseup -> click -> mousedown -> mouseup -> click -> dblclick .
• peles kursors - notikums notiek, kad peles kursors nonāk apgabalā, kas pieder elementam vai kādam no tā atvasinājumiem.
• mouseout - notikums notiek, kad peles kursors pārvietojas no apgabala, kas pieder elementam vai kādam no tā bērniem.
• mousemove - notikums notiek, kad peles kursors pārvietojas elementam piederošajā apgabalā.
• mouseenter - notikums notiek, kad peles rādītājs nonāk apgabalā, kas pieder elementam. Šo notikumu bieži izmanto kopā ar notikumu mouseleave, kas notiek, kad peles rādītājs atstāj elementam piederošo apgabalu. Mouseenter notikums ir līdzīgs mouseover notikumam un atšķiras tikai ar to, ka peles ievadīšanas notikums neburbuļo (notikuma burbuļošanas jēdzienu iepazīsim nedaudz vēlāk).
• mouseleave - notikums notiek, kad peles rādītājs atstāj elementam piederošo apgabalu. Mouseleave notikums ir līdzīgs mouseave notikumam un atšķiras tikai ar to, ka mouseleave notikums neburbuļo (ar notikumu burbuļu jēdzienu iepazīsim nedaudz vēlāk).

Tastatūras pasākumi

Notikumu rašanās secība ir šāda: taustiņu nospiešana -> taustiņu nospiešana -> taustiņu uzslēgšana .

• keydown — notikums notiek, kad tastatūras taustiņš virs elementa tiek nospiests, bet vēl nav atlaists.
• keyup — notikums notiek, kad nospiests tastatūras taustiņš virs elementa mainās uz atbrīvoto stāvokli.
• taustiņu nospiešana — notikums notiek, kad lietotājs nospiež taustiņu uz tastatūras virs elementa.

Objekta un rāmja notikumi

• pirms izkraušanas — notikums notiek pirms dokumenta izkraušanas. Šis notikums ļauj parādīt papildu ziņojumu apstiprinājuma dialoglodziņā "Vai tiešām vēlaties pamest šo lapu?" Standarta ziņojums, kas tiek parādīts, aizverot dokumentu, var atšķirties atkarībā no dažādas pārlūkprogrammas. Taču jūs nevarat to mainīt vai dzēst, jūs varat izmantot šo metodi tikai, lai pievienotu tai savu ziņojumu, kas tiks parādīts kopā ar noklusējuma ziņojumu.
• kļūda - notikums tiek aktivizēts, kad rodas kļūda, kas rodas, ielādējot ārēju failu (piemēram, dokumentu vai attēlu).
• hashchange — notikums notiek, kad mainās pašreizējā URL enkura daļa (sākas ar simbolu #).
• slodze - notikums notiek, kad objekta ielāde ir pabeigta. Ielādes notikums visbiežāk tiek izmantots ķermeņa elementā, lai izpildītu skriptu tūlīt pēc tīmekļa lapas pilnīgas ielādes.
• izlādēt - notikums notiek, kad lapa tiek izlādēta (piemēram, kad tiek aizvērta pārlūkprogrammas cilne (logs).
• pageshow - notikums notiek, kad lietotājs pāriet uz tīmekļa lapu, t.i. pēc tam, kad lapa kļūst pieejama lietotājam. Lapu rādīšanas notikums ir līdzīgs ielādes notikumam, izņemot to, ka tas tiek aktivizēts katru reizi, kad lapa tiek ielādēta, pat ja tā tiek ielādēta no kešatmiņas. Kad lapa tiek ielādēta pirmo reizi, lapu rādīšanas notikums tiek aktivizēts uzreiz pēc ielādes notikuma.
• pagehide — notikums notiek, kad lietotājs atstāj lapu (pagehide notikums notiek pirms izkraušanas notikuma). Turklāt šis notikums, atšķirībā no izkraušanas notikuma, neaizkavē lapas saglabāšanu kešatmiņā.
• mainīt izmērus — notikums notiek, kad tiek mainīts pārlūkprogrammas loga izmērs.
• ritināšana — notikums notiek, ritinot tā elementa saturu, kuram ir ritjosla.

Veidlapa un kontroles notikumi

• fokuss - notikums notiek, kad elements saņem fokusu. Šis pasākums neparādās.
• izplūdums — notikums notiek, kad objekts zaudē fokusu. Šis pasākums neparādās.
• fokuss - notikums notiek, kad elements saņem fokusu. Fokusēšanas notikums ir līdzīgs fokusa notikumam, taču atšķiras no tā ar to, ka tas burbuļo. Tāpēc to var izmantot, ja nepieciešams noskaidrot, kurš zaudē fokusu: elements vai tā bērns?
• fokusēšana — notikums notiek, kad elements grasās zaudēt fokusu. Fokusēšanas notikums ir līdzīgs aizmiglošanas notikumam, taču atšķiras no tā ar to, ka tajā parādās burbuļi. Tāpēc to var izmantot, ja nepieciešams noskaidrot, kurš zaudē fokusu: elements vai tā bērns?
• maiņa - notikums notiek, kad mainās elementa vērtība, bet pēc tam, kad elements ir zaudējis fokusu. Papildus izmaiņu notikumam JavaScript ir arī līdzīgs ievades notikums, kas atšķiras no izmaiņu notikuma ar to, ka tas notiek uzreiz pēc elementa vērtības izmaiņām. Izmaiņu notikums, atšķirībā no ievades notikuma, darbojas arī ar keygen un atlasītajiem elementiem. Radiopogām un izvēles rūtiņām izmaiņas notiek, kad mainās šo elementu stāvoklis.
• ievade — notikums notiek pēc tam, kad mainās ievades elementa vai teksta apgabala elementa vērtība.
• nederīgs — notikums notiek, kad ievades elementā, kura dati jānosūta kopā ar citiem veidlapas datiem uz serveri, ir nederīgi dati.
• reset — notikums notiek pirms veidlapas notīrīšanas, ko veic ievades elements ar type="reset" .
• meklēt — notikums notiek pēc tam, kad lietotājs nospiež taustiņu Enter vai noklikšķina uz pogas "x" (atcelt) ievades elementā ar type="search" .
• atlasīt — notikums notiek pēc tam, kad elementā esat atlasījis kādu tekstu. Atlasīšanas notikums galvenokārt tiek izmantots ievades elementam ar type="text" vai textarea .
• iesniegt - notikums notiek pirms veidlapas iesniegšanas serverim.

Velciet notikumus

Notikumi, kas saistīti ar velkamo objektu (velkamais mērķis, avota objekts):

• dragstart – notikums notiek, kad lietotājs sāk vilkt elementu;
• drag – notikums notiek, kad lietotājs velk elementu;
• dragend – notikums notiek, kad lietotājs ir pabeidzis elementa vilkšanu, t.i. kad atlaidu peles kursoru.

Notikumi, kas saistīti ar nomešanas mērķi, kas saņem velkamo mērķi:

• dragenter – notikums notiek, kad velkams mērķis ir iekļuvis nolaižamā mērķa apgabalā, kas var pieņemt velkamo mērķi.
• ragleave - notikums notiek, kad velkamais objekts (velkamais mērķis) atstāj tā elementa robežas (nometošais mērķis), kas to var pieņemt.
• dragover - notikums notiek, kad velkams mērķis pārvietojas elementa apgabalā (nometiet mērķi), kas to var pieņemt.
• nomest - notikums notiek, kad lietotājs izlaiž velkamu objektu elementa apgabalā (nometiet mērķi), kas to var pieņemt.

Animācijas pasākumi

Trīs notikumi, kas var notikt CSS animācijas darbības laikā:

• animationstart — notiek, kad ir sākusies CSS animācija.
• animationiteration — rodas, ja CSS animācija tiek izpildīta atkārtoti.
• animationend - notiek, kad CSS animācija beidzās.

Notikumi starpliktuvē

• kopija - notikums notiek, kad lietotājs kopē elementa saturu. Kopēšanas notikums notiek arī tad, kad lietotājs kopē elementu (piemēram, attēlus, kas izveidoti ar img elementu). Kopēšanas notikums galvenokārt tiek izmantots ievades elementiem ar type="text" .
• cut - notikums notiek, kad lietotājs izgriež elementa saturu.
• paste — notikums notiek, kad lietotājs elementā ielīmē kādu saturu.

Drukāt notikumus

• afterprint — notikums notiek, kad sāk drukāt lapu (tas ir, pēc tam, kad dialoglodziņā ir noklikšķināts uz pogas Drukāt) vai ja dialoglodziņš Drukāt ir aizvērts.
• beforeprint - notikums notiek pirms lapas izdrukāšanas, t.i. pirms atverat dialoglodziņu Drukāt.

Pārejas notikumi

• transferend — notikums tiek aktivizēts, kad CSS pāreja ir pabeigta. Piezīme. Ja pāreja tiek noņemta pirms pabeigšanas (piemēram, ja CSS īpašums pārejas īpašums ir noņemts), pārejas beigu notikums netiks aktivizēts.

Servera nosūtītie notikumi

• kļūda — notikums notiek, kad rodas kļūda ar notikuma avotu. Kļūda parasti rodas, ja tiek pārtraukta saziņa. Ja tā notiek, objekts EventSource automātiski mēģinās izveidot savienojumu ar serveri.
• atvērts — notikums notiek, kad ir atvērts savienojums ar notikuma avotu.
• ziņojums - notikums notiek, kad ziņojums tiek saņemts caur notikuma avotu.
  Ziņojuma notikuma objekts atbalsta šādus rekvizītus:
  • dati — satur ziņojumu.
  • origin — tā dokumenta URL, kas aktivizēja notikumu.
  • lastEventId - pēdējās saņemtās ziņas identifikators (id).

Plašsaziņas līdzekļu pasākumi

Audio/video ielādes procesa laikā notikumi notiek šādā secībā: loadstart -> durationchange -> loadedmetadata -> loadeddata -> progress -> canplay -> canplaythrough .

• aborts — notikums notiek, kad tiek pārtraukta audio/video ielāde. Šis notikums notiek, kad tika pārtraukta (atcelta) multivides datu lejupielāde, nevis kļūdas dēļ.
• kļūda — notikums notiek, kad audio/video ielādes laikā rodas kļūda.
• apstājies — notikums notiek, kad pārlūkprogramma mēģina saņemt multivides datus, bet dati nav pieejami.
• - notikums notiek, kad pārlūkprogramma sāk meklēt norādīto audio/video, t.i. kad sākas lejupielādes process.
• Durationchange — notikums notiek, kad mainās audio/video ilgums. Ja tiek ielādēts audio/video, ilgums mainīsies no "NaN" līdz faktiskajam audio/video ilgumam.
• loadedmetadata — notikums, kas tiek aktivizēts, kad ir ielādēti norādītā audio/video metadati. Audio/video metadati sastāv no: ilguma, lieluma (tikai video) un teksta celiņa.
• loadeddata — notikums notiek pēc tam, kad ir ielādēts pirmais datu nesēja kadrs.
• progress — notikums notiek, kad pārlūkprogramma lejupielādē norādīto audio/video.
• canplay — notikums notiek, kad pārlūkprogramma var sākt atskaņot norādīto audio/video (tas ir, kad audio/video straume ir pietiekami buferizēta, lai pārlūkprogramma varētu sākt to atskaņot).
• canplaythrough — notikums notiek brīdī, kad pārlūkprogramma var atskaņot norādīto multividi, neapstājoties buferēšanai.
• beidzās — notikums notiek, kad audio/video atskaņošana ir pabeigta (sasniegusi beigas). Šo notikumu var izmantot, lai parādītu tādus ziņojumus kā “Paldies par uzmanību”, “Paldies, ka skatījāties” utt.
• pauze — notikums notiek, kad audio/video atskaņošanu aptur lietotājs vai pēc koda (programmatiski).
• atskaņošana — notikums notiek, kad sākas audio/video atskaņošana. Tas notiek arī tad, kad audio/video atskaņošana ir pārtraukta un tiek sākta atskaņošana.
• atskaņošana — notikums notiek, kad audio/video tiek atskaņots pēc tam, kad tas ir apturēts vai apturēts buferizācijas dēļ.
• ratechange — notikums notiek, kad mainās audio/video atskaņošanas ātrums.
• meklēšana — notikums notiek, kad lietotājs sāk pārvietot slīdni (pāreju) uz jaunu atskaņotā audio/video laika pozīciju.
• meklēts — notikums notiek, kad lietotājs ir pabeidzis slīdņa pārvietošanu (pāreju) uz jaunu atskaņojamā audio/video pagaidu pozīciju. Meklētais notikums ir pretējs meklējamajam notikumam. Lai iegūtu pašreizējo atskaņošanas pozīciju, izmantojiet audio/video objekta rekvizītu currentTime.
• timeupdate — notikums notiek, kad mainās atskaņotā audio/video laika pozīcija.
  Šis notikums notiek:
  • atskaņojot audio/video straumi.
  • pārvietojot slīdni uz jaunu atskaņotā audio/video laika pozīciju.
  Laika atjaunināšanas notikums bieži tiek izmantots kopā ar audio/video objekta rekvizītu currentTime, kas sekundēs atgriež pašlaik atskaņotā audio/video pašreizējo laika pozīciju.
• skaļuma maiņa – notikums notiek katru reizi, kad mainās atskaņojamās video/audio straumes skaļums.
  Šis notikums notiek, ja:
  • skaļuma palielināšana vai samazināšana;
  • izslēdzot vai ieslēdzot skaņu.
• gaida — notikums notiek, kad video tiek apturēts buferizācijas veikšanai.

Dažādi pasākumi

• pārslēgt — notikums notiek, kad lietotājs atver vai aizver detaļas elementu. Detaļu elements ir paredzēts, lai izveidotu papildu informāciju, ko lietotājs var apskatīt vai paslēpt pēc vajadzības.
• ritenis — notikums notiek, kad peles ritenītis ritina uz priekšu vai atpakaļ pa elementu.

Uzdevumi

Vai notikums "Tastatūras nospiešana (onkeypress)" ir sarežģīts? Un ja tā ir, tad kādu vienkāršu notikumu rezultātā tas rodas?

Piemēram, jums ir 2 p elementi, un lietotājs pārvieto peli no apgabala, kas pieder vienam p elementam, uz apgabalu, kas pieder citam p elementam. Kādi notikumi notiek šajā gadījumā, un kādi elementi tos rada?

Pasākumu tēma ir ļoti svarīga un ļoti interesanta. Pateicoties tam, jūs varat paveikt daudz interesantu lietu, par kurām lietotājs būs priecīgs. JavaScript notikums ir konkrēta darbība, ko aktivizē lietotājs vai pārlūkprogramma. Piemēram, notikums var būt peles klikšķis uz pogas, peles kustība, fokusēšana uz elementu, vērtības maiņa teksta laukā, pārlūkprogrammas loga izmēra maiņa utt.

Esmu sagatavojis tabulu ar visiem notikumiem (no kuriem es zinu vismaz) JavaScript. Tajā jūs atradīsiet, pirmkārt, notikuma nosaukumu, elementus, kas var ģenerēt šo notikumu, un paša JavaScript notikuma aprakstu.

Pasākums	Objekts	Notikuma cēlonis
Aborts	Attēls	Tiek pārtraukta attēla ielāde
Aizmiglot		Pazaudēts elementa fokuss
Mainīt	FileUpload, Select, Text, Textarea	Mainīt vērtību
Klikšķis	Apgabals, poga, izvēles rūtiņa, dokuments, saite, radio, atiestatīt, iesniegt	Ar peles klikšķi noklikšķiniet uz elementa
DblClick	Apgabals, dokuments, saite	Veiciet dubultklikšķi uz elementa
DragDrop	Logs	Pāriet uz pārlūkprogrammas logu
Fokuss	Poga, izvēles rūtiņa, faila augšupielāde, rāmis, slānis, parole, radio, atiestatīšana, atlase, iesniegšana, teksts, teksta apgabals, logs	Fokusa iestatīšana uz elementu
KeyDown		Nospiežot taustiņu uz tastatūras
Nospiediet taustiņu	Dokuments, attēls, saite, teksta apgabals	Turot taustiņu uz tastatūras
KeyUp	Dokuments, attēls, saite, teksta apgabals	Tastatūras taustiņa atlaišana
Ielādēt	Dokuments, attēls, slānis, logs
MouseDown	Poga, dokuments, saite	Nospiesta peles poga
MouseMove	Logs	Pele kustībā
MouseOut	Apgabals, slānis, saite	Pele pārsniedz elementa robežas
MouseOver	Apgabals, slānis, saite	Pele atrodas virs elementa
MouseUp	Poga, dokuments, saite	Peles poga ir atbrīvota
Kustēties	Rāmis	Elementa pārvietošana
Atiestatīt	Veidlapa	Atiestatīt veidlapu
Mainīt izmērus	Rāmis, logs	Izmēru maiņa
Izvēlieties	Teksts, Textarea	Teksta atlase
Iesniegt	Veidlapa	Datu pārsūtīšana
Izkraut	Logs	Notiek pašreizējās lapas izlādēšana

Tagad izdomāsim, kā JavaScript izmantot notikumus. Ir tā sauktie notikumu apstrādātāji. Notikumu apstrādātāji nosaka, kas notiks, kad notiks noteikts notikums. JavaScript notikumu apstrādātājiem ir šāda vispārīga forma:

OneEventName

Tas nozīmē, ka vispirms tiek ievadīts prefikss “on” un pēc tam notikuma nosaukums, piemēram, šādi notikumu apstrādātāji: onFocus, onClick, onSubmit un tā tālāk. Es domāju, ka šeit nav nekādu jautājumu. Un tagad galvenais jautājums: "Kā izmantot notikumus JavaScript?". To piemērošanas joma ir milzīga, un tagad mēs apskatīsim vienu problēmu. Lapā ir trīs saites. Katra no saitēm ir atbildīga par atšķirīgu fona krāsu (piemēram, baltu, dzeltenu un zaļu). Sākumā fons ir balts. Novietojot peles kursoru virs noteiktas saites, fona krāsa mainās. Pārvietojot peli tālāk, fona krāsa atgriežas noklusējuma krāsā. Noklikšķinot uz saites, fona krāsa tiek saglabāta kā noklusējuma krāsa.

a (
krāsa: zila;
teksta noformējums: pasvītrojums;
kursors: rādītājs;
}


var default_color = "balts";

funkcija setTempColor(color) (
document.bgColor = krāsa;
}

funkcija setDefaultColor(color) (
noklusējuma_krāsa = krāsa;
}

funkcija defaultColor() (
document.bgColor = noklusējuma_krāsa;
}



Balts
Dzeltens
Zaļš

Apskatīsim šo skriptu vai drīzāk visu HTML lapu ar JavaScript un CSS atbalstu (citiem vārdiem sakot, šis ir DHTML piemērs). Vispirms ir ierastie HTML tagi, ar kuriem sākas jebkura HTML lapa. Tālāk mēs izveidojam stilu, kurā mēs pieprasām, lai visas saites attiecīgajā lapā būtu zilā krāsā, pasvītrotas un peles rādītājs uz tām būtu "Rādītāja" formā. Jūs varat teikt: "Kāpēc jums ir jāiestata stils? Galu galā saites būs tieši tādas pašas." Tieši tā, saites, bet mums nav tādu saišu (galu galā tagā nav atribūta href), tāpēc pēc noklusējuma tās būs vienkāršs melns teksts (tomēr varat arī noklikšķināt uz teksta). Tāpēc stilam ir jābūt. Varat to noņemt un redzēt, kas notiek. Vēl labāk, pievienojiet atribūtu href (ar jebkuru vērtību, pat tukšu) un paskaidrojiet, kāpēc skripts pārstāja darboties. Pēc tam sākas JavaScript. Mēs izveidojam mainīgo default_color, kas atbild par noklusējuma krāsu. Tālāk seko trīs funkcijas:

Funkcija setTempColor() ir atbildīga par īslaicīgu krāsas maiņu.

Funkcija setDefaultColor() ir atbildīga par noklusējuma krāsas maiņu.

Funkcija defaultColor() iestata noklusējuma fona krāsu.

Pēc tam ir saites ar atribūtiem notikumu apstrādātāju veidā. Novietojot peles kursoru virs saites, notiek MouseOver notikums; attiecīgi notikumu apdarinātājs onMouseOver izsauc funkciju setTempColor() un nodod atbilstošo parametru. Noņemot peli no elementa, tiek parādīts notikums MouseOut un pēc tam tiek izsaukta funkcija defaultColor(), kas iestata fona krāsu uz noklusējuma krāsu. Un visbeidzot, kad pele noklikšķina uz saites (onClick apdarinātājs), tiek izsaukta funkcija setDefaultColor(), kas iestata parametrā norādīto krāsu uz noklusējuma fona krāsu. Kā redzat, viss ir pavisam vienkārši.

Tāds bija notikumu izmantošanas princips JavaScript, un tad viss ir atkarīgs tikai no jūsu iztēles!

Dažas programmas, kas izmanto JavaScript notikums strādāt tieši ar lietotāja ievadi. Šādu mijiedarbību rašanās brīdi un secību nevar iepriekš paredzēt.

Pasākumu rīkotāji

Jūs varat reaģēt uz taustiņa nospiešanu, pastāvīgi lasot tā stāvokli, lai uztvertu taustiņu nospiešanas brīdi, pirms tas tiek atkal atbrīvots.

Šādi datu ievade tika apstrādāta primitīvās mašīnās. Vairāk uzlabotas ir taustiņsitiena noteikšana un ievietošana rindā. Pēc tam programma var periodiski pārbaudīt jaunu notikumu rindu un reaģēt uz to, ko tā tur atrod. Šajā gadījumā programmai ir jāatceras skenēt rindu un darīt to bieži.

Laika posmā no taustiņa nospiešanas līdz brīdim, kad programma konstatē šo notikumu, tā faktiski nereaģē uz pieprasījumiem. Šo pieeju sauc par aptauju (aptauju).

Lielākā daļa programmētāju cenšas no tā izvairīties, ja iespējams.

Labākais veids ir ieviest sistēmu, kas dod kodam iespēju reaģēt uz notikumiem, kad tie notiek. Pārlūkprogrammas to īsteno, nodrošinot iespēju reģistrēt apdarinātāja funkcijas konkrētiem JavaScript notikumiem:

Noklikšķiniet uz šī dokumenta, lai aktivizētu apstrādātāju.

addEventListener("klikšķis", funkcija() ( console.log("Jūs noklikšķinājāt!"); ));

Funkcija addEventListener ir reģistrēta tā, lai tās otrais arguments tiktu izsaukts ikreiz, kad notiek ar pirmo argumentu aprakstītais notikums.

Notikumi un DOM mezgli

Katrs pārlūkprogrammas notikumu apstrādātājs ir reģistrēts ar kontekstu. Kad tiek izsaukta funkcija addEventListener, tā tiek izsaukta kā metode visam logam, jo ​​pārlūkprogrammā globālais diapazons ir līdzvērtīgs loga objekts. Katram DOM elementam ir sava addEventListener metode, kas ļauj klausīties notikumus tieši šajā elementā:

Noklikšķiniet uz manis

Šeit nav apstrādātāja.

poga var = document.querySelector("poga"); button.addEventListener("klikšķis", funkcija() ( console.log("Noklikšķināta uz pogas."); ));

IN šajā piemērā apdarinātājs ir savienots ar pogas mezglu. JavaScript peles notikumi aktivizē apdarinātāju, bet klikšķi pārējā dokumentā ne.

Iestatot mezgla onclick atribūtu, mēs iegūstam tādu pašu rezultātu. Bet mezglam ir tikai viens onclick atribūts, tāpēc katrā mezglā varat reģistrēt tikai vienu apdarinātāju. AddEventListener metode ļauj pievienot neierobežotu skaitu apdarinātāju. Tādā veidā esam apdrošināti pret nejaušu jau reģistrēta procesora nomaiņu.

Metode removeEventListener tiek izsaukta ar argumentiem, kas līdzīgi kā addEventListener . Tas noņem apstrādātāju:

Vienreizēja poga var poga = document.querySelector("poga"); function one() ( console.log("Gatavs."); button.removeEventListener("noklikšķināt", vienreiz); ) button.addEventListener("noklikšķināt", vienreiz);

Lai atceltu apdarinātāja funkciju, mēs piešķiram tai nosaukumu (piemēram, vienreiz ). Tātad mēs to nododam gan addEventListener, gan removeEventListener.

Pasākumu objekti

Lai gan mēs to nepieminējām iepriekš minētajos piemēros, JavaScript notikumu apstrādātāju funkcijai tiek nodots arguments: notikuma objekts. Tas sniedz papildu informāciju par pasākumu. Piemēram, ja mēs vēlamies uzzināt, kurš peles taustiņš tika nospiests, mums jāiegūst kāda notikuma objekta rekvizīta vērtība:

Noklikšķiniet uz manis ar jebkuru peles taustiņu var button = document.querySelector("poga"); Button ); else if (event.which == 3) console.log("Labā poga"); ));

Objektā saglabātā informācija atšķiras atkarībā no notikuma veida. Objekta tipa rekvizīts vienmēr satur virkni, kas identificē notikumu (piemēram, "klikšķis" vai "peles leju").

Izplatīšanās

Notikumu apstrādātāji (piemēram, JavaScript pieskāriena notikumi), kas reģistrēti vecāku mezgliem, saņems arī notikumus, kas notiek pakārtotajos elementos. Ja tika noklikšķināts uz pogas rindkopā, to saņems arī rindkopas notikumu apstrādātāji noklikšķiniet uz notikuma.

Notikums tiek izplatīts no mezgla, kurā tas notika, uz vecāku mezglu un dokumenta sakni. Kad visi konkrētā mezglā reģistrētie apstrādātāji ir veikuši darbības pēc kārtas, visa loga apstrādātāji var reaģēt uz notikumu.

Notikuma apstrādātājs jebkurā laikā var izsaukt notikuma objekta metodi stopPropagation, lai novērstu notikuma tālāku izplatīšanos. Tas var būt noderīgi, ja jums ir poga cita interaktīvā elementā un jūs nevēlaties, lai pogas noklikšķināšana izraisītu darbību, kas norādīta noklikšķināšanai uz ārējiem elementiem.

Nākamajā piemērā mēs reģistrējam "MouseDown" apdarinātājus gan pogai, gan rindkopai. Noklikšķinot ar peles labo pogu (JavaScript peles notikumi), apdarinātājs izsauc metodi stopPropagation, kas neļauj rindkopu apstrādātājam darboties. Noklikšķinot uz pogas ar citu peles taustiņu, tiek palaisti abi apstrādātāji:

Rindkopa un poga tajā.

var para = document.querySelector("p"); poga var = document.querySelector("poga"); para.addEventListener("mousedown", function() ( console.log("Apdarinātājs rindkopai."); )); button.addEventListener("peles nolaišana", funkcija(notikums) ( console.log("Pogas apstrādātājs."); if (event.which == 3) event.stopPropagation(); ));

Lielākajai daļai notikumu objektu ir mērķa rekvizīts, kas norāda uz mezglu, kurā tie notika. Varat izmantot šo rekvizītu, lai nejauši neapstrādātu kādu notikumu, kas izplatās no mezgla.

Varat arī izmantot JavaScript notikuma mērķi, lai paplašinātu noteikta veida notikuma darbības jomu. Piemēram, ja jums ir mezgls, kurā ir garš pogu saraksts, ērtāk ir reģistrēt vienu klikšķu apdarinātāju ārējam mezglam un izmantot mērķa rekvizītu, lai izsekotu, vai poga tika noklikšķināta, nevis reģistrēt apdarinātāja gadījumus visām pogām:

A B C document.body.addEventListener("klikšķis", funkcija(notikums) ( if (event.target.nodeName == "POGA") console.log("Noklikšķināts", event.target.textContent); ));

Noklusējuma darbības

Daudziem notikumiem ir saistītas noklusējuma darbības. Ja noklikšķināsit uz saites, tiksiet novirzīts uz saites mērķa elementu. Ja noklikšķināsit uz lejupvērstās bultiņas, pārlūkprogramma ritinās lapu uz leju. Noklikšķinot ar peles labo pogu, tiks atvērta konteksta izvēlne.

Lielākajai daļai notikumu veidu JavaScript notikumu apstrādātāji tiek izsaukti pirms noklusējuma darbību veikšanas. Ja nevēlaties, lai notiktu noklusējuma darbība, notikuma objektā ir jāizsauc metode preventDefault.

Izmantojiet to, lai ieviestu pielāgotus īsinājumtaustiņus vai kontekstizvēlnes. Vai arī, lai ignorētu uzvedību, ko lietotāji sagaida. Zemāk ir saite, kurai nevar sekot:

MDN var saite = document.querySelector("a"); link.addEventListener("klikšķis", funkcija(notikums) ( console.log("Nē."); event.preventDefault(); ));

Centieties to nedarīt, ja vien jums nav pamatota iemesla to darīt.

Atkarībā no pārlūkprogrammas daži notikumi var netikt pārtverti. IN Google Chrome piemēram, īsinājumtaustiņu (JavaScript notikuma atslēgas kodu), lai aizvērtu pašreizējo cilni (Ctrl-W vai Command-W), nevar apstrādāt, izmantojot JavaScript.

Galvenie notikumi

Kad lietotājs nospiež taustiņu uz tastatūras, pārlūkprogramma aktivizē "taustiņu nolaišanas" notikumu. Kad viņš atlaiž atslēgu, tiek aktivizēts notikums "keyup":

Nospiežot taustiņu V, šī lapa kļūst violeta.

addEventListener("taustiņu nolaišana", funkcija(notikums) ( if (event.keyCode == 86) document.body.style.background = "violets"; )); addEventListener("atslēga", funkcija(notikums) ( if (event.keyCode == 86) document.body.style.background = ""; ));

Šis notikums tiek aktivizēts arī tad, kad lietotājs nospiež un tur taustiņu vai kamēr taustiņš ir nospiests. Piemēram, ja vēlaties palielināt spēles varoņa ātrumu, nospiežot bulttaustiņu, un vēlreiz samazināt, atlaižot taustiņu, tad jums jābūt uzmanīgiem, lai nepalielinātu ātrumu katru reizi, kad tiek nospiests taustiņš.

Iepriekšējā piemērā tika izmantots notikuma objekta atslēgas koda JavaScript rekvizīts. Ar tās palīdzību tiek noteikts, kurš taustiņš tika nospiests vai atlaists. Ne vienmēr ir skaidrs, kā pārvērst atslēgas ciparu kodu faktiskā atslēgā.

Unikoda rakstzīmju kods tiek izmantots burtu un ciparu taustiņu vērtību nolasīšanai. Tas ir saistīts ar burtu (lielo burtu) vai ciparu, kas norādīts uz taustiņa. Metode charCodeAt virknēm ļauj iegūt šo vērtību:

console.log("Violeta".charCodeAt(0)); // → 86 console.log("1".charCodeAt(0)); // → 49

Citām atslēgām ir mazāk paredzami atslēgu kodi, kas saistīti ar tiem. Labākais veids Nepieciešamā koda noteikšana ir eksperimentēšanas jautājums. Reģistrējiet taustiņu nospiešanas notikumu apstrādātāju, kas tver saņemtos taustiņu kodus un nospiež vajadzīgo taustiņu.

Tādi taustiņi kā Shift , Ctrl , Alt ģenerē notikumus kā parastie taustiņi. Taču, izsekojot taustiņu kombinācijas, varat arī noteikt, vai šos taustiņus nospiež tastatūras notikumu un JavaScript peles notikumu rekvizīti: shiftKey , ctrlKey , altKey un metaKey :

Lai turpinātu, nospiediet Ctrl-Space.

addEventListener("taustiņu nolaišana", funkcija(notikums) ( if (event.keyCode == 32 && event.ctrlKey) console.log("Turpinās!"); ));

Notikumi "taustiņu nospiešana" un "taustiņu pievienošana" sniedz informāciju par faktiskajiem taustiņu nospiešanas gadījumiem. Bet ko darīt, ja mums ir nepieciešams pats ievades teksts? Teksta izgūšana no atslēgas kodiem ir neērta. Šim nolūkam ir notikums "taustiņu nospiešana", kas tiek aktivizēts uzreiz pēc "keydown". Tas atkārtojas kopā ar "taustiņu nolaišanu", kamēr taustiņš ir nospiests. Bet tikai tiem taustiņiem, ar kuriem tiek ievadītas rakstzīmes.

Notikuma objekta rekvizīts charCode satur kodu, ko var interpretēt kā unikoda rakstzīmju kodu. Mēs varam izmantot funkciju String.fromCharCode, lai pārvērstu šo kodu vienā rakstzīmju virknē.

Iestatiet ievades fokusu uz šo lapu un ierakstiet kaut ko.

addEventListener("taustiņu nospiešana", funkcija(notikums) ( console.log(String.fromCharCode(event.charCode)); ));

DOM mezgls, kurā notiek notikums, ir atkarīgs no elementa, kuram bija ievades fokuss, kad taustiņš tika nospiests. Parastajiem mezgliem nevar būt ievades fokuss (ja vien tiem nav iestatīts atribūts tabindex), taču tādi elementi kā saites, pogas un veidlapas lauki var būt.

Ja nevienam konkrētam elementam nav ievades fokusa, galveno notikumu un JavaScript pieskāriena notikumu mērķa mezgls ir document.body .

Peles klikšķi

Peles pogas nospiešana arī izraisa notikumu virkni. "Mousedown" un "mouseup" notikumi ir līdzīgi notikumiem "keydown" un "pochup". Tie tiek aktivizēti, nospiežot un atlaižot peles pogu. Šie notikumi notiek DOM mezglos, uz kuriem tika virzīts kursors, kad notikums notika.

Koplietotajam mezglam, kuram ir gan peles nospiešana, gan atlaišana, klikšķa notikums tiek aktivizēts pēc peles noņemšanas notikuma. Piemēram, ja nospiežat peles pogu uz viena vienuma un pēc tam pārvietojat kursoru uz citu vienumu un atlaižat pogu, klikšķa notikums notiks elementā, kurā ir abi šie vienumi.

Ja divi klikšķi notiek tuvu viens otram, tiek aktivizēts arī notikums "dblclick" (dubultklikšķis). Tas parādās pēc otrā klikšķa. Lai iegūtu precīzu informāciju par atrašanās vietu, kur notika peles notikums, jums jāiegūst lapasX un pageY rekvizītu vērtība, kas satur notikuma koordinātas (pikseļos) attiecībā pret dokumenta augšējo kreiso stūri.

Zemāk ir primitīvas zīmēšanas programmas realizācija. Katru reizi, kad dokumentā noklikšķināt ar peli (zem kursora), tiek pievienots punkts:

korpuss ( augstums: 200 pikseļi; fons: bēšs; ) .dot ( augstums: 8 pikseļi; platums: 8 pikseļi; apmales rādiuss: 4 pikseļi; /* noapaļoti stūri */ fons: zils; pozīcija: absolūts; ) addEventListener("klikšķis", funkcija (notikums) ( var dot = document.createElement("div"); dot.className = "punkts"; dot.style.left = (event.pageX - 4) + "px"; dot.style.top = (notikums .pageY — 4) + "px"; document.body.appendChild(punkts); ));

KlientaX un klienta Y rekvizīti ir līdzīgi lapaiX un lapai Y, taču tie attiecas uz dokumenta redzamo daļu. Tos var izmantot, lai salīdzinātu peles koordinātas ar koordinātām, ko atgriež funkcija getBoundingClientRect.

Peles kustība

Katru reizi, kad pele pārvietojas, tiek aktivizēts notikums “mousemove” no JavaScript peles notikumu kopas. To var izmantot, lai izsekotu peles stāvokli. To izmanto, ieviešot iespēju vilkt elementus ar peli.

Nākamajā piemērā programma parāda paneli un iestata notikumu apdarinātājus tā, lai, velkot, panelis kļūst šaurāks vai platāks:

Velciet paneļa malu, lai mainītu tā platumu:

var lastX; // Izseko peles pēdējo X pozīciju var rect = document.querySelector("div"); rect.addEventListener("mousedown", function(event) ( if (event.which == 1) ( lastX = event.pageX; addEventListener("mousemove", pārvietots); event.preventDefault(); // Novērš atlasi ) ) ); function buttonPressed(event) ( if (event.buttons == null) return event.which != 0; else return event.buttons != 0; ) function moved(event) ( if (!buttonPressed(event)) ( removeEventListener( "mousemove", pārvietots); ) else ( var dist = notikums.lapaX — pēdējaisX; var newWidth = Math.max(10, rect.offsetWidth + dist); rect.style.width = newWidth + "px"; lastX = notikums .pageX; ) )

Ņemiet vērā, ka "mousemove" apdarinātājs ir reģistrēts visam logam. Pat ja pele tiek pārvietota no paneļa, mainot izmērus, mēs joprojām atjauninām paneļa platumu un pārtraucam JavaScript pieskārienu notikumus, kad peles taustiņš tiek atlaists.

Mums jāpārtrauc paneļa izmēru maiņa, kad lietotājs atlaiž peles pogu. Diemžēl ne visas pārlūkprogrammas iestata rekvizītu mousemove notikumiem. Ir standarta pogu rekvizīts, kas sniedz līdzīgu informāciju, taču tas arī netiek atbalstīts visās pārlūkprogrammās. Par laimi visas lielākās pārlūkprogrammas atbalsta vienu lietu: vai nu pogas, vai kuras . Funkcija buttonPressed iepriekš minētajā piemērā vispirms mēģina izmantot rekvizītu buttons, un, ja tā nav pieejama, pāriet uz to, kuru .

Kad peles kursors pārvietojas virs mezgla vai atstāj no tā, tiek aktivizēti notikumi "novirzot peles kursoru" vai "peles izņemšanu". Tos var izmantot, lai izveidotu kursora efektus, parādītu kādu parakstu vai mainītu elementa stilu.

Lai izveidotu šādu efektu, nepietiek tikai ar tā rādīšanu, kad notiek peles kursora novietošanas notikums, un beidzas pēc peles novietošanas notikuma. Kad pele pārvietojas no mezgla uz vienu no tā atvasinājumiem, vecākmezglam notiek "peles izslēgšanas" notikums. Lai gan peles rādītājs nav atstājis mezgla izplatības diapazonu.

Lai padarītu situāciju vēl ļaunāku, šie JavaScript notikumi tiek izplatīti tāpat kā citi notikumi. Kad pele atstāj vienu no pakārtotajiem mezgliem, kuram ir reģistrēts apdarinātājs, "peles izslēgšanas" notikums tiks paaugstināts.

Lai novērstu šo problēmu, varat izmantot rekvizītu relatedTarget notikuma objekta rekvizīts. Kad notiek peles novietošanas notikums, tas norāda, virs kura elementa kursors tika virzīts iepriekš. Un “peles izslēgšanas” gadījumā - uz kuru elementu tiek pārvietots rādītājs. Mēs mainīsim peles kursora novietošanas efektu tikai tad, ja saistītais mērķis atrodas ārpus mūsu mērķa mezgla.

Šajā gadījumā mēs mainām uzvedību, jo pele atradās virs mezgla ārpus tā (vai otrādi):

Novietojiet peles kursoru virs šīs rindkopas.

var para = document.querySelector("p"); function isInside(node, target) ( for (; node != null; node = node.parentNode) if (node== target) return true; ) para.addEventListener("mouseover", funkcija(event) ( if ( !isInside (event.relatedTarget, para)) para.style.color = "sarkans"; )); para.addEventListener("mouseout", function(event) ( if (!isInside(event.relatedTarget, para)) para.style.color = ""; ));

Funkcija isInside izseko dotā mezgla vecāku saites vai līdz tas tiek sasniegts augšējā daļa dokuments (ja mezgls ir null ). Vai arī mums nepieciešamais vecākelements netiks atrasts.

Lidmašīnas efektu ir daudz vieglāk izveidot, izmantojot pseido-selektoru CSS:hover, kā parādīts nākamajā piemērā. Bet, ja kursora novietošanas efekts ietver kaut ko sarežģītāku nekā tikai mērķa mezgla stila maiņu, jums ir jāizmanto triks, izmantojot peles kursora novietošanas un peles novietošanas notikumus (JavaScript peles notikumi):

Ritiniet notikumus

Katru reizi, kad elements tiek ritināts, tajā tiek aktivizēts JavaScript ritināšanas notikums. To var izmantot, lai izsekotu, kas atrodas Šis brīdis skatījies lietotājs; lai atspējotu animāciju, kas atrodas ārpus skata loga.

Nākamajā piemērā dokumenta augšējā labajā stūrī tiek parādīta norises josla un atjaunināta tā, lai, ritinot lapu uz leju, tā pa gabalam tiktu aizpildīta ar citu krāsu:

.progress ( apmale: 1 px, vienkrāsains zils; platums: 100 pikseļi; pozīcija: fiksēta; augšpusē: 10 pikseļi; pa labi: 10 pikseļi; ) .progress > div ( augstums: 12 pikseļi; fons: zils; platums: 0%; ) pamatteksts ( augstums: 2000 pikseļi ;)

Ritiniet mani...

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

Iestatot elementa pozīciju vai fiksēto īpašību, mēs iegūstam tādu pašu rezultātu kā iestatot position:absolute . Taču tas arī bloķē elementa ritināšanu kopā ar pārējo dokumentu. Rezultātā progresa indikators tiks statiski fiksēts augšējā stūrī. Tā iekšpusē ir vēl viens elements, kura izmērs mainās atbilstoši pašreizējam progresam.

Iestatot platumu, kā mērvienību mēs izmantojam %, nevis px, lai elementa izmēri mainītos proporcionāli progresa joslas izmēram.

Globālais mainīgais innerHeight satur loga augstumu, kas mums ir jāatņem no dokumenta kopējā pieejamā ritināmā augstuma. Kad esat sasniedzis dokumenta apakšdaļu, logu nevar ritināt uz leju. Ar innerHeight var izmantot arī iekšējo platumu. Dalot pageYOffset (pašreizējā ritināšanas lodziņa pozīcija) ar maksimālo atļauto ritināšanas pozīciju un reizinot ar 100, mēs iegūstam progresa joslas procentuālo daudzumu.

Izsaukšana preventDefault JavaScript ritināšanas notikumā neliedz ritināšanu. Notikumu apstrādātājs tiek izsaukts tikai pēc ritināšanas.

Ievadiet fokusa notikumus

Kad elementam ir ievades fokuss, pārlūkprogramma uz to aktivizē fokusa notikumu. Kad ievades fokuss tiek noņemts, tiek aktivizēts izplūšanas notikums.

Šie divi notikumi neizplatās. Vecāku elementu apstrādātājs netiek informēts, ja pakārtotajam elementam ir ievades fokuss.

Nākamajā piemērā ir parādīts rīka padoms teksta lauks, kurā pašlaik ir ievades fokuss:

Vārds:

Vecums:

var help = document.querySelector("#help"); var lauki = document.querySelectorAll("ievade"); for (var i = 0; i< fields.length; i++) { fields[i].addEventListener("focus", function(event) { var text = event.target.getAttribute("data-help"); help.textContent = text; }); fields[i].addEventListener("blur", function(event) { help.textContent = ""; }); }

Logu objekts saņem "fokusa" un "izplūduma" notikumus, kad lietotājs pārvietojas uz cilni, pārlūkprogrammas logu, kurā tiek rādīts dokuments, vai atstāj to.

Ielādēt notikumu

Kad lapas ielāde ir pabeigta, dokumenta pamattekstam un loga objektiem tiek paaugstināts JavaScript notikums “load”. To izmanto, lai ieplānotu to darbību inicializāciju, kurām ir jāielādē viss dokuments. Neaizmirstiet, ka saturs tiek palaists nekavējoties, kad tiek atrasts šis tags. Dažreiz ir par agru. Piemēram, ja skriptam kaut kas jādara ar dokumenta daļām, kas tiek ielādētas pēc .

un skriptu tagos, kas ielādē ārējos failus, ir arī notikums "ielādēt". Tas norāda, ka ar tiem saistītais fails ir lejupielādēts. Tāpat kā ievades fokusa notikumi, arī slodzes notikumi netiek izplatīti.

Kad mēs aizveram lapu vai pārejam uz citu (piemēram, noklikšķinot uz saites), tiek aktivizēts notikums “pirms izkraušanas”. To izmanto, lai lietotājs pēc dokumenta aizvēršanas nejauši nepazaudētu to, ar ko viņš strādāja.

Lapas izlādes novēršana netiek veikta, izmantojot metodi preventDefault. Tā vietā no apstrādātāja tiek atgriezta virkne. To izmanto dialoglodziņā, kurā lietotājam tiek jautāts, vai viņš vēlas palikt lapā vai atstāt to. Šis mehānisms nodrošina, ka lietotājam būs iespēja pamest lapu pat tad, ja darbojas ļaunprātīgs skripts, kura mērķis ir noturēt apmeklētāju lapā.

Skripta izpildes secība

Skripta izpildi var izraisīt dažādi faktori: taga nolasīšana, notikuma rašanās. Metode requestAnimationFrame nosaka funkcijas izsaukumu pirms nākamās lapas atkārtotas renderēšanas. Tas ir vēl viens veids, kā var palaist skriptus.

JavaScript atlasa notikumus, un visi pārējie var aktivizēties jebkurā laikā, taču divi skripti vienā dokumentā nekad netiks aktivizēti vienlaikus. Ja skripts jau darbojas, notikumu apstrādātājiem un cita skripta ieplānotiem koda fragmentiem būs jāgaida sava kārta. Tas ir iemesls, kāpēc dokuments sasalst, kad skripts darbojas ilgu laiku. Pārlūkprogramma nereaģē uz klikšķiem un citiem notikumiem, jo ​​tā nevar aktivizēt notikumu apdarinātājus, kamēr pašreizējais skripts nav beidzies.

Dažas programmēšanas vides ļauj izveidot vairākus izpildes pavedienus, kas darbojas vienlaikus. Nodrošinot iespēju vienlaikus veikt vairākus uzdevumus, jūs varat palielināt programmas izpildes ātrumu. Bet, ja mums ir vairākas darbības, kas vienlaikus ietekmē tās pašas sistēmas daļas, programmai kļūst grūtāk tās veikt.

Ja jums ir nepieciešams palaist procesus fons Neiesaldējot lapu, pārlūkprogrammas nodrošina mums tā sauktos tīmekļa darbiniekus. Tā ir JavaScript smilškaste, kas darbojas dokumentā kopā ar galveno programmu un var sazināties ar to, tikai nosūtot un saņemot ziņojumus.

Pieņemsim, ka failā ar nosaukumu code/squareworker.js mums ir šāds kods:

addEventListener("ziņojums", funkcija(notikums) ( postMessage(event.data * event.data); ));

Iedomājieties, ka skaitlis, kuru jūs sadalāt kvadrātā, ir ļoti liels, to ir nepieciešams aprēķināt, un jums ir jāveic aprēķins fona pavedienam. Šis kods palaiž tīmekļa darbiniekus, nosūta tam dažus ziņojumus un izdrukā atbildes:

var squareWorker = new Worker("kods/squareworker.js"); squareWorker.addEventListener("ziņa", funkcija(notikums) ( console.log("Darbinieks atbildēja:", notikums.dati); )); squareWorker.postMessage(10); squareWorker.postMessage(24);

Funkcija postMessage nosūta ziņojumu, kas aktivizē ziņojuma notikumu pie saņēmēja. Skripts, kas izveidoja tīmekļa darbiniekus, sūta un saņem ziņojumus, izmantojot objektu Worker. Izmantojot šo objektu, vide mijiedarbojas ar skriptu, kas to izveidoja, nosūtot informāciju un klausoties to globālā formā ar sākotnējo skriptu.

Taimeru iestatīšana

Funkcija setTimeout ir līdzīga requestAnimationFrame. Tas izsauc citu funkciju, kas tiks izsaukta vēlāk. Bet tā vietā, lai izsauktu funkciju nākamajā reizē, kad lapa tiek renderēta, tā gaida noteiktu milisekunžu skaitu. Tajā JavaScript piemērs ja lapas fons pēc divām sekundēm kļūst no zila uz dzeltenu:

document.body.style.background = "zils"; setTimeout(function() ( document.body.style.background = "dzeltens"; ), 2000);

Dažreiz mums ir jāatceļ kāda ieplānota funkcija. Tas tiek darīts, saglabājot setTimeout atgriešanās vērtību un izsaucot to clearTimeout:

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

Funkcija cancelAnimationFrame darbojas tāpat kā clearTimeout . To izsauc requestAnimationFrame atgrieztā vērtība, lai atceltu kadru (ja tas vēl nav izsaukts).

Līdzīga funkciju kopa setInterval un clearInterval tiek izmantota, lai iestatītu taimeri, kuram jāatkārto darbība ik pēc X milisekundēm:

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

Sadalīšana

Dažus notikumu veidus var aktivizēt vairākas reizes īsā laika periodā (piemēram, “mousemove” un JavaScript ritināšanas notikums). Apstrādājot šādus notikumus, jums jāuzmanās, lai tas neaizņemtu pārāk ilgu laiku, pretējā gadījumā apstrādātājam darbības veikšana prasīs tik ilgu laiku, ka mijiedarbība ar dokumentu kļūst lēna un nemierīga.

Ja jums ir jādara kaut kas nestandarta šādā apdarinātājā, varat izmantot setTimeout, lai pārliecinātos, ka tas neaizņem pārāk ilgu laiku. To parasti sauc par notikumu sadalīšanu. Ir vairākas dažādas drupināšanas pieejas.

Pirmajā piemērā mēs vēlamies kaut ko darīt, kamēr lietotājs raksta. Taču mēs nevēlamies to darīt pēc katra taustiņa nospiešanas. Kad lietotājs raksta ātri, jums jāgaida, līdz iestājas pauze. Tā vietā, lai nekavējoties izpildītu darbību notikumu apstrādātājā, mēs iestatām aizkavi. Mēs arī noņemam iepriekšējo kavēšanos (ja tāda ir). Ja notikumi notiek īsos intervālos (mazāk par mūsu iestatīto aizkavi), aizkave no iepriekšējā notikuma tiek atcelta:

Ierakstiet kaut ko šeit... var textarea = document.querySelector("textarea"); var taimauts; textarea.addEventListener("keydown", function() ( clearTimeout(taimauts); taimauts = setTimeout(function() ( console.log("Jūs pārtraucāt rakstīt."); ), 500; ));

Nedefinētas vērtības nodošana vienumam clearTimeout vai tās izsaukšana, ja jau darbojas aizkave, nebūs nekādas ietekmes. Mums vairs nav jāuzmanās, kad to izsaukt, mēs vienkārši darām to katram pasākumam.

Varat izmantot citu skriptu, ja jums ir nepieciešams atdalīt atbildes īsā laika periodā. Bet tajā pašā laikā tie būtu jāuzsāk notikumu sērijas laikā, nevis tikai pēc tam. Piemēram, varat nosūtīt pašreizējās peles koordinātas, reaģējot uz mousemove notikumiem (JavaScript peles notikumiem), bet tikai ik pēc 250 milisekundēm:

function displayCoords(event) ( document.body.textContent = "pele atrodas pie " + event.pageX + ", " + event.pageY; ) var scheduled = false, lastEvent; addEventListener("mousemove", function(event) ( lastEvent = notikums; if (!scheduled) ( ieplānots = patiess; setTimeout(function() (plānots = false; displayCoords(lastEvent); ), 250; ) ));

Secinājums

Notikumu apstrādātāji ļauj mums atklāt notikumus, kurus mēs nevaram tieši kontrolēt, un reaģēt uz tiem. Lai reģistrētu šādu apdarinātāju, izmantojiet metodi addEventListener.

Katram notikumam ir noteikts veids ("taustiņu nospiešana", "fokuss" utt.), kas to identificē. Lielākā daļa notikumu tiek aktivizēti noteiktā DOM elementā un pēc tam izplatīti uz elementa vecāku mezgliem. Tas ļauj apstrādātājiem, kas saistīti ar šiem elementiem, tos apstrādāt.

Kad tiek izsaukts apstrādātājs, tam tiek nodots notikuma objekts ar Papildus informācija par rīcību. Šis objekts satur arī metodes, lai apturētu turpmāku notikuma izplatīšanos (stopPropagation) vai neļautu noklusējuma pārlūkprogrammai apstrādāt notikumu (preventDefault).

Taustiņu nospiešanas ģenerē "taustiņu nospiešanas", "taustiņu nospiešanas" un "taustiņu nospiešanas" notikumus. Noklikšķinot ar peli, tiek ģenerēti notikumi "peles lejup", "peles augšup" un "klikšķis". Peles pārvietošana - "mousemove", "mouseenter" un "mouseout".

JavaScript ritināšanas notikumu var definēt, izmantojot notikumu "scroll", un mainīgo fokusu var definēt, izmantojot "fokusu" un "izplūšanu". Kad dokumenta ielāde ir pabeigta, logam tiek parādīts notikums “load”.

Vienlaicīgi var darboties tikai viena JavaScript programmas daļa. Notikumu apstrādātājiem un citiem ieplānotajiem skriptiem jāgaida, līdz tiks pabeigta citu rindā esošo skriptu izpilde.

Šī publikācija ir draudzīgas projekta komandas sagatavotā raksta “Handling Events” tulkojums

JavaScript notikumi

JavaScript, tāpat kā citas objektu orientētas valodas, definē vairākus notikumus, kas saistīti ar dokumenta elementiem. Apdarinātāji ļauj no skripta organizēt reakciju uz notikumu rašanos. Šajā gadījumā atbilstošais apdarinātājs tiek norādīts kā HTML dokumenta elementa atribūts; šī atribūta vērtība ir JavaScript izteiksme. Piemēram,

- peles kursora novietošana un pārvietošana virs elementa tiek papildināta ar fona krāsas izmaiņām.

- kad lietotājs mēģina aizvērt logu un izlādēt dokumentu, tiek parādīts ziņojums

- noklikšķinot uz attēla, tiek izpildīta noteikta funkcija showPict().

Pusi apstrādātāju atbalsta gandrīz visi HTML elementi (). Dažus notikumus var simulēt, izmantojot piemērotas metodes. Zemāk ir notikumu saraksts saskaņā ar HTML specifikācijas 4.0 un daži notikumi, ko atbalsta MS IE. Pārlūkprogrammu interpretācija var atšķirties no standarta apdarinātāja piemērojamības ziņā noteiktiem elementiem

Pasākumu apstrādātājs	Atbalsta HTML elementus	Apraksts	Metode imitācija
irPārtraukt	IMG	Tiek pārtraukta attēla ielāde
onBlur		Pašreizējais elements zaudē fokusu, t.i. pāriet uz citu elementu. Tas notiek, ja pele tiek noklikšķināta ārpus elementa vai tiek nospiests tabulēšanas taustiņš.	izpludināt ()
onChange	IEVADE, IZVĒLE, TEXTAREA	Veidlapas elementu vērtību maiņa. Rodas pēc tam, kad elements zaudē fokusu, t.i. pēc aizmiglošanas notikuma	mainīt ()
onClick		Viens klikšķis (nospiesta un atlaista peles poga)	klikšķis()
onDblClick	Gandrīz visi HTML elementi	Dubultklikšķi
onError	IMG, LOGS	Rodas skripta izpildes kļūda
onFocus	A, APJOMS, POGA, IEVADE, ETIĶETE, ATLASĪT, TEKSTA APJOMS	Fokusējamā elementa iegūšana (noklikšķinot uz elementa vai vēlreiz nospiežot tabulēšanas taustiņu)	fokuss ()
onKeyDown	Gandrīz visi HTML elementi	Tastatūrā tiek nospiests taustiņš
onKeyPress	Gandrīz visi HTML elementi	Tastatūras taustiņš tiek nospiests un atlaists
onKeyUp	Gandrīz visi HTML elementi	Tastatūras taustiņš ir atbrīvots
onLoad	BOSTY, FRAMESET
onMouseDown	Gandrīz visi HTML elementi	Peles poga ir nospiesta pašreizējā elementā
onMouseMove	Gandrīz visi HTML elementi	Pārvietojiet peles kursoru pašreizējā elementā
onMouseOut	Gandrīz visi HTML elementi	Peles kursors atrodas ārpus pašreizējā elementa
onMouseOver	Gandrīz visi HTML elementi	Peles kursors atrodas virs pašreizējā elementa
onMouseUp	Gandrīz visi HTML elementi	Peles poga ir atbrīvota pašreizējā elementā
onMove	LOGS	Logu pārvietošana
onReset	FORMA	Atiestatīt veidlapas datus (noklikšķiniet uz pogas )	atiestatīt ()
onResize	LOGS	Loga izmēra maiņa
on Select	IEVADE, TEXTAREA	Atlasīt tekstu pašreizējā elementā
onSubmit	FORMA	Veidlapas datu iesniegšana (noklikšķinot uz pogas )	Iesniegt()
onIzlādēt	BOSTY, FRAMESET	Mēģina aizvērt pārlūkprogrammas logu un izlādēt dokumentu