Tapahtumat käsitellään javascriptillä. Tapahtumatyypit. Normaali HTML-tapahtumakäsittelijä attribuuttien kautta

Tapahtuman aihe on erittäin tärkeä ja erittäin mielenkiintoinen. Sen ansiosta voit tehdä paljon mielenkiintoisia asioita, joista käyttäjä on iloinen. JavaScript-tapahtuma on tietty toiminto, jonka joko käyttäjä tai selain käynnistää. Tapahtuma voi olla esimerkiksi hiiren napsautus painikkeella, hiiren liike, elementtiin keskittyminen, arvon muuttaminen tekstikentässä, selainikkunan koon muuttaminen ja niin edelleen.

Olen laatinut taulukon kaikista tapahtumista (jotka ainakin tiedän) JavaScriptissä. Siitä löydät ensinnäkin tapahtuman nimen, elementit, jotka voivat luoda tämän tapahtuman, ja kuvauksen itse JavaScript-tapahtumasta.

Tapahtuma	Esine	Tapahtuman syy
Abortti	Kuva	Kuvan lataus keskeytyy
Hämärtää		Kadonnut elementtifokus
Muuttaa	FileUpload, Select, Text, Textarea	Muuta arvoa
Klikkaus	Alue, painike, valintaruutu, asiakirja, linkki, radio, nollaa, lähetä	Napsauta elementtiä hiirellä
DblClick	Alue, asiakirja, linkki	Kaksoisnapsauta elementtiä
DragDrop	Ikkuna	Siirry selainikkunaan
Keskity	Painike, valintaruutu, tiedostojen lataus, kehys, taso, salasana, radio, nollaus, valinta, lähetys, teksti, tekstialue, ikkuna	Tarkennuksen asettaminen elementtiin
KeyDown		Näppäimistön näppäimen painaminen
Näppäinpainallus	Asiakirja, kuva, linkki, tekstialue	Näppäimistön näppäimen pitäminen
KeyUp	Asiakirja, kuva, linkki, tekstialue	Näppäimistön näppäimen vapauttaminen
Ladata	Asiakirja, kuva, taso, ikkuna
MouseDown	Painike, asiakirja, linkki	Hiiren painiketta painettu
MouseMove	Ikkuna	Hiiri liikkeessä
MouseOut	Alue, kerros, linkki	Hiiri ylittää elementin rajojen
MouseOver	Alue, kerros, linkki	Hiiri on elementin päällä
MouseUp	Painike, asiakirja, linkki	Hiiren painike vapautettu
Liikkua	Kehys	Elementin siirtäminen
Nollaa	Lomake	Nollaa lomake
Muuta kokoa	Kehys, ikkuna	Koon muuttaminen
Valitse	Teksti, Textarea	Tekstin valinta
Lähetä	Lomake	Tiedonsiirto
Purkaa	Ikkuna	Puretaan nykyistä sivua

Selvitetään nyt, kuinka tapahtumia käytetään JavaScriptissä. On olemassa niin sanottuja tapahtumakäsittelijöitä. Tapahtumakäsittelijät määrittävät, mitä tapahtuu, kun tietty tapahtuma tapahtuu. JavaScriptin tapahtumakäsittelijillä on seuraava yleinen muoto:

OnTitleEvent

Eli ensin tulee etuliite "on" ja sitten tapahtuman nimi, esimerkiksi seuraavat tapahtumakäsittelijät: onFocus, onClick, onSubmit ja niin edelleen. Mielestäni tässä ei ole kysymyksiä. Ja nyt pääkysymys: "Kuinka käyttää tapahtumia JavaScriptissä?". Niiden sovellusala on valtava, ja nyt tarkastelemme yhtä ongelmaa. Sivulla on kolme linkkiä. Jokainen linkki vastaa eri taustaväristä (esimerkiksi valkoinen, keltainen ja vihreä). Aluksi tausta on valkoinen. Kun viet hiiren tietyn linkin päälle, taustaväri muuttuu. Kun siirrät hiiren pois, taustaväri palautuu oletusväriksi. Kun napsautat linkkiä, taustaväri säilyy oletusarvona.

a (
väri: sininen;
tekstin koristelu: alleviivaus;
kohdistin: osoitin;
}


var oletusväri = "valkoinen";

funktio setTempColor(väri) (
document.bgColor = väri;
}

funktio setDefaultColor(väri) (
oletusväri = väri;
}

funktio defaultColor() (
document.bgColor = oletusväri;
}



Valkoinen
Keltainen
Vihreä

Katsotaanpa tätä skriptiä tai pikemminkin koko HTML-sivua JavaScript- ja CSS-tuella (toisin sanoen tämä on esimerkki DHTML:stä). Ensin tulevat tavalliset HTML-tunnisteet, joilla mikä tahansa HTML-sivu alkaa. Seuraavaksi luomme tyylin, jossa vaadimme, että kaikki tietyn sivun linkit ovat sinisiä, alleviivattuja ja että niissä oleva hiiren osoitin on "osoittimen" muodossa. Saatat sanoa: "Miksi sinun on määritettävä tyyli, linkit ovat kuitenkin täsmälleen samat?" Aivan oikein, linkit, mutta meillä ei ole linkkejä sellaisenaan (tunnisteessa ei ole href-attribuuttia), joten ne ovat oletuksena yksinkertaista mustaa tekstiä (voit kuitenkin klikata tekstiä). Siksi tyyli on välttämätöntä. Voit poistaa sen ja katsoa mitä tapahtuu. Vielä parempi, lisää href-attribuutti (millä tahansa arvolla, jopa tyhjänä) ja selitä, miksi komentosarja lakkasi toimimasta. Sitten JavaScript alkaa. Luomme oletusväristä vastaavan muuttujan default_color. Seuraavaksi tulee kolme toimintoa:

SetTempColor()-funktio on vastuussa värin tilapäisestä muuttamisesta.

Funktio setDefaultColor() vastaa oletusvärin muuttamisesta.

defaultColor()-funktio asettaa oletusarvoisen taustavärin.

Sitten on linkkejä attribuuttien kanssa tapahtumakäsittelijöiden muodossa. Kun siirrät hiiren linkin päälle, MouseOver-tapahtuma tapahtuu vastaavasti, onMouseOver-tapahtumakäsittelijä kutsuu setTempColor()-funktiota ja välittää vastaavan parametrin. Kun poistat hiiren elementistä, MouseOut-tapahtuma nousee esiin ja sitten kutsutaan defaultColor()-funktio, joka asettaa taustavärin oletusvärin. Ja lopuksi, kun hiiri napsauttaa linkkiä (onClick-käsittelijä), kutsutaan setDefaultColor()-funktio, joka asettaa parametrissa määritetyn värin oletustaustan väriksi. Kuten näet, kaikki on melko yksinkertaista.

Tämä oli periaate tapahtumien käyttämisestä JavaScriptissä, ja sitten kaikki riippuu vain mielikuvituksestasi!

Tapahtumat ovat ohjelmoitavassa järjestelmässä tapahtuvia toimintoja tai tapahtumia, joista järjestelmä kertoo sinulle, jotta voit halutessasi vastata niihin jollain tavalla. Jos käyttäjä esimerkiksi napsauttaa painiketta verkkosivulla, saatat haluta vastata toimintoon näyttämällä tietoruudun. Tässä artikkelissa käsittelemme tapahtumia koskevia tärkeitä käsitteitä ja katsomme, miten ne toimivat selaimissa. Tämä ei ole tyhjentävä tutkimus, vain se, mitä sinun on tiedettävä tässä vaiheessa.

Edellytykset: Tavoite:

Tietokonelukutaidot, HTML:n ja CSS:n perusymmärrys, JavaScriptin ensimmäiset askeleet.

Ymmärtää tapahtumien perustavanlaatuisen teorian, kuinka ne toimivat selaimissa ja miten tapahtumat voivat vaihdella eri ohjelmointiympäristöissä.

Onnellisten tapahtumien sarja

Kuten edellä mainittiin, tapahtumat ovat toimintoja tai tapahtumia, jotka tapahtuvat ohjelmoimassasi järjestelmässä - järjestelmä tuottaa (tai "sytyttää") jonkinlaisen signaalin, kun tapahtuma tapahtuu, ja tarjoaa myös mekanismin, jolla jonkinlainen toiminta voidaan suorittaa. automaattisesti (eli jokin koodi käynnissä), kun tapahtuma tapahtuu. Esimerkiksi lentokentällä, kun kiitotie on vapaa lentokoneen nousemiselle, ohjaajalle välitetään signaali, jonka seurauksena hän aloittaa koneen ohjaamisen.

Webissä tapahtumat käynnistyvät selainikkunan sisällä, ja ne yleensä liitetään tiettyyn siinä olevaan kohteeseen - tämä voi olla yksittäinen elementti, elementtijoukko, nykyiselle välilehdelle ladattu HTML-dokumentti tai koko selainikkunan. On olemassa monia erilaisia ​​​​tapahtumia, joita voi tapahtua, esimerkiksi:

• Käyttäjä napsauttaa hiiren osoittimen tietyn elementin päällä tai siirtää osoittimen tietyn elementin päälle.
• Käyttäjä painaa näppäimistön näppäintä.
• Käyttäjä muuttaa selainikkunan kokoa tai sulkea sen.
• Lomaketta lähetetään.
• Videota toistetaan, keskeytetty tai toisto päättyy.
• Tapahtuu virhe.

Tästä (ja vilkaisemalla MDN-tapahtumaviittausta) voit päätellä, että on olemassa monia tapahtumia, joihin voidaan vastata.

Jokaisella saatavilla olevalla tapahtumalla on tapahtumakäsittelijä , joka on koodilohko (yleensä JavaScript-funktio, jonka sinä ohjelmoijana luot), joka suoritetaan tapahtuman käynnistyessä. Kun tällainen koodilohko on määritetty suoritettavaksi vastauksena tapahtuman laukeamiseen, sanomme, että rekisteröimme tapahtumakäsittelijää. Huomaa, että tapahtumakäsittelijöitä kutsutaan joskus tapahtumakuuntelijoiksi - ne ovat melko pitkälti vaihdettavissa tarkoituksiinmme, vaikka tarkalleen ottaen ne toimivat yhdessä. Kuuntelija kuuntelee tapahtumaa, ja käsittelijä on koodi, joka suoritetaan vastauksena tapahtumaan.

Huomautus: Verkkotapahtumat eivät ole osa JavaScriptin ydinkieltä – ne määritellään osaksi selaimen sisäänrakennettuja sovellusliittymiä.

Yksinkertainen esimerkki

Katsotaanpa yksinkertaista esimerkkiä selittääksemme, mitä tarkoitamme. Olet jo nähnyt tapahtumia ja tapahtumakäsittelijöitä jo useissa tämän kurssin esimerkeissä, mutta teemme yhteenvedon vain tietomme vahvistamiseksi single , jota painettaessa tausta muuttuu satunnaiseksi väriksi:

Vaihda väri

Painike ( marginaali: 10 kuvapistettä );

JavaScript näyttää tältä:

Const btn = document.querySelector("painike"); funktio satunnainen(luku) ( return Math.floor(Math.random() * (luku+1)); ) btn.onclick = function() ( const rndCol = "rgb(" + random(255) + "," + random(255) + "," + random(255) + ")"; document.body.style.backgroundColor = rndCol )

Tässä koodissa tallennamme viittauksen painikkeeseen vakioon nimeltä btn käyttämällä Document.querySelector()-funktiota. Määrittelemme myös funktion, joka palauttaa satunnaisluvun. Koodin kolmas osa on tapahtumakäsittelijä. Btn-vakio osoittaa elementtiin, ja tämän tyyppisellä objektilla on useita tapahtumia, jotka voivat käynnistyä siinä, ja siksi tapahtumakäsittelijät ovat käytettävissä. Kuuntelemme napsautustapahtuman käynnistymistä asettamalla onclick-tapahtumakäsittelijän ominaisuuden vastaamaan anonyymiä funktiota, joka sisältää koodin, joka luo satunnaisen RGB-värin ja asettaa taustavärin sen vastaavaksi.

Tämä koodi suoritetaan aina, kun klikkaustapahtuma käynnistyy elementissä, eli aina, kun käyttäjä napsauttaa sitä.

Esimerkkituloste on seuraava:

Se ei ole vain web-sivuja

Toinen tässä vaiheessa mainitsemisen arvoinen asia on, että tapahtumat eivät ole ainutlaatuisia JavaScriptille - useimmilla ohjelmointikielillä on jonkinlainen tapahtumamalli, ja mallin toimintatapa eroaa usein JavaScriptin tavoista. Itse asiassa tapahtumamalli JavaScriptissä web-sivuille eroaa JavaScriptin tapahtumamallista, koska sitä käytetään muissa ympäristöissä.

Sisäiset tapahtumakäsittelijät – älä käytä näitä

Saatat myös nähdä koodissasi seuraavanlaisen kuvion:

Paina funktiota bgChange() ( const rndCol = "rgb(" + random(255) + "," + random(255) + "," + random(255) + ")"; document.body.style.backgroundColor = rndCol )

Varhaisin verkosta löytynyt tapahtumakäsittelijöiden rekisteröintitapa sisälsi yllä olevan kaltaisia ​​tapahtumakäsittelijän HTML-attribuutteja (tai upotettuja tapahtumakäsittelijöitä ) - attribuutin arvo on kirjaimellisesti JavaScript-koodi, jonka haluat suorittaa tapahtuman tapahtuessa. Yllä oleva esimerkki kutsuu funktion, joka on määritetty saman sivun elementin sisällä, mutta voit myös lisätä JavaScriptin suoraan määritteen sisään, esimerkiksi:

Paina minua

Löydät HTML-attribuuttien vastineet monille tapahtumakäsittelijän ominaisuuksille; Sinun ei kuitenkaan pidä käyttää näitä - niitä pidetään huonoina käytäntöinä. Tapahtumakäsittelijän attribuutin käyttö saattaa tuntua helpolta, jos teet jotain todella nopeasti, mutta niistä tulee hyvin nopeasti hallitsemattomia ja tehottomia.

Aluksi ei ole hyvä idea sekoittaa HTML-koodiasi ja JavaScriptiä, koska sen jäsentäminen on vaikeaa - JavaScriptin pitäminen yhdessä paikassa on parempi. jos se on erillisessä tiedostossa, voit käyttää sitä useisiin HTML-dokumentteihin.

Jopa yhdessä tiedostossa upotetut tapahtumakäsittelijät eivät ole hyvä idea. Yksi painike on OK, mutta entä jos sinulla olisi 100 painiketta? Sinun on lisättävä tiedostoon 100 attribuuttia; se muuttuisi nopeasti ylläpidoksi. JavaScriptin avulla voit helposti painajaisen lisätä tapahtumakäsittelijän toiminnon kaikkiin sivun painikkeisiin riippumatta siitä, kuinka monta niitä oli, käyttämällä jotain esim. Tämä:

Const-painikkeet = document.querySelectorAll("painike"); for (olkoon i = 0; i< buttons.length; i++) { buttons[i].onclick = bgChange; } buttons.forEach(function(button) { button.onclick = bgChange; });

Huomautus: Ohjelmointilogiikkasi erottaminen sisällöstä tekee sivustostasi myös ystävällisemmän hakukoneille.

addEventListener() ja removeEventListener()

Uusin tapahtumamekanismityyppi on määritelty Document Object Model (DOM) Level 2 Events Specification -määrityksessä, joka tarjoaa selaimille uuden toiminnon - addEventListener() . Tämä toimii samalla tavalla kuin tapahtumakäsittelijän ominaisuudet, mutta syntaksi on selvästi erilainen. Voisimme kirjoittaa satunnaisen väriesimerkkimme uudelleen tältä:

Const btn = document.querySelector("painike"); funktio bgChange() ( const rndCol = "rgb(" + satunnainen(255) + "," + satunnainen(255) + "," + satunnainen(255) + ")"; document.body.style.backgroundColor = rndCol; ) btn.addEventListener("napsauta", bgChange);

AddEventListener()-funktion sisällä määritämme kaksi parametria - tapahtuman nimen, jolle haluamme rekisteröidä tämän käsittelijän, ja koodin, joka sisältää käsittelijäfunktion, jonka haluamme suorittaa vastauksena siihen. Huomaa, että on täysin sopivaa laittaa kaikki koodi addEventListener()-funktion sisään, nimettömään funktioon, kuten näin:

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

Tällä mekanismilla on joitain etuja aiemmin käsiteltyihin vanhempiin mekanismeihin verrattuna. Aluksi on olemassa vastinetoiminto, removeEventListener() , joka poistaa aiemmin lisätyn kuuntelijan. Tämä esimerkiksi poistaisi kuuntelijajoukon tämän osion ensimmäisessä koodilohkossa:

Btn.removeEventListener("napsauta", bgChange);

Tällä ei ole merkitystä yksinkertaisille, pienille ohjelmille, mutta isommille, monimutkaisemmille ohjelmille se voi parantaa tehokkuutta esimerkiksi vanhojen käyttämättömien tapahtumakäsittelijöiden puhdistamisessa. Plus, tämä mahdollistaa sen, että sama painike suorittaa erilaisia ​​toimintoja eri olosuhteissa - sinun tarvitsee vain lisätä tai poistaa tapahtumakäsittelijöitä tarpeen mukaan.

Toiseksi, voit myös rekisteröidä useita käsittelijöitä samalle kuuntelijalle. Seuraavia kahta käsittelijää ei oteta käyttöön:

MyElement.onclick = toimintoA; myElement.onclick = toimintoB;

Toinen rivi korvaa ensimmäisellä rivillä asetetun onclick-arvon. Tämä toimisi kuitenkin:

OmaElementti.addEventListener("napsautus", toimintoA); myElement.addEventListener("napsautus", toimintoB);

Molemmat toiminnot toimivat nyt, kun elementtiä napsautetaan.

Lisäksi tämän tapahtumamekanismin avulla on saatavilla useita muita tehokkaita ominaisuuksia ja vaihtoehtoja. Nämä ovat hieman tämän artikkelin ulkopuolella, mutta jos haluat lukea niistä, tutustu addEventListener()- ja removeEventListener()-viitesivuihin.

Mitä mekanismia minun pitäisi käyttää?

Näistä kolmesta mekanismista sinun ei ehdottomasti pidä käyttää HTML-tapahtumakäsittelijän attribuutteja - nämä ovat vanhentuneita ja huonoja käytäntöjä, kuten edellä mainittiin.

Kaksi muuta ovat suhteellisen vaihdettavissa, ainakin yksinkertaisiin käyttötarkoituksiin:

• Tapahtumakäsittelijän ominaisuuksilla on vähemmän tehoa ja vaihtoehtoja, mutta parempi yhteensopivuus selaimien välillä (tuettu jo Internet Explorer 8:aan asti). Sinun pitäisi luultavasti aloittaa näistä oppiessasi.
• DOM-tason 2 tapahtumat (addEventListener() jne.) ovat tehokkaampia, mutta voivat myös tulla monimutkaisempia ja niitä tuetaan vähemmän (tuettu Internet Explorer 9:ään asti). Näitä kannattaa myös kokeilla ja pyrkiä käyttämään niitä mahdollisuuksien mukaan.

Kolmannen mekanismin tärkeimmät edut ovat, että voit tarvittaessa poistaa tapahtumakäsittelijän koodin käyttämällä removeEventListener() -toimintoa, ja voit tarvittaessa lisätä elementteihin useita samantyyppisiä kuuntelijoita. Voit esimerkiksi kutsua addEventListener("click", function() ( ... )) elementissä useita kertoja toisessa argumentissa määritettyjen eri funktioiden kanssa. Tämä on mahdotonta tapahtumakäsittelijän ominaisuuksilla, koska kaikki myöhemmät ominaisuuden asettamisyritykset korvaavat aikaisemmat, esim.:

Element.onclick = toiminto1; element.onclick = function2; jne.

Huomautus: Jos sinua pyydetään tukemaan työssäsi Internet Explorer 8:aa vanhempia selaimia, saatat kohdata vaikeuksia, koska tällaiset vanhat selaimet käyttävät erilaisia ​​tapahtumamalleja kuin uudemmissa selaimissa. Mutta älä pelkää, useimmissa JavaScript-kirjastoissa (esimerkiksi jQueryssa) on sisäänrakennettuja toimintoja, jotka poistavat selainten väliset erot. Älä ole huolissasi tästä liikaa tässä oppimismatkasi vaiheessa.

Muut tapahtumakonseptit

Tässä osiossa käsittelemme lyhyesti joitain edistyneitä käsitteitä, jotka liittyvät tapahtumiin. Ei ole tärkeää ymmärtää näitä käsitteitä täysin tässä vaiheessa, mutta ne voivat auttaa selittämään joitain koodimalleja, joita todennäköisesti törmäät ajoittain.

Tapahtumaobjektit

Joskus tapahtumakäsittelijän funktiossa saatat nähdä parametrin, joka on määritetty nimellä tapahtuma , evt tai yksinkertaisesti e . Tätä kutsutaan tapahtumaobjektiksi, ja se välitetään automaattisesti tapahtumakäsittelijöille lisäominaisuuksien ja -tietojen tarjoamiseksi. Esimerkiksi kirjoitetaan satunnainen väriesimerkkimme uudelleen hieman uudelleen:

Funktio bgChange(e) ( const rndCol = "rgb(" + satunnainen(255) + "," + satunnainen(255) + "," + satunnainen(255) + ")"; e.target.style.backgroundColor = rndCol ; console.log(e); btn.addEventListener("click", bgChange);

Tästä näet, että sisällytämme funktioon tapahtumaobjektin, e , ja funktiossa taustavärityylin asettamisen e.targetille - joka on itse painike. Tapahtumaobjektin kohdeominaisuus on aina viittaus elementtiin, jossa tapahtuma on juuri tapahtunut. Joten tässä esimerkissä asetamme satunnaisen taustavärin painikkeelle, emme sivulle.

Huomautus: Voit käyttää tapahtumaobjektille mitä tahansa haluamaasi nimeä - sinun tarvitsee vain valita nimi, jonka avulla voit viitata siihen tapahtumakäsittelijätoiminnossa. e/evt/event ovat yleisimmin kehittäjien käyttämiä, koska ne ovat lyhyitä ja helppo muistaa. On aina hyvä olla johdonmukainen - itsensä ja muiden kanssa, jos mahdollista.

e.target on uskomattoman hyödyllinen, kun haluat asettaa saman tapahtumakäsittelijän useille elementeille ja tehdä jotain niille kaikille, kun niissä tapahtuu tapahtuma. Sinulla voi esimerkiksi olla 16 laatan sarja, jotka katoavat, kun niitä napsautetaan. On hyödyllistä, että asia voidaan aina vain asettaa katoamaan e.targetiksi sen sijaan, että se joutuisi valitsemaan jollain vaikeammalla tavalla. Seuraavassa esimerkissä (katso hyödyllinen-eventtarget.html nähdäksesi koko lähdekoodin; katso myös, että se on käynnissä täällä), luomme 16 elementtiä JavaScriptin avulla. Valitsemme sitten ne kaikki komennolla document.querySelectorAll() ja käymme sitten läpi jokaisen ja lisäämme kuhunkin onclick-käsittelijän, joka tekee siitä niin, että jokaiseen napsautetaan satunnainen väri:

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

Tulos on seuraava (kokeile napsauttaa sitä - pidä hauskaa):

Piilotettu esimerkki Hyödyllinen tapahtumakohdeesimerkki div ( korkeus: 100 pikseliä; leveys: 25 %; float: vasen; ) for (olkoon i = 1; i