Sündmuste tüübid

Veebi algusaegadel pidid veebiarendajad tegelema vaid vähese hulga sündmustega: “laadimine”, “klõps”, “hiire liigutamine” ja muud. Neid üsna vanu sündmuste tüüpe toetavad hästi kõik brauserid. Veebiplatvormi arenedes lisati võimsamad rakendusliidesed ja sündmuste arv suurenes oluliselt. Puudub standard, mis määratleks sündmuste täieliku komplekti, ja toetatavate sündmuste arv kasvab jätkuvalt kiiresti. Need uued sündmused on määratletud kahes järgmises allikas.

„DOM Level 3 Events” spetsifikatsioon, mida hakati pärast mitmeaastast stagnatsiooni W3C konsortsiumi egiidi all aktiivselt välja töötama.

Paljud uued rakendusliidesed HTML5 spetsifikatsioonis (ja sellega seotud täiendavad spetsifikatsioonid) määratlevad uusi sündmusi, mida kasutatakse näiteks sirvimisajaloo haldamiseks, pukseerimisfunktsiooniks, dokumentidevaheliseks sõnumivahetuseks ning heli ja video esitamiseks.

Pange tähele, et paljusid neist uutest sündmuste tüüpidest ei toetata veel laialdaselt ja need on määratletud standarditega, mis on alles väljatöötamisetapis. Sündmused, mida oma veebirakendustes kõige sagedamini kasutate, on tavaliselt pikaajalised sündmused, mida toetavad kõik brauserid: hiiresündmused, klaviatuurisündmused, HTML-vormide sündmused ja aknasündmused. Me kaalume neid sündmusi.

Dokumentide laadimise sündmused

Enamik veebirakendusi vajab tingimata veebibrauserit, et teavitada neid, kui dokumendi allalaadimine on lõppenud ja valmis sellega toiminguid tegema. Seda eesmärki täidab akna objekti laadimissündmus. Laadimissündmus käivitatakse alles pärast seda, kui dokument ja kõik selle pildid on täielikult laaditud. Skripte saab aga tavaliselt käivitada kohe pärast dokumendi sõelumist, enne piltide laadimist. Saate märkimisväärselt lühendada veebirakenduse käivitusaega, kui hakkate skripte täitma muudel sündmustel peale laadimise.

Sündmus DOMContentLoaded tõstetakse esile, kui dokument on laaditud, sõelutud ja kõik edasilükatud skriptid on käivitatud. Sel hetkel võib asünkroonimisatribuudiga piltide ja skriptide laadimine jätkuda, kuid dokument ise on toiminguteks valmis. Seda sündmust tutvustati esmakordselt Firefoxis ja seejärel võtsid selle kasutusele kõik teised brauseritootjad, sealhulgas Microsoft, kes lisas selle sündmuse toe IE9-s. Vaatamata nimes olevale DOM-i eesliitele ei kuulu see sündmus DOM-i 3. taseme sündmuste standardisse, kuid see on standarditud HTML5 spetsifikatsiooniga.

Dokumendi laadimisel muutub atribuudi document.readyState väärtus. Iga selle atribuudi väärtuse muutusega IE-s kaasneb dokumendiobjekti readystatechange sündmus, nii et IE-s saab seda sündmust kasutada täieliku oleku saabumise määramiseks. HTML5 spetsifikatsioon standardiseerib readystatechange sündmuse, kuid nõuab selle käivitumist vahetult enne laadimissündmust, mistõttu pole päris selge, milline on readystatechange sündmuse eelis laadimissündmuse ees.

Allolev näide määratleb funktsiooni whenReady(). Funktsioon, mis edastatakse funktsioonile whenReady(), kutsutakse (objekti Document meetodina) kohe, kui dokument on operatsioonideks valmis. WhenReady() ootab sündmusi DOMContentLoaded ja readystatechange ning kasutab laadimissündmust ainult tagavaraks juhuks, kui seda kasutatakse vanemates brauserites, mis ei toeta kahte esimest sündmust. Funktsiooni whenReady() kasutatakse mõne järgmise stsenaariumi korral:

/* Andke oma funktsioonist mööda whenReady() ja see kutsub seda (kui dokumendiobjekti meetodit), kui dokumendi sõelumine on lõpetatud ja toimingute tegemiseks valmis. Registreeritud funktsioonid kutsutakse välja esimesel DOMContentLoaded-, readystatechange- või laadimissündmusel. Kui dokument on valmis ja kõik funktsioonid on välja kutsutud, kutsub whenReady() kohe kõik funktsioonid, mis sellele edastati. */ var whenReady = (function() ( // Selle funktsiooni tagastab funktsioon whenReady() var funcs = ; // Funktsioonid, mida tuleks sündmuse korral kutsuda var ready = false; // Saab väärtuse true, kui käitleja funktsiooni kutsutakse // Sündmuste töötleja , mida kutsutakse kohe, kui dokument // on valmis toiminguid sooritama funktsioon handler(e) ( // Kui töötleja on juba välja kutsutud, tagasta lihtsalt juhtelement if (ready) return; / / Kui see on valmisolekumuutuse sündmus ja olek on saanud väärtuse, // suurepärane alates "täielik" tähendab, et dokument pole veel valmis, kui (e.type==="readystatechange" && document.readyState !== "täielik" ) return // Kõigi registreeritud funktsioonide kutsumine // Pange tähele, et igaüks on siin. Funcs.length väärtust kontrollitakse üks kord, kui üks väljakutsutud funktsioonidest // registreerib lisafunktsioone jaoks (var i = 0). i.

Hiiresündmused

Hiirega on seotud päris palju sündmusi. Kõik need on loetletud allolevas tabelis. Kõik hiiresündmused, välja arvatud mouseenter ja mouseleave mull. Linkidel ja vormi esitamise nuppudel toimuvatel klõpsusündmustel on vaiketoimingud, mida saab tühistada. Teoreetiliselt on võimalik kontekstimenüü sündmust tühistada ja kontekstimenüü ilmumist takistada, kuid mõnel brauseril on sätted, mis muudavad selle sündmuse tühistamatuks.

JavaScripti hiire sündmused Tüüp Kirjeldus

klõpsa	Kõrgetasemeline sündmus, mis tekib siis, kui kasutaja vajutab ja vabastab hiirenupu või muul viisil elemendi aktiveerib.
kontekstimenüü	Enne kontekstimenüü kuvamist tõstatatud tühistatav sündmus. Praegused brauserid kuvavad paremklõpsamisel kontekstimenüü, nii et seda sündmust saab kasutada ka klõpsamissündmusena.
dblclick	Käivitub, kui kasutaja topeltklõpsab.
hiire alla	Käivitub, kui kasutaja vajutab hiirenuppu.
hiirelipp	Käivitub, kui kasutaja vabastab hiirenupu.
hiire liigutamine	Käivitub, kui kasutaja liigutab hiirekursorit.
kursorit	Käivitub, kui hiirekursor asetatakse elemendi kohale. Atribuut relatedTarget (või IE-s fromElement) määrab elemendi, millest hiirekursor teisaldati.
hiire väljas	Käivitub, kui hiirekursor elemendist lahkub. Atribuut relatedTarget (või IE-s toElement) määrab elemendi, millele hiirekursor viidi.
hiiresisestaja	Sarnaselt kursoriga, kuid ei hüppa üles. Esmalt tutvustati IE-s ja standardiseeriti HTML5-s, kuid kõik brauserid seda veel ei toeta.
hiir jätab	Sarnaselt mouseout'iga, kuid ei hüppa üles. Esmalt tutvustati IE-s ja standardiseeriti HTML5-s, kuid kõik brauserid seda veel ei toeta.

Hiire sündmuste töötlejatele edastatud objektil on atribuudid clientX ja clientY, mis määravad kursori koordinaadid akna suhtes. Nende teisendamiseks dokumendikoordinaatideks tuleb neile lisada akna kerimisribade asukohad.

Omadused altklahv, ctrlklahv, metaKey Ja ShiftKey määrata erinevate muuteklahvide olekud, mida sündmuse toimumise ajal all hoida võiks: nende abil saab eristada lihtsat klõpsu klõpsust näiteks Shift-klahvi vajutamisel.

Nupu atribuut määrab, millist hiire nuppu sündmuse ajal all hoiti. Kuid erinevad brauserid kirjutavad sellele atribuudile erinevaid väärtusi, mistõttu on seda raske kaasaskantavalt kasutada.

Mõned brauserid käivitavad klikisündmuse ainult siis, kui klõpsate vasakpoolset nuppu. Seega, kui teil on vaja käsitleda teiste nuppude klõpse, peaksite kasutama hiire alla ja hiire ülestõstmise sündmusi. Kontekstimenüü sündmus annab tavaliselt märku, et paremklõps on tehtud, kuid nagu eespool märgitud, ei ole selle sündmuse töötlejatel alati võimalik kontekstimenüü ilmumist takistada.

Allolev näide demonstreerib funktsiooni drag(), mis hiire allapoole suunatud sündmuste töötlejast välja kutsudes võimaldab kasutajal hiirega lohistada absoluutselt paigutatud dokumendielemente. Funktsioon drag() töötab nii DOM-i kui ka IE sündmuste mudelitega.

Funktsioonil drag() on kaks argumenti. Esimene on lohistatav element. See võib olla element, millel hiire allalaskmise sündmus toimus, ja element, mis seda sisaldas (näiteks võite lasta kasutajal lohistada hiirega elemendil, mis näeb välja nagu akna tiitliriba, ja lohistada sisaldavat elementi, mis näeb välja nagu aken) . Kuid igal juhul peab see olema dokumendielement, mis on absoluutselt positsioneeritud CSS-i asukoha atribuudi abil. Teine argument on sündmuse objekt, mis on saadud hiire allakäigu sündmusega:

/* drag() – absoluutselt paigutatud HTML-elementide lohistamine. See funktsioon tuleb kutsuda onmousedown sündmuste käitlejast. Hilisemad hiire liigutamise sündmused põhjustavad määratud elemendi teisaldamise. Mouseup sündmus viib liikumise lõpule. See teostus töötab nii standardsetes kui ka IE sündmuste mudelites. Kasutab funktsiooni getScrollOffsets(). Argumendid: elementToDrag: element, mis sai hiire allakäigu sündmuse või sisaldava elemendi. Sellel elemendil peab olema absoluutne paigutus. Selle atribuutide style.left ja style.top väärtused muutuvad, kui kasutaja liigutab hiirekursorit. sündmus: sündmuse objekt, mille on vastu võtnud hiire allapoole suunatud sündmuste käitleja. */ funktsioon drag(elementToDrag, event) ( // Teisendage hiirekursori algkoordinaadid dokumendi koordinaatideks var scroll = getScrollOffsets(); // Abifunktsioon, mis on deklareeritud allpool var startX = event.clientX + scroll.x; var startY = event clientY + scroll.y // teisaldatava elemendi algsed koordinaadid // Kuna elementToDrag on absoluutse positsioneerimisega, eeldatakse, et selle atribuut offsetParent viitab dokumendile body var origX = elementToDrag.offsetLeft // Leia hiirega allapoole jääva sündmuse punkti ja elemendi ülemise vasaku nurga vaheline kaugus, // mis järgneb mousemove ja mouseup sündmustele mousedown sündmus if (document.addEventListener) ( // Sündmuse standardmudel // Registreeri dokumendis pealtkuulavad töötlejad.addEventListener("mousemove", moveHandler, true); document.addEventListener("hiireup", upHandler, true); ) else if (document.attachEvent) ( // IE sündmuste mudel IE5-8 jaoks // IE sündmuste mudelis püütakse sündmused // elemendi setCapture() meetodi kutsumisega. elementToDrag.setCapture(); elementToDrag.attachEvent( "onmousemove", moveHandler); elementToDrag.attachEvent("onmouseup", upHandler) // Tõlgendada hiire sündmuse jäädvustamise kaotust kui hiiresündmust elementToDrag.attachEvent("onlosecapture", upHandler); ei edastata teistele käitlejatele if (event) .stopPropagation) event.stopPropagation(); // Standardmudel else event.cancelBubble = true; // IE // Vaiketoimingute käivitamise takistamine. if (event.preventDefault) event.preventDefault(); // Standardmudel else event.returnValue = false; // IE /* See töötleja peatab hiire liigutamise sündmused, mis toimuvad elemendi lohistamise ajal. Ta vastutab elemendi liigutamise eest. */ funktsioon moveHandler(e) ( if (!e) e = window.event; // IE sündmuse mudel // Liigutage element hiirekursori asendisse, võttes arvesse kerimisriba asukohti // ja nihkeid esialgse klõpsu suhtes. var scroll = getScrollOffsets( ); elementToDrag.style.left = (e.clientX + scroll.x - deltaX) + "px" elementToDrag.style.top = (e.clientY + scroll.y - deltaY) + "px"; ; sündmuse edasine levik (e.stopPropagation) e.stopPropagation(); */ funktsioon upHandler(e) ( if (!e) e = window.event; // IE sündmusemudel // Eemaldage pealtkuulavad sündmuste käitlejad. if (document.removeEventListener) ( // DOM-i sündmusemudel document.removeEventListener("hiir" , upHandler, true); document.removeEventListener("mousemove", moveHandler, true) else if (document.detachEvent) ( // IE 5+ sündmusemudel elementToDrag.detachEvent("onlosecapture", upHandler); elementToDrag.detachEvent( "onmouseup" ", upHandler); elementToDrag.detachEvent("onmousemove", moveHandler); elementToDrag.releaseCapture(); // Ja peatage sündmuse edasine levimine. e.cancelBubble = true; // IE ) ) // Tagastab kerimisriba praegused asukohad objektifunktsiooni getScrollOffsets(w) atribuutidena x ja y ( // Kasutage määratud akent või praegust akent // kui funktsiooni kutsutakse ilma argumendita w = w | | aken; // Järgmine meetod töötab kõigis brauserid, välja arvatud IE versioon 8 ja vanemad, kui (w.pageXOffset != null) tagastavad (x: w.pageXOffset, y:w.pageYOffset); // IE (ja teiste brauserite) jaoks standardrežiimis var d = w.document; if (document.compatMode == "CSSICompat") tagastab (x: d.documentElement.scrollLeft, y: d.documentElement.scrollTop); // Ühilduvusrežiimis olevate brauserite puhul tagastamine ( x: d.body.scrollLeft, y: d.body.scrollTop ); )

Järgmine väljavõte näitab, kuidas kasutada HTML-failis funktsiooni drag().

Lohista mind

See on test. Kontrolli, kontrolli, kontrolli.

Siin on kõige olulisem pesastatud elemendi atribuut onmousedown. Pange tähele, et see kasutab atribuuti this.parentNode. See tähendab, et kogu konteineri element liigub.

Tekstisisestussündmused

Brauserid toetavad kolme pärandklaviatuuri sisendsündmust. Klahvide allavajutamise ja klahvivajutuse sündmused on madala taseme sündmused ja neid käsitletakse järgmises jaotises. Klahvivajutuse sündmus on aga kõrgetasemeline sündmus, mis teatab prinditava märgi sisestamisest.

DOM-i 3. taseme sündmuste mustandspetsifikatsioon määratleb üldisema tekstisisestussündmuse, mis käivitatakse vastuseks tekstisisendile, olenemata sellest, kuidas see sisestati.

Pakutud tekstisisestussündmuse ja praegu rakendatud tekstisisestussündmusega edastatakse lihtne sündmuseobjekt, millel on sisestatud teksti salvestav andmeatribuut. (Teine spetsifikatsioonis pakutud atribuut inputMethod peaks määrama sisendi allika, kuid seda pole veel rakendatud.) Klaviatuurisisestuse puhul sisaldab andmeatribuut tavaliselt ühte märki, kuid muudest allikatest pärit sisestuse korral võib see sisaldada palju märke .

Klahvivajutuse sündmusega läbitud sündmuseobjektil on keerulisem korraldus. Klahvivajutuse sündmus tähistab ühe märgi sisestamist. See märk sisaldub sündmuseobjektis numbrilise Unicode'i koodipunkti väärtusena ja selle stringiks teisendamiseks peate kasutama meetodit String.fromCharCode(). Enamikus brauserites salvestatakse sisestatud märgi koodipunkt sündmuseobjekti atribuudis keyCode. Ajaloolistel põhjustel kasutab aga seda atribuuti hoopis Firefox charCode.

Enamikus brauserites käivitatakse klahvivajutuse sündmus ainult siis, kui sisestatakse prinditav märk. Kuid Firefoxis tõstatatakse klahvivajutuse sündmus ka mitteprinditavate märkide puhul. Nende kahe juhtumi eristamiseks (ja mitteprinditavate märkide ignoreerimiseks) saate kontrollida, kas sündmuseobjekti atribuut charCode on olemas ja kas see sisaldab väärtust 0.

Märgi sisestamise vältimiseks saab tekstisisestuse, tekstisisestuse ja klahvivajutuse sündmused tühistada. See tähendab, et neid sündmusi saab kasutada sisendi filtreerimiseks. Näiteks saate takistada tähemärkide sisestamist numbriliste andmete sisestamiseks mõeldud väljale.

Allolev näide demonstreerib JavaScripti moodulit, mis rakendab seda tüüpi filtreerimist. See otsib elemente täiendava (mittestandardse) atribuudiga data-allowed-chars. Registreerib tekstisisestuse, tekstisisestuse ja klahvivajutuse sündmuste töötlejad kõigi leitud elementide jaoks ning piirab sisendit atribuudis data-allowed-chars määratud regulaaravaldise tähemärkidega:

/* Elementide sisendi filtreerimine See moodul leiab dokumendist kõik elemendid, millel on atribuut "data-allowed-chars". Registreerib nende elementide jaoks klahvivajutuse, tekstisisestuse ja tekstisisestuse sündmuste käitlejad, et piirata sisestamiseks lubatud tähemärkide kogumit, et lubada sisestada ainult atribuudis määratud märke. Kui elemendil on ka atribuut "data-messageid", tõlgendatakse selle atribuudi väärtust teise dokumendielemendi ID-na. Kui kasutaja sisestab kehtetu märgi, muudetakse määratud ID-ga element nähtavaks. Kui kasutaja sisestab kehtiva märgi, on sõnumielement peidetud. Selle teate elemendi eesmärk on kuvada selgitus, miks kasutaja sisend tagasi lükati. Selle disain tuleb rakendada CSS-i abil, nii et see oleks esialgu nähtamatu. */ whenReady(function () ( // Selle funktsiooni kutsumine, kui dokument on laaditud // Leia kõik elemendid var inputelts = document.getElementsByTagName("input"); // Sirvige neid 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"; } });

Allpool on seda moodulit kasutava HTML-märgistuse näidis:

Palun täitke vorm.

Kontaktandmed Nimi Ainult tähed
Ainult telefoninumbrid
E-post Vale email

Allolev joonis näitab selle vormi kasutamist. Siia sisestasin pärast nime sisestamist numbri, mis blokeeriti automaatselt ja ilmus hoiatusteade:

Klahvivajutuse ja tekstisisestuse sündmused käivitatakse vahetult enne uue teksti sisestamist sisendfookusega dokumendielementi, nii et nende sündmuste käitlejad saavad sündmuse tühistamisega takistada teksti sisestamist.

Brauserid rakendavad ka sisestussündmust, mis käivitatakse, kui elementi teksti sisestatakse. Seda sündmust ei saa tühistada ja sellele vastav sündmuseobjekt ei sisalda teavet sisestatud teksti kohta – see lihtsalt annab teada, et elemendi tekstisisu on muutunud. Kui soovite näiteks tagada, et sisestatakse ainult suurtähti, saate määrata sisestussündmuste töötleja, nagu allpool näidatud:

Sisendsündmus on standardiseeritud HTML5 spetsifikatsioonis ja seda toetavad kõik kaasaegsed brauserid peale IE. Sarnase efekti saab IE-s saavutada tekstisisestuselemendi väärtuse atribuudi muutuse tuvastamisega kohandatud sündmuse abil vara vahetus.

Klaviatuurisündmused

Klahvide allavajutamise ja klahvivajutuse sündmused suurendatakse, kui kasutaja vajutab või vabastab klaviatuuri klahvi. Need luuakse muuteklahvide, funktsiooniklahvide ja tähtnumbriliste klahvide jaoks. Kui kasutaja hoiab klahvi piisavalt kaua all, et käivitada automaatne kordusrežiim, luuakse enne klahvivajutuse toimumist palju klahvivajutuse sündmusi.

Nendele sündmustele vastaval sündmuseobjektil on atribuut keyCode numbrilise väärtusega, mis identifitseerib vajutatud klahvi. Prinditavaid märke genereerivate võtmete puhul sisaldab atribuut keyCode üldiselt Unicode'i koodipunkti, mis vastab võtmel kujutatud põhimärgile. Täheklahvid genereerivad alati võtmekoodi väärtused, mis vastavad suurtähtedele, olenemata tõstuklahvi olekust, kuna need on klahvidel kujutatud märgid.

Samuti genereerivad numbriklahvid alati võtmekoodi väärtused, mis vastavad klahvidel kujutatud numbrimärkidele, isegi kui hoidsite kirjavahemärkide sisestamiseks all tõstuklahvi. Võtmete puhul, mis ei vasta prinditavatele tähemärkidele, on atribuudil keyCode mõni muu väärtus. Neid võtmekoodi atribuutide väärtusi pole kunagi standardiseeritud. Kuid need ei erine brauserite vahel nii palju, et kaasaskantavust ei saaks saavutada.

Nagu hiiresündmuste objektidel, on ka klaviatuurisündmuste objektidel atribuudid altKey , ctrlKey , metaKey ja shiftKey, mille väärtus on tõene, kui vastavat muuteklahvi hoiti sündmuse toimumise ajal all.

Klahvide allalaadimise ja klahvivajutuse sündmused ning atribuut keyCode on olnud kasutusel üle kümne aasta, kuid neid pole kunagi standarditud. DOM-i 3. taseme sündmuste mustand standardiseerib klahvivajutuse ja klahvivajutuse sündmuste tüübid, kuid ei standardiseeri atribuuti KeyCode. Selle asemel määratleb see uue atribuudi, võtme, mis peaks sisaldama võtme nime stringina. Kui võti vastab prinditavale märgile, peab võtme atribuut sisaldama seda prinditavat märki. Funktsiooniklahvide puhul peab võtme atribuut sisaldama selliseid väärtusi nagu F2, Home või Left.

Selle kirjutamise ajal ei olnud DOM-i 3. taseme sündmuste standardiga määratletud võtmeatribuuti veel üheski brauseris rakendatud. Webkit-põhised brauserid, Safari ja Chrome määravad aga nende sündmuste objektides atribuudi: võtmeidentifikaator. Funktsiooniklahvide, nagu võtme atribuut, puhul ei sisalda atribuut keyIdentifier mitte numbrit, vaid stringi võtme nimega, näiteks Shift või Enter. Prinditavatele tähemärkidele vastavate võtmete puhul sisaldab see atribuut tähemärgi Unicode'i koodipunkti vähemkasutatavat stringi. Näiteks klahv A vastab väärtusele U+0041.

Allolev näide määratleb Klahvikaardi klassi, mis vastendab klahvikombinatsioonide identifikaatorid (nt PageUp, Alt_Z ja ctrl+alt+shift+F5) JavaScripti funktsioonidega, mida kutsutakse vastuseks nende klahvikombinatsioonide vajutamisele. Võtme sidumise määratlused edastatakse Keymap() konstruktorile JavaScripti objektina, mille atribuutide nimed vastavad klahvikombinatsiooni identifikaatoritele ja mille atribuutide väärtused sisaldavad viiteid töötleja funktsioonidele. Sidemete lisamine ja eemaldamine toimub bind() ja unbind() meetodite abil.

Keymap objekt installitakse HTML-i elementi (tavaliselt dokumendiobjekti), kasutades install() meetodit. Kui Keymap objekt on määratud, registreeritakse selle elemendiga klahvivajutuse sündmuste käitleja. Iga kord, kui klahvi vajutatakse, kontrollib käitleja, kas sellel kombinatsioonil on mõni funktsioon. Kui funktsioon on olemas, kutsutakse see välja.

Keydown sündmuste töötleja kasutab DOM-i 3. taseme sündmuste standardis määratletud võtme atribuuti, kui see on olemas. Vastasel juhul proovib see kasutada atribuuti Webkit keyIdentifier. Ja tagavarana kasutab töötleja mittestandardset atribuuti KeyCode:

// Funktsiooni konstruktori funktsioon Keymap(bindings) ( this.map = (); // Määratlege vastendamise identifikaator->käsitleja if (bindings) ( // Kopeerige sellesse esialgne sidumiskaart for(name in sides) this.bind( nimi, sidumised); // Eemaldab määratud võtme ID sidumise Keymap.prototype.unbind = function(key) ( delete this.map; ); // Installib selle Keymap objekti määratud HTML-i elementi Keymap.prototype.install = function(element) ( var keymap = this; // Sündmuste töötleja funktsioonide defineerimine function handler(event) ( return keymap.dispatch(event, element); ) // Määra if (element.addEventListener) element.addEventListener("keydown", handler, false else if (element.attachEvent) element.attachEvent("onkeydown", handler); // See meetod delegeerib klaviatuuri sündmuste haldamise, tuginedes sidemetele Keymap.prototype.dispatch = function(event, element) ( // Algselt ei ole modifikaatorite klahvinimesid ega võtme nime var modifiers = ""; var keyname = null; / / Modifikaatori stringide koostamine kanoonilises vormis tähemärkidest // väikeste tähtedega, järjestades need tähestikulises järjekorras if (event.altKey) modifikaatorid += "ctrl_" .metaKey; "meta_"; if (event.shiftKey) modifikaatorid += "shift_" // Võtme nime on lihtne hankida, kui DOM-i 3. taseme standardis määratletud võtmeomadus // on realiseeritud: if (event.key) võtmenimi =; event.key; // Funktsiooniklahvide nimede hankimiseks Safaris ja Chrome'is saate // kasutada atribuuti keyIdentifier else if(event.keyIdentifier && event.keyIdentifier.substring(0,2) !== "U+") keyname = event keyIdentifier // Vastasel juhul võite kasutada atribuuti keyCode // ja kuvada koodi > nimi all else keyname = Keymap.keyCodeToKeyName; // Kui võtme nime ei õnnestunud määrata, ignoreerige lihtsalt sündmust // ja tagastage juhtelement. if (!keyname) return; // Kanoonilise võtme identifikaator koosneb muutenimedest // ja väiketähtedest võtmenimest var keyid = modifikaatorid + võtmenimi.toLowerCase(); // Kontrollige, kas antud võtme ID jaoks on olemas sidumine var handler = this.map; if (käsitleja) ( // Kui töötleja on antud võtme jaoks, kutsuge see // Käitleja funktsiooni kutsumine var retval = handler.call(element, event, keyid); // Kui töötleja tagastas false, tühistage vaikeseade / / ja katkestada mullitavad sündmused if (retval === false) ( if (event.stopPropagation) event.stopPropagation(); // DOM-mudel else event.cancelBubble = true; // IE mudel if (event.preventDefault) event.preventDefault (); / / DOM else event.returnValue = false // IE ) // Tagastab käitlejalt saadud väärtuse return retval; // Abifunktsioon, et teisendada võtmeidentifikaator kanooniliseks vormiks. // Peame teisendama "meta" identifikaatori "ctrl", et muuta // Meta-C identifikaator Macis "Command-C" ja kõigil teistel "Ctrl-C". Keymap.normalize = function(keyid) ( keyid = keyid.toLowerCase(); // Väiketähtedega var words = keyid.split(/\s+|[\-+_]/); // Valige modifikaatorid var keyname = words . pop(); võtmenimi on viimane sõna Keymap.aliases || ) Keymap.aliases = ( // Seotage tavalised võtme varjunimed nende // "ametlike" nimedega, mida kasutatakse DOM-i tasemel 3, ja vastendage võtmekoodid // allolevatele nimedele. Nimi ja väärtus peavad koosnema ainult väiketähtedest "Escape" :"esc", "return":"enter", "delete":"del", "ctrl":"control", "space":"tühikuklahv", "ins":"sisesta" ); // Keydown sündmuse objekti vana atribuut KeyCode ei ole standarditud // Kuid järgmisi väärtusi saab enamikus brauserites ja operatsioonisüsteemides edukalt kasutada. Keymap.keyCodeToKeyName = ( // Sõnade või nooltega klahvid 8:"Tagasilükke", 9:"Tabulaator", 13:"Sisestus", 16:"Shift", 17:"Juht", 18:"Alt", 19:"Paus", 20:"CapsLock", 27:"Esc", 32:"Tühikuklahv", 33:"PageUp", 34:"PageDown", 35:"Lõpp", 36:"Kodu", 37: "Vasak", 38:"Üles", 39:"Parem", 40:"Alla", 45:"Sisesta", 46:"Del", // Põhiklaviatuuri numbriklahvid (mitte täiendaval) 48 :"0 ",49:"1",50:"2",51:"3",52:"4",53:"5",54:"6",55:"7",56:" 8", 57:"9", // Täheklahvid. Pange tähele, et suur- ja väiketähtedel ei ole vahet 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", // Täiendava klaviatuuri numbriklahvid ja kirjavahemärkidega klahvid // (mitte toetatud. Opera.) 96:"0",97:"1",98:"2",99:"3",100:"4",101:"5",102:"6",103: "7" ,104:"8", 105:"9",106:"Korruta", 107:"Lisa", 109:"lahutamine", 110:"kümnend", 111:"Jaga", // Funktsiooniklahvid 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", // Kirjavahemärkidega klahvid , sisendiks, mis ei nõua // tõstuklahvi all hoidmist. // Sidekriipsu ei saa kasutada teisaldataval viisil: FF tagastab // sama koodi, mis lahutamise võtme puhul 59:";", 61:"=", 186:";", 187:"=", // Firefox ja Opera tagastavad 59.61 188:",", 190:".", 191:"/", 192:"`", 219:"[", 220:"\\", 221:"]", 222: """ );

Allpool on näide Keymap objekti kasutamisest:

Window.onload = function() ( var keymap = new Keymap; // Loo uus Keymap objekt keymap.bind("ctrl+a", // Kombinatsioon Ctrl+A function(event, keyid) ( alert("Sa vajutasid: " + keyid) )); // Teine siduv Ctrl + Enter keymap.bind("ctrl+enter", function(event, keyid) ( alert("Klõpsasite: " + keyid) )); body); // Määra kogu dokumendi Keymap objekt );

Sündmused on toimingud või sündmused, mis toimuvad teie programmeeritavas süsteemis ja millest süsteem teile teatab, et saaksite neile soovi korral kuidagi reageerida. Näiteks kui kasutaja klõpsab veebilehel nuppu, võiksite sellele toimingule vastata teabekasti kuvamisega. Selles artiklis käsitleme mõnda olulist sündmustega seotud mõistet ja vaatame, kuidas need brauserites töötavad. See ei ole ammendav uuring, mida peate praeguses etapis teadma.

Eeltingimused: Eesmärk:

Elementaarne arvutioskus, algteadmised HTML-ist ja CSS-ist, JavaScripti esimesed sammud.

Et mõista sündmuste põhiteooriat, kuidas need brauserites töötavad ja kuidas sündmused erinevates programmeerimiskeskkondades erineda võivad.

Õnnelike sündmuste jada

Nagu eespool mainitud, on sündmused toimingud või sündmused, mis toimuvad teie programmeeritavas süsteemis – süsteem tekitab (või "vallandab") mingisuguse signaali, kui sündmus toimub, ning pakub ka mehhanismi, mille abil saab mingisuguse toimingu teha. sündmuse toimumisel võetakse automaatselt (st mõni kood töötab). Näiteks lennujaamas, kui lennurada on lennuki õhkutõusmiseks vaba, edastatakse piloodile signaal ja selle tulemusena hakkavad nad lennukit juhtima.

Veebi puhul käivitatakse sündmused brauseriaknas ja need kipuvad olema lisatud konkreetsele selles asuvale elemendile – see võib olla üks element, elementide kogum, aktiivsele vahelehele laaditud HTML-dokument või kogu brauseriaken. Võib juhtuda palju erinevat tüüpi sündmusi, näiteks:

• Kasutaja klõpsab hiirekursorit teatud elemendi kohal või viib kursori teatud elemendi kohal.
• Kasutaja vajutab klaviatuuril klahvi.
• Kasutaja muudab brauseriakna suurust või sulgeb selle.
• Vorm esitatakse.
• Video esitamisel, peatamisel või esitamise lõpetamisel.
• Ilmneb viga.

Sellest (ja MDN-i sündmuste viitest) saate aru saada, et on palju sündmusi, millele saab reageerida.

Igal saadaoleval sündmusel on sündmuste käitleja , mis on koodiplokk (tavaliselt JavaScripti funktsioon, mille programmeerijana loote), mis käivitatakse sündmuse käivitumisel. Kui selline koodiplokk on määratletud käivitama vastusena sündmuse käivitamisele, siis me ütleme, et registreerime sündmuse käitleja . Pange tähele, et sündmuste käitlejaid nimetatakse mõnikord sündmuste kuulajateks – nad on meie eesmärkidel üsna asendatavad, kuigi rangelt võttes töötavad nad koos. Kuulaja kuulab sündmuse toimumist ja käitleja on kood, mis käivitatakse vastuseks selle toimumisele.

Märkus. Veebisündmused ei ole JavaScripti põhikeele osa – need on määratletud brauserisse sisseehitatud API-de osana.

Lihtne näide

Vaatame lihtsat näidet, et selgitada, mida me siin silmas peame. Olete juba näinud paljudes selle kursuse näidetes kasutatud sündmusi ja sündmuste käitlejaid, kuid teeme kokkuvõtte oma teadmiste kinnitamiseks üksik , mille vajutamisel muutub taust juhuslikuks värviks:

Muuda värvi

Nupp ( veeris: 10 pikslit );

JavaScript näeb välja selline:

Const btn = document.querySelector("nupp"); funktsioon juhuslik(arv) ( return Math.floor(Math.random() * (number+1)); ) btn.onclick = function() ( const rndCol = "rgb(" + random(255) + "," + juhuslik(255) + "," + juhuslik(255) + ")"; document.body.style.backgroundColor = rndCol )

Selles koodis salvestame viite nupule konstandis nimega btn, kasutades funktsiooni Document.querySelector(). Samuti määratleme funktsiooni, mis tagastab juhusliku arvu. Koodi kolmas osa on sündmuste töötleja. Konstant btn osutab elemendile ja seda tüüpi objektil on mitmeid sündmusi, mis võivad sellel käivituda, ja seetõttu on saadaval sündmuste töötlejad. Me jälgime klikisündmuse käivitamist, määrates atribuudi onclick sündmuste töötleja väärtuseks anonüümne funktsioon, mis sisaldab koodi, mis genereerib juhusliku RGB värvi ja määrab sellega võrdseks taustavärvi.

Seda koodi käitatakse alati, kui elemendil klikkimise sündmus käivitub, st kui kasutaja sellel klõpsab.

Näidisväljund on järgmine:

See pole ainult veebilehed

Teine asi, mida tasub siinkohal mainida, on see, et sündmused ei ole JavaScripti jaoks ainulaadsed – enamikul programmeerimiskeeltel on mingi sündmusemudel ja mudeli tööviis erineb sageli JavaScripti omast. Tegelikult on sündmuste mudel JavaScriptis veebilehtede jaoks erineb JavaScripti sündmuste mudelist, kuna seda kasutatakse teistes keskkondades.

Tekstisisesed sündmuste töötlejad – ärge neid kasutage

Võite oma koodis näha ka sellist mustrit:

Vajutage mulle funktsiooni bgChange() ( const rndCol = "rgb(" + random(255) + "," + random(255) + "," + random(255) + ")"; document.body.style.backgroundColor = rndCol )

Varaseim veebist leitud sündmustekäsitlejate registreerimise meetod hõlmas sündmuste käitleja HTML-i atribuute (või sisemisi sündmustekäsitlejaid), nagu ülal näidatud – atribuudi väärtus on sõna otseses mõttes JavaScripti kood, mida soovite sündmuse toimumisel käivitada. Ülaltoodud näide kutsub esile funktsiooni, mis on määratletud sama lehe elemendi sees, kuid võite sisestada ka JavaScripti otse atribuudi sisse, näiteks:

Vajutage mind

HTML-i atribuudi ekvivalendid leiate paljude sündmuste käitleja omaduste jaoks; aga te ei tohiks neid kasutada – neid peetakse halvaks tavaks. Sündmuste töötleja atribuudi kasutamine võib tunduda lihtne, kui teete midagi väga kiiresti, kuid need muutuvad väga kiiresti juhitamatuks ja ebaefektiivseks.

Alustuseks ei ole hea mõte segada HTML-i ja JavaScripti, kuna seda muutub raskeks sõeluda – parem on hoida JavaScripti kõik ühes kohas. kui see on eraldi failis, saate seda rakendada mitmele HTML-dokumendile.

Isegi ühes failis pole reasisesed sündmuste töötlejad hea mõte. Üks nupp on OK, aga mis siis, kui sul oleks 100 nuppu? Peaksite failile lisama 100 atribuuti; see muutuks väga kiiresti hoolduseks. JavaScripti abil saate lihtsalt õudusunenägu lisada sündmuste käitleja funktsiooni kõigile lehe nuppudele, olenemata nende arvust, kasutades midagi sellist see:

Const nupud = document.querySelectorAll("nupp"); jaoks (olgu i = 0; i< buttons.length; i++) { buttons[i].onclick = bgChange; } buttons.forEach(function(button) { button.onclick = bgChange; });

Märkus. Programmeerimisloogika sisust eraldamine muudab teie saidi ka otsingumootoritele sõbralikumaks.

addEventListener() ja removeEventListener()

Uusimat tüüpi sündmuste mehhanism on defineeritud dokumendiobjekti mudeli (DOM) 2. taseme sündmuste spetsifikatsioonis, mis pakub brauseritele uut funktsiooni - addEventListener() . See toimib sarnaselt sündmuste käitleja omadustega, kuid süntaks on ilmselgelt erinev. Võiksime oma juhusliku värvinäite ümber kirjutada nii, et see näeks välja järgmine:

Const btn = document.querySelector("nupp"); funktsioon bgChange() ( const rndCol = "rgb(" + random(255) + "," + random(255) + "," + random(255) + ")"; document.body.style.backgroundColor = rndCol; ) btn.addEventListener("klõps", bgChange);

Funktsiooni addEventListener() sees määrame kaks parameetrit - sündmuse nime, mille jaoks soovime selle käitleja registreerida, ja koodi, mis sisaldab töötleja funktsiooni, mida soovime sellele vastuseks käivitada. Pange tähele, et on täiesti asjakohane panna kogu kood funktsiooni addEventListener() sisse anonüümsesse funktsiooni, näiteks järgmiselt:

Btn.addEventListener("click", function() ( var rndCol = "rgb(" + random(255) + "," + random(255) + "," + random(255) + ")"; document.body .style.backgroundColor = rndCol);

Sellel mehhanismil on mõned eelised võrreldes varem käsitletud vanemate mehhanismidega. Alustuseks on vastefunktsioon removeEventListener() , mis eemaldab eelnevalt lisatud kuulaja. Näiteks eemaldaks see selle jaotise esimeses koodiplokis oleva kuulajakomplekti:

Btn.removeEventListener("klõps", bgChange);

Lihtsate, väikeste programmide puhul pole see oluline, kuid suuremate ja keerukamate programmide puhul võib see parandada näiteks vanade kasutamata sündmuste käitlejate puhastamist. Lisaks võimaldab see sama nuppu teha erinevates olukordades erinevaid toiminguid. kõik, mida pead tegema, on vastavalt vajadusele sündmuste töötlejad lisada või eemaldada.

Teiseks saate samale kuulajale registreerida ka mitu töötlejat. Mõlemat järgmist töötlejat ei rakendata:

MinuElement.onclick = funktsioonA; myElement.onclick = funktsioonB;

Teine rida kirjutab üle esimese rea määratud onclick väärtuse. See aga toimiks:

MinuElement.addEventListener("klõps", funktsioonA); myElement.addEventListener("klõps", funktsioonB);

Mõlemad funktsioonid käivituvad nüüd, kui elemendil klõpsata.

Lisaks on selle sündmusemehhanismiga saadaval mitmeid muid võimsaid funktsioone ja valikuid. Need on selle artikli jaoks pisut väljas, kuid kui soovite nende kohta lugeda, vaadake viitelehti addEventListener () ja removeEventListener ().

Millist mehhanismi peaksin kasutama?

Kolmest mehhanismist ei tohiks kindlasti kasutada HTML-i sündmuste käitleja atribuute – need on vananenud ja halb tava, nagu eespool mainitud.

Ülejäänud kaks on suhteliselt vahetatavad, vähemalt lihtsa kasutuse jaoks:

• Sündmuste töötleja atribuutidel on vähem võimsust ja valikuid, kuid parem brauseritevaheline ühilduvus (toetatud juba Internet Explorer 8-st). Tõenäoliselt peaksite õppimise ajal nendega alustama.
• DOM-i 2. taseme sündmused (addEventListener() jne) on võimsamad, kuid võivad muutuda ka keerukamaks ja neid on vähem toetatud (toetatud juba Internet Explorer 9-st). Samuti peaksite neid katsetama ja püüdma neid võimaluse korral kasutada.

Kolmanda mehhanismi peamisteks eelisteks on see, et vajadusel saate eemaldada sündmuste käitleja koodi, kasutades eemaldamistEventListener() , ja vajadusel saate elementidele lisada mitu sama tüüpi kuulajat. Näiteks saate elemendil mitu korda kutsuda funktsiooni addEventListener("click", function() ( ... )), kusjuures teises argumendis on määratud erinevad funktsioonid. See on sündmuste töötleja atribuutide puhul võimatu, sest kõik järgnevad katsed atribuuti määrata kirjutavad varasemad üle, nt:

Element.onclick = funktsioon1; element.onclick = funktsioon2; jne.

Märkus. Kui teil palutakse oma töös toetada Internet Explorer 8-st vanemaid brausereid, võib teil tekkida raskusi, kuna sellised iidsed brauserid kasutavad uuemate brauserite omadest erinevaid sündmuste mudeleid. Kuid ärge kartke, enamikul JavaScripti teekidel (nt jQuery) on sisseehitatud funktsioonid, mis eemaldavad brauseritevahelised erinevused. Ärge muretsege selle pärast oma õppimise praeguses etapis liiga palju.

Muud sündmuste kontseptsioonid

Selles jaotises käsitleme lühidalt mõningaid arenenud mõisteid, mis on sündmustega seotud. Praegu ei ole oluline neid mõisteid täielikult mõista, kuid need võivad aidata selgitada mõningaid koodimustreid, millega te tõenäoliselt aeg-ajalt kokku puutute.

Sündmusobjektid

Mõnikord võite sündmuste käitleja funktsiooni sees näha parameetrit, mis on määratud nimega sündmus , evt või lihtsalt e . Seda nimetatakse sündmuseobjektiks ja see edastatakse automaatselt sündmuste töötlejatele, et pakkuda lisafunktsioone ja teavet. Näiteks kirjutame oma juhusliku värvi näite uuesti veidi ümber:

Funktsioon bgChange(e) ( const rndCol = "rgb(" + random(255) + "," + random(255) + "," + random(255) + ")"; e.target.style.backgroundColor = rndCol console.log(e); btn.addEventListener("klõps", bgChange);

Siin näete, et me kaasame funktsiooni sündmuse objekti e ja funktsiooni, mis määrab taustavärvi stiili e.target - mis on nupp ise. Sündmusobjekti sihtomadus on alati viide elemendile, millel sündmus just toimus. Nii et selles näites määrame juhusliku taustavärvi nupule, mitte lehele.

Märkus. Sündmusobjekti jaoks võite kasutada mis tahes nime, mis teile meeldib – peate lihtsalt valima nime, mida saate seejärel kasutada sündmuste käitleja funktsioonis sellele viitamiseks. e/evt/event kasutavad arendajad kõige sagedamini, kuna need on lühikesed ja kergesti meeldejäävad. Alati on hea olla järjekindel – iseendaga ja võimalusel teistega.

e.target on väga kasulik, kui soovite määrata sama sündmuste käitleja mitmele elemendile ja teha kõigiga midagi, kui nendes sündmus toimub. Näiteks võib teil olla 16 paani, mis kaovad, kui neil klõpsate. Kasulik on alati seada asi lihtsalt e.target-iks kaduma, selle asemel, et seda mingil keerulisemal viisil valida. Järgmises näites (täieliku lähtekoodi vaatamiseks vaadake kasulikku-eventtarget.html; vaadake ka seda siin) loome JavaScripti abil 16 elementi. Seejärel valime need kõik, kasutades document.querySelectorAll() , seejärel vaatame igaüks neist läbi, lisades igale onclicki töötleja, mis muudab selle nii, et klõpsamisel rakendatakse igaühele juhuslikku värvi:

Const divs = document.querySelectorAll("div"); jaoks (olgu i = 0; i< divs.length; i++) { divs[i].onclick = function(e) { e.target.style.backgroundColor = bgChange(); } }

Väljund on järgmine (proovige sellel klõpsata - nautige):

Peidetud näide Kasuliku sündmuse sihtmärgi näide div ( kõrgus: 100 pikslit; laius: 25%; hõljumine: vasakule; ) jaoks (olgu i = 1; i

Ülaltoodud näites, pärast seda, kui väli on fookuse saanud ja kasutaja jätkab järgmise välja täitmist (näiteks kasutades TAB-i või tavalist klõpsamist), kutsub element funktsiooni checkName, mis on kirjutatud JS-is.
Standardseid HTML-i sündmustekäsitlejaid ei soovitata tänapäevases arenduses kasutada, peamiselt seetõttu, et funktsionaalsus on segatud märgistusega, mis raskendab koodi tööd ja silumist.

2. Standardsed sündmuste käitlejad DOM-is

See meetod eraldab JS-i ja märgistuse, kuid sellel on sama piirang – sündmustele saab määrata ainult ühe funktsiooni. Samaväärne HTML-i sündmuste töötleja kirje DOM-is oleks:

var kasutajanimi = document.getElementbyId("kasutajanimi"); kasutajanimi.onblur = checkName;

kasutajanimi. onblur = checkName ;

JavaScript. Kiire algus

Õppige JavaScripti põhitõdesid veebirakenduse loomise praktilise näite abil.

Nagu eelmises näites, käivitatakse funktsioon checkName pärast vormielemendi fookuse kaotamist.

3. Sündmuste kuulajad

Kaasaegne meetod sündmuste töötleja lisamiseks, mis võimaldab mitut sündmust ja funktsiooni aheldada:

var kasutajanimi = document.getElementbyId("kasutajanimi"); kasutajanimi.addEventListener("blur", checkName, false);

var kasutajanimi = dokument. getElementbyId("kasutajanimi"); kasutajanimi. addEventListener ("hägu" , checkName , false );

Tõeväärtus lõpus näitab, kas sündmus tuleks jäädvustada. Tavaliselt seatakse väärtusele false. Lihtsates skriptides kirjutatakse sündmus sageli anonüümse funktsioonina:

var kasutajanimi = document.getElementbyId("kasutajanimi"); username.addEventListener("blur", function() ( // toimingud sündmuse käivitamiseks ))

Kõik sündmused pole võrdsed Oluline on mõista, et kõiki sündmusi ei saa käsitleda ühtemoodi. Kerimise ja suuruse muutmise sündmusi käivitatakse väga sageli, mistõttu peate nendega töötama väga hoolikalt, et mitte vähendada skripti kiirust. Sama kehtib näiliselt kahjutute sündmuste kohta, nagu sisend. Skripti jõudlus võib oluliselt kannatada, kui see proovib pidevalt reageerida vahemiku liuguril sageli käivitatavale sisendsündmusele. Kõiki sündmusi ei jälgita Mutatsioonijälgijad ei saa praegu jälgida kõiki lehe elementide muudatusi. Näiteks ei saa kuidagi jälgida elemendi kõrguse muutusi (kui tundliku kujundusega konteiner kitseneb, paigutatakse selle sees olev tekst ümber ja elemendid muutuvad pikemaks). Siiski on muudatuste jälgimiseks viise, sellest räägin järgmises artiklis. Kinnitage sündmused õigetele elementidele Onclick sündmus kehtib paljude elementide, sealhulgas linkide kohta. Kehtib üldreegel – linkidele ei ole soovitatav lisada JS-koodi. Lingil klõpsates tuleb kasutaja suunata saidi teise piirkonda või ankrusse. Kui vajad kasutajaliidese elementi, millega saad samal lehel midagi muuta, siis sobib sulle nupp. Saate hõlpsasti nupule JavaScripti lisada. Ärge kasutage JavaScripti, kui saate seda teha CSS-iga Võrreldes CSS-iga on JavaScript aeglane ja ebausaldusväärne. Põhimõtteliselt tuleks CSS-i võimaluse korral kasutada alternatiivina keerukatele skriptidele. CSS ei tee aga kõike. See teeb head tööd funktsiooniga :hover (see asendab paljudel juhtudel puutesündmusi) ja võib mõnel juhul asendada klõpsusündmuse ka :target-ga. CSS-animatsioon käivitatakse automaatselt pärast lehe laadimist ning on ka spetsiaalseid CSS-i olekuid, mida saab käivitada selliste elementide puhul nagu raadionupud. Kuid kõik keerulisem on tavaliselt parem jätta JavaScriptile.