Dogodki za delo z vnosom javascript. Dogodki in obdelovalci dogodkov v JavaScriptu. Kaj so dogodki

22.11.2023

Tematika dogodkov je zelo pomembna in zelo zanimiva. Zahvaljujoč temu lahko naredite veliko zanimivih stvari, nad katerimi bo uporabnik navdušen. Dogodek v JavaScriptu je določeno dejanje, ki ga sproži uporabnik ali brskalnik. Dogodek je lahko na primer klik z miško na gumb, premikanje miške, fokusiranje na element, spreminjanje vrednosti v besedilnem polju, spreminjanje velikosti okna brskalnika itd.

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

Dogodek	Predmet	Vzrok nastanka
Splav	Slika	Prekinitev nalaganja slike
Zameglitev		Izgubljena osredotočenost na element
spremeniti	FileUpload, Select, Text, Textarea	Spremeni vrednost
Kliknite	Območje, Gumb, Potrditveno polje, Dokument, Povezava, Radio, Ponastavi, Predloži	Klik z miško na element
DblClick	Območje, dokument, povezava	Dvakrat kliknite na element
Povleci spusti	Okno	Premakni se v okno brskalnika
Fokus	Gumb, potrditveno polje, nalaganje datoteke, okvir, plast, geslo, radio, ponastavitev, izbira, oddaja, besedilo, besedilno polje, okno	Nastavitev fokusa na element
KeyDown		Pritisk tipke na tipkovnici
KeyPress	Dokument, slika, povezava, besedilno polje	Držanje tipke na tipkovnici
KeyUp	Dokument, slika, povezava, besedilno polje	Sprostitev tipke na tipkovnici
obremenitev	Dokument, slika, plast, okno
MouseDown	Gumb, dokument, povezava	Pritisnjen gumb miške
MouseMove	Okno	Miška v gibanju
MouseOut	Območje, sloj, povezava	Miška gre preko meja elementa
MouseOver	Območje, sloj, povezava	Miška je nad elementom
MouseUp	Gumb, dokument, povezava	Gumb miške je sproščen
Premakni se	Okvir	Premikanje elementa
Ponastaviti	Oblika	Ponastavi obrazec
Spremeni velikost	Okvir, okno	Spreminjanje velikosti
Izberite	Besedilo, Textarea	Izbira besedila
Predloži	Oblika	Prenos podatkov
Razbremenitev	Okno	Razkladanje trenutne strani

Zdaj pa ugotovimo, kako uporabiti dogodke v JavaScriptu. Obstajajo tako imenovani obdelovalci dogodkov. Upravljavci dogodkov določajo, kaj se bo zgodilo, ko pride do določenega dogodka. Obdelovalci dogodkov v JavaScriptu imajo naslednjo splošno obliko:

OnTitleEvent

To pomeni, da najprej pride predpona »on« in nato ime dogodka, na primer naslednji obdelovalci dogodkov: onFocus, onClick, onSubmit itd. Mislim, da tukaj ni vprašanj. In zdaj glavno vprašanje: "Kako uporabljati dogodke v JavaScriptu?". Obseg njihove uporabe je ogromen, zdaj pa si bomo ogledali en problem. Na strani so tri povezave. Vsaka od povezav je odgovorna za drugačno barvo ozadja (na primer belo, rumeno in zeleno). Sprva je ozadje belo. Ko z miško premaknete nad določeno povezavo, se spremeni barva ozadja. Ko odmaknete miško, se barva ozadja povrne na privzeto barvo. Ko kliknete povezavo, se barva ozadja ohrani kot privzeta.

a (
barva: modra;
tekst-okras: podčrtaj;
kazalec: kazalec;
}

var default_color = "bela";

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

funkcija setDefaultColor(barva) (
privzeta_barva = barva;
}

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

Bela
Rumena
Zelena

Poglejmo ta skript ali bolje rečeno celotno stran HTML s podporo za JavaScript in CSS (z drugimi besedami, to je primer DHTML). Najprej pridejo običajne oznake HTML, s katerimi se začne vsaka stran HTML. Nato ustvarimo slog, v katerem zahtevamo, da so vse povezave na določeni strani modre, podčrtane in da je kazalec miške na njih v obliki "Kazalca". Lahko rečete: "Zakaj morate nastaviti slog? Navsezadnje bodo povezave popolnoma enake." Tako je, povezave, vendar nimamo povezav kot takih (navsezadnje v oznaki ni atributa href), zato bodo privzeto preprosto črno besedilo (vendar lahko na besedilo tudi kliknete). Zato je stil obvezen. Lahko ga odstranite in vidite, kaj se zgodi. Še bolje, dodajte atribut href (s poljubno vrednostjo, tudi prazno) in razložite, zakaj je skript prenehal delovati. Nato se začne JavaScript. Ustvarimo spremenljivko default_color, ki je odgovorna za privzeto barvo. Sledijo tri funkcije:

Funkcija setTempColor() je odgovorna za začasno spreminjanje barve.

Funkcija setDefaultColor() je odgovorna za spreminjanje privzete barve.

Funkcija defaultColor() nastavi privzeto barvo ozadja.

Potem so tu še povezave z atributi v obliki obdelovalcev dogodkov. Ko z miško premaknete nad povezavo, se zgodi dogodek MouseOver; v skladu s tem rutina za obravnavo dogodkov onMouseOver pokliče funkcijo setTempColor() in posreduje ustrezen parameter. Ko odstranite miško z elementa, se sproži dogodek MouseOut, nato pa se pokliče funkcija defaultColor(), ki nastavi barvo ozadja na privzeto barvo. In končno, ko miška klikne na povezavo (onClick handler), se pokliče funkcija setDefaultColor(), ki nastavi barvo, določeno v parametru, na privzeto barvo ozadja. Kot lahko vidite, je vse precej preprosto.

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

Vrste dogodkov

V zgodnjih dneh svetovnega spleta so se spletni razvijalci morali ukvarjati le z majhnim številom dogodkov: »nalaganje«, »klik«, »pregled miške« in drugi. Te dokaj stare vrste dogodkov dobro podpirajo vsi brskalniki. Z razvojem spletne platforme so bili vključeni zmogljivejši aplikacijski vmesniki in število dogodkov se je znatno povečalo. Ni standarda, ki bi definiral celoten nabor dogodkov, in število podprtih dogodkov še naprej hitro narašča. 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 aplikacijski vmesniki v specifikaciji HTML5 (in povezanih dodatnih specifikacijah) definirajo nove dogodke, ki se uporabljajo na primer za upravljanje zgodovine brskanja, povleci in spusti, sporočanje med dokumenti ter predvajanje zvoka in videa.

Upoštevajte, da številne od teh novih vrst dogodkov še niso široko podprte in so opredeljene s standardi, ki so še v fazi načrtovanja. Dogodki, ki jih boste najpogosteje uporabljali v svojih spletnih aplikacijah, bodo običajno tisti dolgotrajni, ki jih podpirajo vsi brskalniki: dogodki miške, dogodki tipkovnice, dogodki obrazcev HTML in dogodki oken. Te dogodke bomo upoštevali.

Dogodki nalaganja dokumenta

Večina spletnih aplikacij nujno potrebuje spletni brskalnik, da jih obvesti, ko je dokument končan s prenosom in je pripravljen za izvajanje operacij na njem. Temu namenu služi dogodek nalaganja na objektu Window. Dogodek nalaganja se sproži šele, ko so dokument in vse njegove slike popolnoma naloženi. Vendar pa je skripte običajno mogoče zagnati takoj po razčlenjevanju dokumenta, preden se naložijo slike. Zagonski čas spletne aplikacije lahko znatno skrajšate, če začnete izvajati skripte ob dogodkih, ki niso nalaganje.

Dogodek DOMContentLoaded se sproži, ko je dokument naložen, razčlenjen in vsi odloženi skripti izvedeni. Na tej točki se lahko slike in skripti z asinhronim atributom še naprej nalagajo, vendar bo sam dokument pripravljen za delovanje. Ta dogodek je bil prvič predstavljen v Firefoxu, nato pa so ga sprejeli vsi drugi proizvajalci brskalnikov, vključno z Microsoftom, ki je dodal podporo za ta dogodek v IE9. Kljub predponi DOM v imenu ta dogodek ni del standarda DOM Level 3 Events, ampak je standardiziran s specifikacijo HTML5.

Ko se dokument naloži, se spremeni vrednost lastnosti document.readyState. Vsako spremembo vrednosti te lastnosti v IE spremlja dogodek readystatechange na objektu dokumenta, tako da se lahko v IE ta dogodek uporabi za določitev, kdaj nastopi popolno stanje. Specifikacija HTML5 standardizira dogodek readystatechange, vendar zahteva, da se sproži tik pred dogodkom nalaganja, zato ni povsem jasno, kakšna je prednost dogodka readystatechange pred dogodkom nalaganja.

Spodnji primer definira funkcijo whenReady(). Funkcija, posredovana whenReady(), se pokliče (kot metoda objekta Document), takoj ko je dokument pripravljen za delovanje. whenReady() čaka na dogodka DOMContentLoaded in readystatechange ter dogodek nalaganja uporabi samo kot nadomestno možnost, če se uporablja v starejših brskalnikih, ki ne podpirajo prvih dveh dogodkov. Funkcija whenReady() bo v nekaterih scenarijih uporabljena na naslednji način:

/* Predaj whenReady() tvojo funkcijo in ta jo bo poklicala (kot metodo na objektu dokumenta), ko bo dokument končal razčlenjevanje in je pripravljen za izvajanje operacij. Registrirane funkcije se pokličejo ob prvem dogodku DOMContentLoaded, readystatechange ali load. Ko je dokument pripravljen in so klicane vse funkcije, bo whenReady() takoj poklical vse funkcije, ki so mu bile posredovane. */ var whenReady = (function() ( // To funkcijo vrne funkcija whenReady() var funcs = ; // Funkcije, ki jih je treba poklicati ob dogodku var ready = false; // Prejele bodo vrednost true, ko funkcija obdelovalca se pokliče // Obravnavalec dogodkov , ki se pokliče takoj, ko je dokument // pripravljen za izvajanje operacij, funkcija obdelovalca(e) ( // Če je bil obravnavalec že poklican, preprosto vrni nadzor, če se (pripravljen) vrne; / / Če je to dogodek readystatechange in je stanje prejelo vrednost, // odlično od "complete" pomeni, da dokument še ni pripravljen, če (e.type==="readystatechange" && document.readyState !== "complete" ) return; // Pokliči vse registrirane funkcije // Upoštevajte, da je vrednost // lastnosti func.length enkrat preverjena, v primeru, da ena od klicanih funkcij // registrira dodatne funkcije za (var i = 0). ; jaz.

Miški dogodki

Z miško je povezanih kar nekaj dogodkov. Vsi so navedeni v spodnji tabeli. Vsi dogodki miške razen mouseenter in mouseleave bubble. Dogodki klika, ki se zgodijo na povezavah in gumbih za oddajo obrazca, imajo privzeta dejanja, ki jih je mogoče preklicati. 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 Vrsta Opis

kliknite	Dogodek na visoki ravni, ki se sproži, ko uporabnik pritisne in spusti gumb miške ali drugače aktivira element.
kontekstni meni	Dogodek, ki ga je mogoče preklicati, sprožen, preden se prikaže kontekstni meni. Trenutni brskalniki ob desnem kliku prikažejo kontekstni meni, zato je ta dogodek mogoče uporabiti tudi kot dogodek klika.
dblclick	Sproži se, ko uporabnik dvakrat klikne.
mousedown	Sproži se, ko uporabnik pritisne gumb miške.
mouseup	Sproži se, ko uporabnik spusti gumb miške.
mousemove	Sproži se, ko uporabnik premakne kazalec miške.
miška	Sproži se, ko je kazalec miške postavljen na element. Lastnost relatedTarget (ali fromElement v IE) določa element, s katerega je bil premaknjen kazalec miške.
mouseout	Sproži 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 miška, vendar se ne prikaže. Prvič predstavljen v IE in standardiziran v HTML5, vendar še ni podprt v vseh brskalnikih.
mouseleave	Podobno mouseoutu, vendar se ne prikaže. Prvič predstavljen v IE in standardiziran v HTML5, vendar še ni podprt v vseh brskalnikih.

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

Lastnosti altKey, ctrlKey, metaKey in shiftKey določite stanja različnih modifikacijskih tipk, ki bi jih lahko držali pritisnjene v času dogodka: z njihovo pomočjo lahko na primer ločite preprost klik od klika s pritisnjeno tipko Shift.

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

Nekateri brskalniki sprožijo dogodek klika le ob kliku levega gumba. Zato, če morate obdelati 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, za te obdelovalce dogodkov ni vedno mogoče preprečiti, da bi se kontekstni meni prikazal.

Spodnji primer prikazuje funkcijo drag(), ki ob klicu iz obdelovalnika dogodka mousedown omogoča uporabniku, da z miško povleče absolutno pozicionirane elemente dokumenta. Funkcija drag() deluje z modeli dogodkov DOM in IE.

Funkcija drag() sprejme dva argumenta. Prvi je element, ki ga vlečete. To je lahko element, na katerem se je zgodil dogodek mousedown, in element, ki ga je vseboval (uporabniku lahko na primer dovolite, da povleče miško na element, ki je videti kot naslovna vrstica okna, in povlecite vsebovalni element, ki je videti kot okno) . Vsekakor pa mora biti to element dokumenta, ki je absolutno pozicioniran z uporabo atributa položaja CSS. Drugi argument je objekt dogodka, prejet z dogodkom mousedown:

/* drag() - vlečenje absolutno pozicioniranih elementov HTML. To funkcijo je treba poklicati iz obdelovalca dogodkov onmousedown. Naslednji dogodki premikanja miške bodo povzročili premik navedenega elementa. Dogodek mouseup bo dokončal gibanje. Ta izvedba deluje tako v standardnem modelu dogodkov kot v modelu dogodkov IE. Uporablja funkcijo getScrollOffsets(). Argumenti: elementToDrag: element, ki je prejel dogodek mousedown ali vsebovalni element. Ta element mora imeti absolutno pozicioniranje. Vrednosti njegovih lastnosti style.left in style.top se bodo spremenile, ko uporabnik premakne kazalec miške. dogodek: objekt dogodka, ki ga prejme obravnavalec dogodka mousedown. */ funkcija drag(elementToDrag, event) ( // Pretvori začetne koordinate kazalca miške v koordinate dokumenta var scroll = getScrollOffsets(); // Pomožna funkcija, deklarirana spodaj 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 ima elementToDrag absolutno pozicioniranje, se predpostavlja, da se njegova lastnost offsetParent nanaša na dokument body var origX = elementToDrag.offsetTop; // Poišči razdaljo med točko dogodka mousedown in zgornjim levim kotom elementa // Registriraj dogodke mousemove in mouseup dogodek mousedown. document.addEventListener("mouseup", upHandler, true); ) else if (document.attachEvent) ( // model dogodkov IE za IE5-8 // V modelu dogodkov IE se dogodki zajamejo s klicem // metode elementa setCapture(). elementToDrag.setCapture(); elementToDrag.attachEvent( "onmousemove", moveHandler); ne bo posredovan drugim obdelovalcem, če (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 prestreže dogodke premikanja miške, ki se zgodijo med vlečenjem elementa. Odgovoren je za premikanje elementa. */ funkcija moveHandler(e) ( if (!e) e = window.event; // Model dogodka IE // Premakni element na položaj kazalca miške, pri čemer se upoštevajo položaji drsnega traku // in odmiki 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" ; nadaljnja propagacija dogodka. */ funkcija upHandler(e) ( if (!e) e = window.event; // Model dogodkov IE // Odstrani obdelovalce dogodkov, ki prestrežejo. if (document.removeEventListener) ( // Model dogodkov DOM document.removeEventListener("mouseup" , upHandler, true); document.removeEventListener("mousemove", moveHandler, true) else if (document.detachEvent) ( // IE 5+ Model dogodkov elementToDrag.detachEvent("onlosecapture", upHandler); elementToDrag.detachEvent( "onmouseup) ", upHandler); elementToDrag.detachEvent("onmousemove", moveHandler); elementToDrag.releaseCapture(); // In ustavi nadaljnje širjenje dogodka. e.cancelBubble = true; // IE ) ) // Vrne trenutne položaje drsnega traku kot lastnosti x in y funkcije objekta getScrollOffsets(w) ( // Uporabi podano okno ali trenutno // če je funkcija poklicana brez argumenta w = w | | okno; // Naslednja metoda deluje v vseh brskalniki razen IE različice 8 in nižje if (w.pageXOffset != null) return (x: w.pageXOffset, y:w.pageYOffset); // Za IE (in druge brskalnike) v standardnem načinu var d = w.document; if (document.compatMode == "CSSICompat") return (x: d.documentElement.scrollLeft, y: d.documentElement.scrollTop); // Za brskalnike v načinu združljivosti return ( x: d.body.scrollLeft, y: d.body.scrollTop ); )

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

Vleci me

To je preizkus. Preverite, preverite, preverite.

Najpomembnejša stvar pri tem je atribut onmousedown na ugnezdenem elementu. Upoštevajte, da uporablja lastnost this.parentNode. To pomeni, da se bo premaknil celoten element vsebnika.

Dogodki vnosa besedila

Brskalniki podpirajo tri starejše dogodke vnosa s tipkovnico. Dogodka Keydown in Keyup sta dogodka nizke ravni in o njih razpravljamo v naslednjem razdelku. Vendar pa je dogodek pritiska na tipko dogodek na visoki ravni, ki sporoči, da je bil vnesen natisljiv znak.

Osnutek specifikacije dogodkov ravni 3 DOM definira bolj splošen dogodek vnosa besedila, ki se sproži kot odgovor na vnos besedila, ne glede na to, kako je bilo vneseno.

S predlaganim dogodkom textinput in trenutno implementiranim dogodkom textInput se posreduje preprost objekt dogodka, ki ima lastnost podatkov, ki shrani vneseno besedilo. (Druga lastnost, ki jo predlaga specifikacija, inputMethod, bi morala določati vir vnosa, vendar še ni implementirana.) Za vnos s tipkovnico bo lastnost podatkov običajno vsebovala en znak, toda za vnos iz drugih virov lahko vsebuje veliko znakov .

Objekt dogodka, posredovan z dogodkom pritiska na tipko, ima bolj zapleteno organizacijo. Dogodek pritiska tipke predstavlja vnos enega znaka. Ta znak je vsebovan v objektu dogodka kot številska vrednost kodne točke Unicode in če ga želite pretvoriti v niz, morate uporabiti metodo String.fromCharCode(). V večini brskalnikov je kodna točka vnesenega znaka shranjena v lastnosti keyCode predmeta dogodka. Vendar Firefox zaradi zgodovinskih razlogov namesto tega uporablja lastnost charCode.

V večini brskalnikov se dogodek pritiska na tipko sproži le, ko vnesete natisljiv znak. Vendar se v Firefoxu dogodek pritiska tipke sproži tudi za nenatisljive znake. Če želite razlikovati med tema dvema primeroma (in prezreti nenatisljive znake), lahko preverite, ali lastnost charCode predmeta dogodka obstaja in ali vsebuje vrednost 0.

Dogodke vnosa besedila, vnosa besedila in pritiska na tipko je mogoče preklicati, da preprečite vnos znaka. To pomeni, da se ti dogodki lahko uporabljajo za filtriranje vnosa. Na primer, lahko preprečite vnos abecednih znakov v polje, namenjeno vnosu številskih podatkov.

Spodnji primer prikazuje modul JavaScript, ki izvaja to vrsto filtriranja. Išče elemente z dodatnim (nestandardnim) atributom data-allowed-chars. Registrira urejevalnike dogodkov textinput, textInput in pritiska tipk za vse najdene elemente in omeji vnos na znake regularnega izraza, določene v atributu data-allowed-chars:

/* Filtriranje vnosa za elemente Ta modul najde vse elemente v dokumentu, ki imajo atribut "data-allowed-chars". Registrira obdelovalce dogodkov pritiska tipke, textinput in textInput za te elemente, da omeji nabor znakov, dovoljenih za vnos, da omogoči vnos samo znakov, navedenih v atributu. Če ima element tudi atribut "data-messageid", se vrednost tega atributa interpretira kot ID drugega elementa dokumenta. Če uporabnik vnese neveljaven znak, postane element z navedenim ID-jem viden. Če uporabnik vnese veljaven znak, je element sporočila skrit. Ta element sporočila je namenjen prikazu razlage, zakaj je bil uporabnikov vnos zavrnjen. Njegova zasnova mora biti izvedena s pomočjo CSS, tako da je na začetku nevidna. */ whenReady(function () ( // Pokliči to funkcijo, ko je dokument naložen // Poišči vse elemente var inputelts = document.getElementsByTagName("input"); // Preglej jih for(var i = 0 ; i< inputelts.length; i++) { var elt = inputelts[i]; // Пропустить элементы, не являющиеся текстовыми полями ввода // и не имеющие атрибута data-allowed-chars if (elt.type != "text" || !elt.getAttribute("data-allowed-chars")) continue; // Зарегистрировать наш обработчик события в этом элементе input // keypress старое событие и реализовано во всех браузерах. // textInput поддерживается в Safari и Chrome с 2010 года. // textinput версия проекта стандарта "DOM Level 3 Events". if (elt.addEventListener) { elt.addEventListener("keypress", filter, false); elt.addEventListener("textInput", filter, false); elt.addEventListener("textinput", filter, false); } // textinput не поддерживается версиями IE, в которых не реализован // метод addEventListener() else { elt.attachEvent("onkeypress", filter); } } // Обработчик событий keypress и textInput, фильтрующий ввод пользователя function filter(event) { // Получить объект события и целевой элемент target var e = event || window.event; // Модель стандартная или IE var target = e.target || e.srcElement; // Модель стандартная или IE var text = null; // Введенный текст // Получить введенный символ или текст if (e.type === "textinput" || e.type === "textInput") text = e.data; else { // Это было событие keypress // Введенный печатаемый символ в Firefox сохраняется в свойстве charCode var code = e.charCode || e.keyCode; // Если была нажата какая либо функциональная клавиша, не фильтровать ее if (code < 32 || // Управляющий символ ASCII e.charCode == 0 || // Функциональная клавиша (в Firefox) e.ctrlKey || e.altKey) // Удерживаемая клавиша-модификатор return; // Не фильтровать это событие // Преобразовать код символа в строку var text = String.fromCharCode(code); } // Отыскать необходимую нам информацию в этом элементе input var allowed = target.getAttribute("data-allowed-chars"); // Допустимые символы var messageid = target.getAttribute("data-messageid"); // Сообщение id if (messageid) // Если указано значение id, получить элемент var messageElement = document.getElementById(messageid); // Обойти в цикле символы во введенном тексте for(var i = 0; i < text.length; i++) { var c = text.charAt(i); allowed = new RegExp(allowed, "i"); // Создаем регулярное выражение if (c.search(allowed) == -1) { // Недопустимый символ? // Отобразить элемент с сообщением, если указан if (messageElement) messageElement.style.visibility="visible"; // Отменить действия по умолчанию, чтобы предотвратить вставку текста if (e.preventDefault) e.preventDefault(); if (e.returnValue) e.returnValue = false; return false; } } // Если все символы оказались допустимыми, скрыть элемент // с сообщением, если он был указан if (messageElement) messageElement.style.visibility = "hidden"; } });

Spodaj je vzorec oznake HTML z uporabo tega modula:

Prosimo izpolnite obrazec.

Kontaktni podatki Samo črke imena
Samo telefonske številke
E-pošta Napačen e-poštni naslov

Spodnja slika prikazuje uporabo tega obrazca. Tukaj sem po vnosu imena vstavil številko, ki se je samodejno blokirala in pojavilo se je opozorilo:

Dogodka pritiska na tipko in vnosa besedila se sprožita tik preden je novo besedilo dejansko vstavljeno v element dokumenta, ki ima žarišče vnosa, zato lahko upravljavci teh dogodkov preprečijo vstavljanje besedila s preklicem dogodka.

Brskalniki izvajajo tudi vnosni dogodek, ki se sproži, ko je besedilo vstavljeno v element. Tega dogodka ni mogoče preklicati in njegov ustrezen objekt dogodka ne vsebuje informacij o vstavljenem besedilu - preprosto obvesti, da se je besedilna vsebina elementa spremenila. Če na primer želite zagotoviti, da so vneseni samo veliki znaki, lahko definirate obravnavo vnosnega dogodka, kot je prikazano spodaj:

Vhodni dogodek je standardiziran v specifikaciji HTML5 in ga podpirajo vsi sodobni brskalniki razen IE. Podoben učinek v IE je mogoče doseči z zaznavanjem spremembe lastnosti vrednosti elementa vnosa besedila z uporabo dogodka po meri sprememba lastnine.

Dogodki na tipkovnici

Dogodka Keydown in Keyup se sprožita, ko uporabnik pritisne ali spusti tipko na tipkovnici. Ustvarjeni so za modifikacijske tipke, funkcijske tipke in alfanumerične tipke. Če uporabnik drži tipko dovolj dolgo, da sproži način samodejnega ponavljanja, bo ustvarjenih veliko dogodkov tipke, preden pride do dogodka tipke.

Objekt dogodka, ki ustreza tem dogodkom, ima lastnost keyCode s številsko vrednostjo, ki identificira pritisnjeno tipko. Za ključe, ki ustvarjajo natisljive znake, na splošno lastnost keyCode vsebuje kodno točko Unicode, ki ustreza osnovnemu znaku, prikazanemu na ključu. Tipke s črkami vedno ustvarijo vrednosti keyCode, ki ustrezajo velikim črkam, ne glede na stanje tipke Shift, saj so to znaki, prikazani na tipkah.

Podobno številske tipke vedno ustvarijo vrednosti keyCode, ki ustrezajo številskim znakom, prikazanim na tipkah, tudi če ste za vnos ločil držali tipko Shift. Za ključe, ki ne ustrezajo natisljivim znakom, bo imela lastnost keyCode neko drugo vrednost. Te vrednosti lastnosti keyCode nikoli niso bile standardizirane. Vendar se med brskalniki ne razlikujejo toliko, da prenosljivosti ne bi bilo mogoče doseči.

Tako kot objekti dogodkov miške imajo objekti dogodkov tipkovnice lastnosti altKey, ctrlKey, metaKey in shiftKey, ki se ocenijo kot true, če je bila ustrezna modifikacijska tipka pritisnjena, ko se je dogodek zgodil.

Dogodka keydown in keyup ter lastnost keyCode so v uporabi že več kot desetletje, vendar nikoli niso bili standardizirani. Osnutek dogodkov ravni 3 DOM standardizira vrste dogodkov keydown in keyup, ne standardizira pa lastnosti keyCode. Namesto tega definira novo lastnost, ključ, ki mora vsebovati ime ključa kot niz. Če ključ ustreza natisljivemu znaku, mora lastnost ključa vsebovati ta natisljivi znak. Za funkcijske tipke mora lastnost ključa vsebovati vrednosti, kot so F2, Home ali Left.

V času tega pisanja ključna lastnost, ki jo določa standard Dogodki ravni 3 DOM, še ni bila implementirana v noben brskalnik. Vendar pa brskalniki, ki temeljijo na Webkitu, Safari in Chrome definirajo lastnost v objektih teh dogodkov: keyIdentifier. Za funkcijske tipke, tako kot lastnost ključa, lastnost keyIdentifier ne vsebuje številke, temveč niz z imenom tipke, kot sta Shift ali Enter. Za ključe, ki ustrezajo natisljivim znakom, ta lastnost vsebuje manj uporabno predstavitev niza kodne točke Unicode znaka. Tipka A na primer ustreza vrednosti U+0041.

Spodnji primer definira razred preslikave tipk, ki preslika identifikatorje kombinacij tipk, kot so PageUp, Alt_Z in ctrl+alt+shift+F5, v funkcije JavaScript, ki se kličejo kot odgovor na pritisk teh kombinacij tipk. Definicije vezave ključev se posredujejo konstruktorju Keymap() v obliki predmeta JavaScript, katerega imena lastnosti ustrezajo identifikatorjem kombinacije tipk in katerih vrednosti lastnosti vsebujejo sklice na funkcije obdelovalca. Dodajanje in odstranjevanje vezav poteka z metodama bind() in unbind().

Objekt KeyMap je nameščen v element HTML (običajno objekt Document) z uporabo metode install(). Ko je objekt KeyMap nastavljen, je s tem elementom registrirana obravnava dogodka keydown. Vsakič, ko je pritisnjena tipka, upravljavec preveri, ali obstaja funkcija, ki ustreza tej kombinaciji. Če funkcija obstaja, se pokliče.

Obravnavalec dogodka keydown uporablja lastnost ključa, ki jo definira standard dogodkov ravni 3 DOM, če obstaja. V nasprotnem primeru poskuša uporabiti lastnost Webkit keyIdentifier. In kot nadomestno orodje za obravnavo uporablja nestandardno lastnost keyCode:

// Konstruktor funkcije function Keymap(bindings) ( this.map = (); // Definirajte identifikator preslikave->handler if (bindings) ( // Kopirajte začetno preslikavo vezave vanj for(name in bindings) this.bind( name, bindings); // Poveže podani identifikator ključa s podanim upravljalnikom funkcij Keymap.prototype.bind = function(key, func) ( this.map = func; ); // Odstrani vezavo za navedeni ID ključa Keymap.prototype.unbind = function(key) ( delete this.map; ); // Namesti ta objekt Keymap v podani element HTML Keymap.prototype.install = function(element) ( var keymap = this; // Definiraj funkcije obdelovalnika dogodkov function handler(event) ( return keymap.dispatch(event, element); ) // Nastavi, če (element.addEventListener) element.addEventListener("keydown", handler, false); else if (element.attachEvent) element.attachEvent("onkeydown", handler); // Ta metoda delegira obravnavo dogodkov na tipkovnici, pri čemer se opira na vezave Keymap.prototype.dispatch = function(event, element) ( // Na začetku ni imen modifikacijskih ključev ali imen ključev var modifiers = ""; var keyname = null; / / Konstruirajte modifikatorske nize iz znakov // v abecednem vrstnem redu if (event.altKey) modifikatorji += "alt_"; if (event.ctrlKey) modifikatorji += "ctrl_"; .metaKey) modifikatorji += "meta_"; if (event.shiftKey) modifikatorji += "shift_"; // Ime ključa je enostavno pridobiti, če je lastnost ključa // definirana s standardom DOM Level 3: if (event.key) keyname = event.key; // Za pridobitev imen funkcijskih ključev v Safariju in Chromu lahko // uporabite lastnost keyIdentifier else if(event.keyIdentifier && event.keyIdentifier.substring(0,2) !== "U+") keyname = event. keyIdentifier; // V nasprotnem primeru lahko uporabite lastnost keyCode // in prikažete kodo > ime pod else keymap.keyCodeToKeyName; // Če imena ključa ni bilo mogoče določiti, preprosto ignorirajte dogodek // in vrnite nadzor. if (!keyname) return; // Kanonični identifikator ključa je sestavljen iz imen modifikatorjev // in imena ključa z malimi črkami var keyid = modifiers + keyname.toLowerCase(); // Preverite, ali obstaja vezava za dani ID ključa var handler = this.map; if (obravnavalnik) ( // Če je obravnavalec za dani ključ, ga pokličite // Pokličite funkcijo obdelovalca var retval = handler.call(element, dogodek, keyid); // Če je obravnavalec vrnil false, prekličite privzeto / / in prekinitev mehurčkov if (retval === false) ( if (event.stopPropagation) event.stopPropagation(); // model DOM else event.cancelBubble = true; // model IE if (event.preventDefault) event.preventDefault (); / / DOM else event.returnValue = false; // IE ) // Vrni vrednost, prejeto od obdelovalca return retval; // Pomožna funkcija za pretvorbo identifikatorja ključa v kanonično obliko. // Identifikator "meta" moramo pretvoriti v "ctrl", da // identifikator Meta-C spremenimo v "Command-C" na Macih in v "Ctrl-C" na vseh ostalih. Keymap.normalize = function(keyid) ( keyid = keyid.toLowerCase(); // V male črke var words = keyid.split(/\s+|[\-+_]/); // Izberite modifikatorje var keyname = words . pop(); // keyname je zadnja beseda keymap.aliases || To je vzdevek words.sort(); // Vrnitev normaliziranega imena ) Keymap.aliases = ( // Preslikaj pogoste vzdevke ključev v njihova // "uradna" imena, ki se uporabljajo v DOM Level 3, in preslikaj kode ključev // v spodnja imena. Ime in vrednost morata biti sestavljena le iz malih črk "escape" :"esc", "return":"enter", "delete":"del", "ctrl":"control", "space":"preslednica", "ins":"insert" ); // Stara lastnost keyCode objekta dogodka keydown ni standardizirana // Toda naslednje vrednosti je mogoče uspešno uporabiti v večini brskalnikov in operacijskih sistemov. Keymap.keyCodeToKeyName = ( // Tipke z besedami ali puščicami na njih 8:"Backspace", 9:"Tab", 13:"Enter", 16:"Shift", 17:"Control", 18:"Alt", 19:"Premor", 20:"CapsLock", 27:"Esc", 32:"Preslednica", 33:"PageUp", 34:"PageDown", 35:"Konec", 36:"Domov", 37: "Levo", 38: "Gor", 39: "Desno", 40: "Dol", 45: "Vstavi", 46: "Del", // Številske tipke na glavni tipkovnici (ne na dodatni) 48 :"0",49:"1",50:"2",51:"3",52:"4",53:"5",54:"6",55:"7",56:" 8", 57:"9", // Tipke s črkami. Upoštevajte, da ni razlike med velikimi in malimi črkami 65: "A", 66: "B", 67: "C", 68: "D" , 69 :"E", 70:"F", 71:"G", 72:"H", 73:"I", 74:"J", 75:"K", 76:"L", 77 :"M", 78:"N", 79:"O", 80:"P", 81:"Q", 82:"R", 83:"S", 84:"T", 85:" U" , 86:"V", 87:"W", 88:"X", 89:"Y", 90:"Z", // Številske tipke na dodatni tipkovnici in tipke z ločili // (Ne podprto v Opera.) 96:"0",97:"1",98:"2",99:"3",100:"4",101:"5",102:"6",103: "7" ,104:"8", 105:"9",106:"Množi", 107:"Seštej", 109:"Odštej", 110:"Decimalno", 111:"Deli", // Funkcijske tipke 112:"F1", 113:"F2", 114:"F3", 115:"F4", 116:"F5", 117:"F6", 118:"F7", 119:"F8", 120: "F9", 121:"F10", 122:"F11", 123:"F12", 124:"F13", 125:"F14", 126:"F15", 127:"F16", 128:"F17 ", 129:"F18", 130:"F19", 131:"F20", 132:"F21", 133:"F22", 134:"F23", 135:"F24", // Tipke z ločili , za vnos, ki ne zahteva // držanja tipke Shift. // Vezaja ni mogoče uporabiti na prenosljiv način: FF vrne // isto kodo kot za tipko za odštevanje 59:";", 61:"=", 186:";", 187:"=", // Firefox in Opera vrneta 59.61 188:",", 190:".", 191:"/", 192:"`", 219:"[", 220:"\\", 221:"]", 222: """ );

Spodaj je primer uporabe predmeta Keymap:

Window.onload = function() ( var keymap = new KeyMap; // Ustvari nov objekt Keymap keymap.bind("ctrl+a", // Kombinacija Ctrl+A function(event, keyid) ( alert("Pritisnili ste: " + keyid) )); // Druga vezava Ctrl + Enter keymap.bind("ctrl+enter", function(event, keyid) ( alert("Kliknili ste: " + keyid) )); body); // Set objekt Keymap za celoten dokument);

Zadnja posodobitev: 1.11.2015

Vgrajeni upravljalci

V prejšnji temi smo si ogledali vgrajene obdelovalce dogodkov, ki so definirani v kodi elementa z uporabo atributov:

Čeprav ta pristop odlično deluje, ima kup slabosti:

Koda HTML je pomešana s kodo JavaScript, zaradi česar je aplikacijo težje razvijati, odpravljati napake in vzdrževati

Upravljalnike dogodkov lahko nastavite samo za elemente, ki so že ustvarjeni na spletni strani. Dinamično ustvarjeni elementi so v tem primeru prikrajšani za procesiranje dogodkov

Elementu za en dogodek je lahko priložen samo en obravnavalec

Ne morete odstraniti obdelovalca, ne da bi spremenili kodo

Lastnosti upravljalnika dogodkov

Težave, ki nastanejo pri uporabi vgrajenih obdelovalcev, so bile zasnovane tako, da jih rešijo lastnosti obdelovalcev. Tako kot imajo elementi html atribute za obdelovalce, lahko v kodi javascript za elemente DOM dobimo lastnosti obdelovalcev, ki ustrezajo atributom:

funkcija handler(e)( alert(e.type); ) document.getElementById("rect").onclick = handler;

Posledično moramo le vzeti lastnost onclick in ji dodeliti funkcijo, ki se uporablja kot upravljalnik. Zaradi tega je koda html ločena od kode javascript.

Omeniti velja tudi, da brskalnik samodejno posreduje objekt Event upravljalniku dogodkov, ki shrani vse informacije o dogodku. Zato lahko ta objekt prejmemo tudi v funkciji obdelovalca kot parameter.

Poslušalci dogodkov

Čeprav lastnosti obdelovalca rešujejo številne težave, povezane z uporabo atributov, tudi niso optimalen pristop. Drug način za nastavitev obdelovalcev dogodkov je uporaba poslušalcev.

Za delo s poslušalci dogodkov ima JavaScript objekt EventTarget, ki definira metodi addEventListener() (za dodajanje poslušalca) in removeEventListener() za odstranitev poslušalca. In ker so elementi html DOM tudi predmeti EventTarget, imajo tudi te metode. Pravzaprav poslušalci predstavljajo iste funkcije kot obdelovalci.

Metoda addEventListener() sprejme dva parametra: ime dogodka brez predpone on in funkcijo obravnave za ta dogodek. Na primer:

#rect( width:50px; height:50px; background-color:blue; ) var rect = document.getElementById("rect"); rect.addEventListener("klik", funkcija (e) ( alert(e.type); ));

To pomeni, da se v tem primeru dogodek klika ponovno obdela. Prav tako bi bilo mogoče uporabiti ime funkcije kot drugi parameter:

Funkcija handler(e)( alert(e.type); ) var rect = document.getElementById("rect"); rect.addEventListener("klik", handler);

Odstranjevanje poslušalca je podobno dodajanju:

Rect.removeEventListener("klik", handler);

Prednost uporabe poslušalcev je, da lahko za en dogodek nastavimo več funkcij:

Spremembe klikov = 0; function handlerOne(e)( alert(e.type); ) function handlerTwo(e)( clicks++; var newNode = document.createElement("p"); newNode.textContent = "prišlo je do klika" + kliki; document.body. appendChild (newNode); var rect = document.getElementById("rect"); // pripnite prvi obravnavo rect.addEventListener("klik", handlerOne); // pripni drugo obravnavo rect.addEventListener("klik", handlerTwo);

Od avtorja: potem ko je spletna stran naložena in popolnoma pripravljena, se v JavaScriptu sproži cela kaskada dogodkov, ki se še poveča, ko začne uporabnik na tak ali drugačen način komunicirati s stranjo. Dogodki lahko vključujejo nalaganje strani, pomikanje po njej, klik gumba ali celo izpolnjevanje obrazca. Če želite sprožiti dogodke v JavaScriptu, potrebujete posebno kodo, ki jo oblikujete in napišete sami, s čimer zgradite 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 okrog spletne strani, ki so del vmesnika brskalnika). Med take dogodke spadajo tudi tista dejanja, ki jih stran izvaja neodvisno od uporabnika. Ti dogodki vključujejo spreminjanje velikosti okna, drsenje strani ter nalaganje in odstranjevanje vsebine.

Dogodki tipkovnice, miške in zaslona na dotik: sprožijo se, ko uporabnik pritisne ali spusti tipke na tipkovnici, upravlja miško, upravlja sledilno ploščico ali upravlja zaslon na dotik.

Osredotočenost in hendikep dogodki. Večinoma povezano z obrazci: vnosno polje "dobi fokus", ko je uporabnik pripravljen na interakcijo z njim. Drugi dogodki sledijo oddajam obrazcev, spremembam vrednosti polj obrazcev itd.

JavaScript. Hiter začetek

Mutacijski dogodki in opazovalci. Spremenjenim elementom se sledi, ko se spremeni struktura DOM: na primer, ko so elementi na strani vstavljeni ali odstranjeni s skriptom.

Vezava obdelovalca dogodkov

Posebna koda, ki se sproži samo za določen element DOM, ustvari obravnavo dogodkov. Obdelovalnik dogodkov v JS lahko ustvarite na tri načine:

1. Standardni upravljalnik dogodkov HTML prek atributov

Najstarejša metoda vezave dogodkov, ena najpogostejših do danes. Metoda uporablja posebne atribute v označevanju. Npr.

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

V zgornjem primeru, potem ko polje prejme fokus in se uporabnik premakne k izpolnjevanju naslednjega polja (na primer z uporabo TAB ali navadnega klika), bo element poklical funkcijo checkName, ki je napisana v JS.
Standardnih obdelovalcev dogodkov HTML ni priporočljivo uporabljati v sodobnem razvoju, predvsem zaradi dejstva, da je funkcionalnost pomešana z oznakami, kar otežuje delo in odpravljanje napak kode.

2. Standardni obdelovalci dogodkov v DOM

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

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

uporabniško ime. onblur = checkName;

JavaScript. Hiter začetek

Naučite se osnov JavaScripta s praktičnim primerom, kako ustvariti spletno aplikacijo.

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

3. Poslušalci dogodkov

Sodoben način dodajanja obdelovalnika dogodkov, ki vam omogoča veriženje več dogodkov in funkcij:

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

var uporabniško ime = dokument. getElementbyId("uporabniško ime");

uporabniško ime. addEventListener ("blur", checkName, false) ;

Logična vrednost na koncu označuje, ali naj se dogodek zajame. 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("blur", function() ( // dejanja za sprožitev dogodka ))

Vsi dogodki niso enaki

Pomembno je razumeti, da vseh dogodkov ni mogoče obravnavati enako. Dogodka drsenja in spreminjanja velikosti se sprožita zelo pogosto, zato morate z njimi delati zelo previdno, da ne zmanjšate hitrosti skripta. Enako velja za na videz neškodljive dogodke, kot je vnos. Učinkovitost skripta se lahko močno poslabša, če se poskuša nenehno odzivati na pogosto sprožen vnosni 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 spremembam višine elementa (ko se vsebnik v odzivnem dizajnu zoži, se besedilo v njem prerazporedi in elementi postanejo daljši). Kljub temu obstajajo načini za sledenje spremembam, o tem bom govoril v naslednjem članku.

Pripnite dogodke na prave elemente

Dogodek onclick velja za številne elemente, vključno s povezavami. Obstaja splošno pravilo - povezavam ni priporočljivo pripeti kode JS. S klikom na povezavo bi moral uporabnik biti preusmerjen na drugo področje spletnega mesta ali na sidro. Če potrebujete element uporabniškega vmesnika, s katerim lahko nekaj spremenite na isti strani, potem je gumb primeren za vas. Na gumb lahko preprosto dodate JavaScript.

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 zapletenim skriptom, kjer koli je to mogoče. Vendar CSS ne naredi vsega. Dobro se obnese z :hover (v mnogih primerih zamenja dogodke dotika), v nekaterih primerih pa lahko zamenja tudi dogodek klika z :target. Animacija CSS se samodejno zažene, ko se stran naloži, obstajajo pa tudi posebna stanja CSS, ki jih je mogoče sprožiti za elemente, kot so izbirni gumbi. Vendar je vse, kar je bolj zapleteno, običajno najbolje prepustiti JavaScriptu.

Če še niste opazili, je večina aplikacij in spletnih mest precej dolgočasnih, ko stojijo sami. Pozdravijo vas s pompoznim in bleščečim vmesnikom, a vtis tega hitro zbledi, če z njimi ne začnete komunicirati:

Razlog za to je zelo preprost. Obstajajo aplikacije, ki se odzivajo na vaša dejanja. Obstaja nekaj spodbud, ki vas prisilijo, da zaženete aplikacije in jih začnete uporabljati. Vse ostalo, kar naredijo po tem, je v veliki meri odvisno od tega, kaj jim naročite. Tukaj stvari postanejo res zanimive.

Aplikacijam poveste, kaj morajo storiti, tako da se odzovejo na nekaj znanega, kar se imenuje dogodek. V tem članku si bomo ogledali, kaj so dogodki in kako jih je mogoče uporabiti.

Kaj so dogodki?

Na splošno lahko vse, kar ustvarite, modelirate z naslednjo izjavo:

Obstaja nešteto stvari, ki jih lahko storite, da zapolnite vrzeli v tej izjavi. Prvi prostor vam pove, da se nekaj dogaja. Drugi prostor opisuje reakcijo na to. Tu je nekaj primerov izpolnjevanja te vloge:

Ta univerzalni model velja za vse kode, ki smo jih sestavili. Ta model velja tudi za vso kodo, ki jo je vsak razvijalec/oblikovalec, ki ga poznate, kdaj napisal za svoje aplikacije.

Tega modela ni mogoče zaobiti, tako da... nima smisla poskušati. Namesto tega se morate poglobiti v to zelo uporabno stvar, znano kot dogodek.

Dogodek ni nič drugega kot signal. Poroča, da se je pravkar nekaj zgodilo. To je lahko klik z miško. To je lahko pritisk tipke na tipkovnici. To lahko spremeni velikost vašega okna. Lahko preprosto, da je bil vaš dokument pravkar prenesen.

Morate razumeti, da je ta signal mogoče zgraditi na sto različnih načinov v JavaScriptu ... ali v nečem po meri, kar ste ustvarili samo za svojo aplikacijo v enem samem primeru.

Vrnimo se k našemu modelu. Dogodki sestavljajo prvo polovico izjave:

Dogodki določajo, kaj se zgodi. Pošiljajo signal. Drugi del modela določa reakcijo na dogodek:

Konec koncev, kaj nam pomaga signal, če na drugi strani ni nikogar, ki bi ga čakal in nato ustrezno ukrepal?! V redu – zdaj, ko dobro razumete, kaj so dogodki, si poglejmo, kako dogodki živijo v rezervatu, znanem kot JavaScript.

Dogodki in JavaScript

Glede na pomembnost dogodkov ni presenetljivo, da JavaScript ponuja številna orodja za delo z njimi. Za delo z dogodki morate storiti dve glavni stvari:

Sledenje dogodkom;
Reakcija na dogodke.

Ta dva koraka se zdita precej preprosta, vendar ne pozabite, da imamo opravka z JavaScriptom. Preprostost je le dimna zavesa, ki lahko prikrije resne težave, ki jih boste dobili, če boste ukrepali napačno. Mogoče sem preveč dramatičen? No, ugotovimo skupaj.

1. Sledenje dogodkom

Če sem iskren, sem nekoč pregledal vse, kar počnete v aplikaciji za zaznavanje dogodkov. Včasih vaša aplikacija samodejno zazna dogodek, na primer pri nalaganju. Včasih je dogodek definiran kot rezultat vaše interakcije z aplikacijo.

Treba je opozoriti, da je aplikacija nenehno bombardirana z dogodki, ne glede na to, ali jih morate zajeti ali ne. Naša naloga je, da aplikaciji naročimo, naj sledi samo tistim dogodkom, ki jih potrebujemo.

Trdo delo sledenja dogodkom, ki jih potrebujemo, opravi funkcija, imenovana addEventListener. Ta funkcija je odgovorna za nenehno opozarjanje in obveščanje drugih delov vaše aplikacije, ko pride do zanimivega dogodka.

Način uporabe te funkcije izgleda takole:

source.addEventListener(eventName, eventHandler, false);

Analizirajmo, kaj pomeni vsak del te funkcije.

Vir

AddEventListener pokličete za element ali objekt, na katerem želite poslušati dogodke. Običajno je to element DOM, lahko pa je tudi dokument, okno ali kateri koli drug predmet, ki lahko ustvarja dogodke.

Ime dogodka

Prvi argument, ki ga posredujete funkciji addEventListener, je ime dogodka, ki ga želite poslušati. Celoten seznam dogodkov, s katerimi lahko komunicirate, je predolg, da bi ga navedli tukaj (preverite to stran), vendar so nekateri najpogostejši dogodki, s katerimi se boste srečali, naslednji:

Dogodek	Dogodek se dogaja ...
kliknite	... ko pritisnete in spustite primarni gumb miške/sledilne ploščice/itd.
mousemove	... ko se kazalec miške premakne.
miška	... ko se z miško pomaknete nad element. Ta dogodek se običajno uporablja pri izbiri predmetov!
mouseout	... ko kazalec miške zapusti območje elementa.
dblclick	... ko dvokliknete z miško.
DOMContentLoaded	... ko je DOM vašega elementa popolnoma naložen.
obremenitev	...ko je vaš celoten dokument (DOM, dodatni elementi: slike, skripte itd.) v celoti naložen.
keydown	... ko pritisnete tipko na tipkovnici.
keyup	... ko spustite tipko na tipkovnici.
drsenje	... ko se premikate po elementu.
kolo & DOMMuseScroll	... vsakič, ko uporabite kolesce miške za pomikanje gor ali dol.

V naslednjih člankih si bomo podrobneje ogledali številne od teh dogodkov. Zaenkrat bodite pozorni le na dogodek klika, saj ga bomo uporabili kasneje.

Obravnavalec dogodkov

Kot drugi argument morate podati funkcijo, ki bo poklicana, ko bo dogodek zajet. Ta funkcija se imenuje obravnavalnik dogodkov. Spodaj vam bom podrobno povedal o tem.

Ujeti ali ne ujeti, to je vprašanje!

Zadnji argument je lahko resničen ali napačen.

Povzemimo vse našteto

Zdaj, ko ste seznanjeni s funkcijo addEventListener, povzamemo vse z enim primerom iz resničnega sveta:

document.addEventListener("klik", changeColor, false);

V tem primeru je naša funkcija addEventListener pripeta objektu dokumenta. Ko je zaznan dogodek klika, kot odgovor na ta dogodek pokliče funkcijo changeColor (znano tudi kot obravnavalec dogodkov). To nas približa konceptu reakcije na dogodke, o katerem bomo govorili v naslednjem razdelku.

2. Odziv na dogodke

Kot je opisano v prejšnjem razdelku, sledenje dogodkom (poslušanje) obravnava funkcija addEventListener. Ko je dogodek zajet, ga mora obravnavati obdelovalec dogodkov. Nisem se šalil, ko sem prej omenil, da obravnavalec dogodkov ni nič drugega kot funkcija:

funkcija normalAndBoring() ( // res so mi všeč vse različne stvari, ki lahko gredo v to funkcijo! )

Edina razlika med standardno funkcijo in funkcijo, določeno kot obravnavalec dogodkov, je ta, da je obravnavalec dogodkov posebej poklican po imenu v klicu addEventListener:

document.addEventListener("klik", changeColor, false); funkcija changeColor() ( // pomemben sem!!! )

Vsaka koda, ki jo postavite v obravnavo dogodkov, bo izvedena, ko funkcija addEventListener zajame želeni dogodek. Precej preprosto je!

Preprost primer

Najboljši način za razumevanje tega, kar smo se pravkar naučili, je, da to vidimo v popolnoma delujoči kodi. Če želite, da se premikamo vzporedno, v svoj dokument HTML dodajte naslednje oznake in kodo:

Kliknite kjerkoli! document.addEventListener("klik", changeColor, false); funkcija changeColor() (document.body.style.backgroundColor = "#FFC926"; )

Če si na začetku ogledate dokument v brskalniku, boste videli le prazno stran:

Vse pa se spremeni, če kliknete kjer koli na strani. Ko to storite, se bo barva ozadja vaše strani spremenila iz bele v svetlo rumeno.

Razlog za to je precej lahko razumeti. Poglejmo kodo:

Klic addEventListener je enak temu, kar smo že obravnavali, zato preskočimo ta korak. Namesto tega si oglejte obravnavo dogodkov changeColor:

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

Ta funkcija se pokliče, ko je na dokumentu zaznan dogodek klika. Ko je ta funkcija poklicana, nastavi barvo ozadja elementa telesa na svetlo rumeno. Če to povežemo z izjavo, ki smo si jo ogledali na samem začetku, bomo videli, da bi ta primer izgledal takole:

Če razumete bistvo tega, kar se dogaja, potem je to super! Pravkar ste spoznali enega najpomembnejših konceptov, s katerimi se boste srečali pri programiranju. Vendar še nismo končali. Obdelovalcev dogodkov ne bomo izpustili tako zlahka, zato si poglejmo še eno stvar.

Argumenti dogodka in vrsta dogodka

Upravljavec dogodkov naredi več kot le klic, ko je dogodek zajet s funkcijo sledenja dogodkom. Omogoča tudi dostop do glavnega predmeta dogodka prek svojih argumentov. Za preprost dostop do tega predmeta dogodka moramo spremeniti podpis upravljalnika, da bo podpiral te argumente.

funkcija myEventHandler(e) ( // elementi obdelovalca dogodkov )

Za zdaj je upravljalnik dogodkov še vedno dobra stara funkcija. Ampak to potrebujemo, funkcijo, ki sprejme en argument... argument dogodka!

Za argument lahko uporabite kateri koli veljaven identifikator, vendar imam na splošno raje e, ker to počnejo vsi kul otroci. Tehnično ni nič narobe, če dogodek definiramo na naslednji način.