Vrste događaja. Događaji u javaScriptu Dom događaja javascript

U ovoj lekciji ćemo pogledati glavne vrste događaja pomoću kojih možete presresti koristeći JavaScript izvršiti neki kod.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

• prebacivanje - Događaj se događa kada korisnik otvori ili zatvori element detalja. Element detalja namijenjen je stvaranju dodatne informacije, koje korisnik može vidjeti ili sakriti ako je potrebno.
• kotačić - događaj se događa kada se kotačić miša pomiče naprijed ili nazad preko elementa.

Tijekom rada sa stranicom korisnik obavlja razne akcije: pritišće tipke miša, unosi tekst na tipkovnici. Svaka takva akcija je događaj preglednika. Može se nadzirati i izvršavati određene linije programa kada se pojave. JavaScript za to ima rukovatelje događajima. Osim radnji korisnika, postoje i drugi događaji preglednika, kao što je učitavanje stranice do kraja.

Svaki događaj ima svoje ime. click je pritisak lijeve tipke miša, keydown je pritisak tipke, fokus je pojava elementa forme u fokusu, rukovanje događajima

Funkcija koja se izvršava kada se aktivira događaj naziva se rukovatelj događajem. Svaki tip događaja ima svoj rukovatelj. Ime rukovatelja sastoji se od riječi on i naziva događaja. Na primjer, rukovatelj događajem klika zove se onclick. Događaji se ne događaju na stranici općenito, već na određenom elementu. Sukladno tome, rukovatelj nije zasebna funkcija. Rukovatelj se postavlja na neki element stranice.

Postoje različiti načini za dodjeljivanje rukovatelja događajima elementu. Rukovatelja možete dodijeliti putem atributa oznake. Kod koji bi se trebao izvršiti kada se događaj pokrene zapisan je u vrijednosti atributa. Kreirajmo stranicu, dodajmo joj gumb i dodijelimo joj rukovatelj događajem klika:

JavaScript:

JavaScript:

Kada je funkcija dodijeljena rukovatelju, nema zagrada iza naziva funkcije. Ako stavite zagrade, onda to neće biti dodjela funkciji, već poziv na izvršenje.

Postoji metoda addEventListener() koja također dodjeljuje rukovatelj događajima elementu. Smatra se modernijim. Danas se ne koristi često, ali postoje novi događaji u JavaScriptu kojima se može upravljati samo ovom metodom.

element.addEventListener(događaj, funkcija)

Mogućnosti:

događaj - događaj koji treba obraditi

funkcija - funkcija koja postaje rukovatelj

U parametrima ovu metodu Naziv događaja piše se pod navodnicima i prije njega ne treba pisati riječ na.

HTML kôd:

JavaScript:

Metoda removeEventListener() omogućuje vam uklanjanje rukovatelja.

element.removeEventListener(događaj, funkcija)

Koristeći gore opisanu metodu, elementu možete dodijeliti nekoliko rukovatelja za jedan događaj. Zatim morate izbrisati svaki od njih zasebno.

Svaki put kad se pokrene događaj, 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 svaki predmet ima. Na primjer, svojstvo type sadrži vrstu događaja.

Objekt događaja prosljeđuje se kao parametar funkciji koja je rukovatelj. Za pristup objektu morate stvoriti parametar u funkciji. Objektu se pristupa preko ovog parametra. Ako funkcija očekuje druge parametre, tada objekt događaja mora biti prvi parametar. Promijenimo rukovatelj za gumb čiji je ID jednak "button". Pristupimo objektu događaja. Umjesto poruke o pritisku tipke prikazat ćemo tip događaja. Sada će rukovatelj izgledati ovako:

Kliknite na gumb, prikazat će se vrsta događaja koji je pokrenut.

Svi objekti događaja imaju svojstvo currentTarget. Vraća element na kojem je događaj pokrenut. Ovo se može činiti besmislenim. Uostalom, rukovatelj je dodijeljen određenom elementu. Zašto ponovno vratiti ovaj element? Ali s događajima preglednika sve je nešto kompliciranije. Malo kasnije ćete naučiti kako se koristi. Razmotrit ćemo i druga svojstva pri proučavanju specifičnih događaja.

Od autora: nakon što je web stranica učitana i potpuno spremna, u JavaScriptu se pokreće cijela kaskada događaja, koja se još više povećava kada korisnik na ovaj ili onaj način počne komunicirati sa stranicom. Događaji mogu uključivati ​​učitavanje stranice, njeno pomicanje, klikanje gumba 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). Takvi događaji također uključuju one radnje koje stranica izvodi neovisno o korisniku. Ovi 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: pokreću se kada korisnik pritisne ili otpusti tipke na tipkovnici, upravlja mišem, upravlja dodirnom podlogom ili upravlja dodirnim zaslonom.

Fokus i hendikep događaji. Uglavnom povezan s obrascima: polje za unos "dobiva fokus" kada je korisnik spreman za interakciju s njim. Ostali događaji prate slanje obrazaca, promjene u vrijednostima polja obrasca itd.

JavaScript. Brzi početak

Mutacijski događaji i promatrači. Elementi koji mijenjaju prate se kada se DOM struktura promijeni: na primjer, kada se elementi na stranici umetnu ili uklone pomoću skripte.

Poseban kod koji će raditi samo za specifični element DOM, stvara rukovatelj događajima. Postoje tri načina za stvaranje rukovatelja događajima u JS-u:

Najstarija metoda povezivanja događaja, jedna od najčešćih do danas. Metoda koristi posebne atribute u označavanju. npr.:

U gornjem primjeru, nakon što polje dobije fokus i korisnik prijeđe na ispunjavanje sljedećeg polja (na primjer, pomoću TAB-a ili običnog klika), element će pozvati funkciju checkName, koja je napisana u JS-u.
Standardni HTML rukovatelji događajima ne preporučuju se za korištenje u modernom razvoju, uglavnom zbog činjenice da je funkcionalnost pomiješana s markupom, što komplicira rad i otklanjanje pogrešaka koda.

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

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

JavaScript. Brzi početak

Istražiti osnove JavaScripta na praktičnom primjeru izrade web aplikacije

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

Moderna metoda dodavanja rukovatelja događajima koji vam omogućuje lančano povezivanje više događaja i funkcija:

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

Booleova vrijednost na kraju označava treba li događaj biti snimljen. 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("blur", function() ( // akcije za pokretanje događaja ))

Ako niste primijetili, većina aplikacija i web stranica prilično je dosadna kada stoje same za sebe. Dočekuju vas s pompoznim i blještavim sučeljem, ali dojam toga brzo nestane ako ne počnete komunicirati s njima:

Razlog tome je vrlo jednostavan. Aplikacije postoje kako bi odgovorile na vaše radnje. Postoje neki poticaji koji vas tjeraju da pokrenete aplikacije i počnete ih koristiti. Sve ostalo što učine nakon toga uvelike ovisi o tome što im kažete da učine. Ovdje stvari postaju stvarno zanimljive.

Kažete aplikacijama što trebaju učiniti tako što ćete ih natjerati da reagiraju na nešto poznato što se naziva događaj. U ovom članku dat ćemo pregled događaja i kako se mogu koristiti.

Općenito, sve što stvorite može se modelirati sljedećom izjavom:

Postoji bezbroj stvari koje možete učiniti kako biste popunili praznine u ovoj izjavi. Prvi prostor vam govori da se nešto događa. Drugi prostor opisuje reakciju na to. Evo nekoliko primjera ispunjavanja ove prijave:

Ovaj univerzalni model primjenjuje se na sve kodove koje smo sastavili. Ovaj se model također odnosi na sav kod koji je svaki programer/dizajner kojeg poznajete ikada napisao za svoje aplikacije.

Ne postoji način da se zaobiđe ovaj model, pa... nema smisla pokušavati. Umjesto toga, morate dublje pogledati ovu vrlo korisnu stvar poznatu kao događaj.

Događaj nije ništa više od signala. Javlja da se upravo nešto dogodilo. Ovo nešto bi mogao biti klik mišem. To bi mogao biti pritisak tipke na tipkovnici. Ovo bi moglo promijeniti veličinu vašeg prozora. Može jednostavno biti da je vaš dokument upravo preuzet.

Morate razumjeti da se ovaj signal može ugraditi na stotine različiti putevi u JavaScriptu... ili u nečem prilagođenom što ste izradili samo za svoju aplikaciju u jednoj instanci.

Vratimo se našem modelu. Događaji čine prvu polovicu izjave:

Događaji određuju ono što se događa. Šalju signal. Drugi dio modela određuje reakciju na događaj:

Uostalom, čemu služi signal ako ga s druge strane nitko ne čeka i onda u skladu s tim nešto poduzme?! U redu - sada kada dobro razumijete što su događaji, pogledajmo kako događaji žive u rezervatu poznatom kao JavaScript.

S obzirom na važnost događaja, ne čudi što JavaScript nudi brojne alate za rad s njima. Dvije su glavne stvari koje morate učiniti da biste radili s događajima:

• Praćenje događaja;
• Reakcija na događaje.

Ova se dva koraka čine prilično jednostavnima, ali ne zaboravite da imamo posla s JavaScriptom. Jednostavnost je samo dimna zavjesa koja može sakriti ozbiljne probleme koje ćete dobiti ako poduzmete pogrešne radnje. Možda sam previše dramatičan? Pa, shvatimo to zajedno.

Da budem iskren, svojedobno sam pregledao sve što radite unutar aplikacije za otkrivanje događaja. Ponekad vaša aplikacija automatski detektira događaj, primjerice prilikom učitavanja. Ponekad se događaj definira kao rezultat vaše interakcije s aplikacijom.

Treba napomenuti da je aplikacija neprestano bombardirana događajima, neovisno o tome trebate li ih snimiti ili ne. Naš zadatak je reći aplikaciji da prati samo one događaje koji su nam potrebni.

Težak posao praćenja događaja koji su nam potrebni obavlja funkcija koja se zove addEventListener. Ova funkcija je odgovorna za stalno upozoravanje i obavještavanje drugih dijelova vaše aplikacije kada se dogodi neki zanimljiv događaj.

Način na koji koristite ovu funkciju izgleda ovako:

izvor.addEventListener(eventName, eventHandler, false);

Analizirajmo što svaki dio ove funkcije znači.

Pozivate addEventListener na elementu ili objektu na kojem želite slušati događaje. Obično je to DOM element, ali može biti i dokument, prozor ili bilo koji drugi objekt koji može generirati događaje.

Prvi argument koji dajete funkciji addEventListener je naziv događaja koji želite slušati. Cijeli popis Događaja s kojima možete komunicirati previše je da ih ovdje navedemo u cijelosti (pogledajte ovu stranicu), ali neki od najčešćih događaja s kojima ćete se susresti su sljedeći:

U narednim člancima ćemo se detaljnije osvrnuti na mnoge od tih događaja. Za sada samo obratite pozornost na događaj klika jer ćemo ga kasnije koristiti.

Kao drugi argument, morate navesti funkciju koja će biti pozvana kada se događaj uhvati. Ova se funkcija naziva rukovatelj događajima. U nastavku ću vam detaljno reći o tome.

Uhvatiti ili ne uhvatiti, pitanje je sad!

Posljednji argument može biti istinit ili lažan.

Sada kada ste upoznati s funkcijom addEventListener, rezimiramo sve jednim primjerom iz stvarnog svijeta:

document.addEventListener("klik", promijeniBoju, laž);

U ovom primjeru, naša funkcija addEventListener pripojena je objektu dokumenta. Kada se otkrije događaj klika, on poziva funkciju changeColor (poznatu i kao rukovatelj događajem) kao odgovor na taj događaj. Ovo nas približava konceptu reakcije na događaje, o čemu ćemo govoriti u sljedećem odjeljku.

Kao što je opisano u prethodnom odjeljku, praćenjem događaja (osluškivanjem) upravlja funkcija addEventListener. Nakon što se događaj uhvati, njime mora upravljati rukovatelj događajima. Nisam se šalio kad sam ranije spomenuo da rukovatelj događajima nije ništa više od funkcije:

funkcija normalAndBoring() ( // stvarno volim sve različite stvari koje mogu biti unutar ove funkcije! )

Jedina razlika između standardne funkcije i one navedene kao rukovatelj događajima je ta što se rukovatelj događajima posebno poziva imenom u pozivu addEventListener:

document.addEventListener("klik", promijeniBoju, laž); funkcija changeColor() ( // Važan sam!!! )

Svaki kod koji postavite unutar rukovatelja događajem bit će izvršen kada addEventListenerfunction uhvati događaj koji želite. Prilično je jednostavno!

Najbolji način da razumijemo ono što smo upravo naučili je da to vidimo u potpuno radnom kodu. Kako biste nas pokrenuli paralelno, dodajte sljedeće oznake i kod u svoj HTML dokument:

Kliknite bilo gdje! document.addEventListener("klik", promijeniBoju, laž); funkcija changeColor() (document.body.style.backgroundColor = "#FFC926";)

U početku, ako pogledate dokument u pregledniku, vidjet ćete samo praznu stranicu:

Međutim, sve se mijenja ako kliknete bilo gdje na stranici. Nakon što to učinite, boja pozadine vaše stranice promijenit će se iz bijele u svijetlo žutu.

Razlog tome prilično je lako razumjeti. Pogledajmo kod:

Poziv addEventListener identičan je onome što smo već pokrili, pa preskočimo taj korak. Umjesto toga, pogledajte rukovatelj događajem changeColor:

document.addEventListener("klik", promijeniBoju, laž); funkcija changeColor() (document.body.style.backgroundColor = "#FFC926";)

Ova se funkcija poziva kada se na dokumentu otkrije klik. Kada se ova funkcija pozove, postavlja boju pozadine elementa tijela na svijetlo žutu. Povežući ovo s izjavom koju smo pogledali na samom početku, vidjet ćemo da bi ovaj primjer izgledao ovako:

Ako razumijete bit onoga što se događa, onda je to sjajno! Upravo ste naučili o jednom od najvažnijih pojmova s ​​kojima ćete se susresti u programiranju. Ali još nismo gotovi. Nećemo tako lako pustiti rukovatelje događajima, pa pogledajmo još jednu stvar.

Rukovatelj događajima čini više od pukog poziva kada se događaj uhvati putem funkcije praćenja događaja. Također omogućuje pristup objektu glavnog događaja putem njegovih argumenata. Da bismo lako pristupili ovom objektu događaja, moramo promijeniti potpis rukovatelja da podržava ove argumente.

funkcija myEventHandler(e) ( // elementi rukovatelja događajima )

Za sada je rukovatelj događajima još uvijek dobra stara funkcija. Ali to je ono što nam treba, funkcija koja uzima jedan argument... argument događaja!

Možete koristiti bilo koji valjani identifikator za argument, ali ja općenito preferiram e jer to rade sva cool djeca. Tehnički nema ništa loše u definiranju događaja na sljedeći način.

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

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

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

OnTitleEvent

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

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


var default_color = "bijela";

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

funkcija setDefaultColor(boja) (
zadana_boja = boja;
}

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



Bijela
Žuta boja
zelena

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

Funkcija setTempColor() odgovorna je za privremenu promjenu boje.

Funkcija setDefaultColor() odgovorna je za promjenu zadane boje.

Funkcija defaultColor() postavlja zadanu boju pozadine.

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

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