Monet verkkosovellukset luottavat jonkinlaiseen tapahtumaan toimintojensa suorittamiseksi. Jossain vaiheessa ihminen on vuorovaikutuksessa heidän käyttöliittymänsä kanssa, mikä synnyttää tapahtuman. Nämä ihmisvetoiset tapahtumat perustuvat tyypillisesti oheislaitteeseen, kuten hiireen tai näppäimistöön.

Kun laite luo tapahtuman, ohjelma voi kuunnella sitä tietääkseen, milloin tietyn toiminnan tulee suorittaa. Tässä opetusohjelmassa opit kuuntelemaan tapahtumia JavaScriptin avulla.

Mitä on tapahtumalähtöinen ohjelmointi?

Tapahtumaohjattu ohjelmointi on paradigman nimi, joka perustuu tapahtuman suorittamiseen toimintojensa suorittamiseksi. On mahdollista luoda tapahtumapohjainen ohjelma millä tahansa korkean tason ohjelmointikielellä. Mutta tapahtumaohjattu ohjelmointi on yleisintä käyttöliittymään integroitavilla kielillä, kuten JavaScript.

Mikä on tapahtumien kuuntelija?

Tapahtuman kuuntelija on toiminto, joka käynnistää ennalta määritellyn prosessin, jos tietty tapahtuma tapahtuu. Joten tapahtuman kuuntelija "kuuntelee" toimintoa ja kutsuu sitten toiminnon, joka suorittaa siihen liittyvän tehtävän. Tämä tapahtuma voi olla yksi monista muodoista. Yleisiä esimerkkejä ovat hiiritapahtumat, näppäimistötapahtumat ja ikkunatapahtumat.

Tapahtumaseuraajan luominen JavaScriptillä

Voit kuunnella tapahtumia mistä tahansa elementti DOM: ssa. JavaScriptissä on addEventListener() toiminto, jota voit kutsua mihin tahansa web-sivun elementtiin. The addEventListener() toiminto on menetelmä Tapahtumakohde käyttöliittymä. Kaikki tapahtumia tukevat objektit toteuttavat tämän käyttöliittymän. Tämä sisältää ikkunan, asiakirjan ja yksittäiset elementit sivulla.

AddEventListener()-funktiolla on seuraava perusrakenne:

element.addEventListener("tapahtuma", Suoritettava toiminto);

Missä:

• the elementti voi edustaa mitä tahansa HTML-tunnistetta (painikkeesta kappaleeseen)
• the "tapahtuma" on merkkijono, joka nimeää tietyn, tunnistetun toiminnon
• the Suoritettava toiminto on viittaus olemassa olevaan funktioon

Luodaan seuraava verkkosivu, jossa on muutama HTML-elementti:

Tervetuloa


 Hei, tervetuloa sivuilleni.


Lisätietoja





käyttäjätiedot

Käyttäjänimi: 

Lähetä

Yllä oleva HTML-koodi luo yksinkertaisen sivun, joka linkittää JavaScript-tiedostoon nimeltä app.js. The app.js tiedosto sisältää koodin tapahtumakuuntelijoiden määrittämiseksi. Joten jos haluat käynnistää tietyn prosessin aina, kun käyttäjä napsauttaa ensimmäistä painiketta verkkosivulla, tämä on tiedosto, johon se luodaan.

App.js-tiedosto

document.querySelector('.btn').addEventListener("napsauta", napsautaDemo)
function clickDemo(){
 console.log("Hei")
}

Yllä oleva JavaScript-koodi käyttää sivun ensimmäistä painiketta käyttämällä querySelector() toiminto. Sitten se lisää tapahtumakuuntelijan tähän elementtiin käyttämällä addEventListener() menetelmä. Tietyn tapahtuman, jota se kuuntelee, nimi on "click". Kun painike laukaisee tapahtuman, kuuntelija soittaa clickDemo() toiminto.

Aiheeseen liittyvä: Opi käyttämään DOM-valitsimia

The clickDemo() toiminto tulostaa "Hei" selainkonsoliin. Joka kerta kun napsautat painiketta, sinun pitäisi nähdä tämä tulos konsolissasi.

"Klikkaus" -tapahtuman tulos

Mitä ovat hiiritapahtumat?

JavaScriptissä on a MouseEvent käyttöliittymä, joka edustaa tapahtumia, jotka johtuvat käyttäjän vuorovaikutuksesta hiiren kanssa. Useat tapahtumat käyttävät MouseEvent käyttöliittymä. Näihin tapahtumiin kuuluvat seuraavat:

• klikkaus
• dblclick
• hiiren siirto
• hiiren osoitin
• hiiri pois
• hiiri
• hiiri alas

The klikkaus Tapahtuma tapahtuu, kun käyttäjä painaa ja vapauttaa hiiren painiketta, kun sen osoitin on elementin päällä. Juuri näin tapahtui edellisessä esimerkissä. Kuten yllä olevasta luettelosta näet, hiiritapahtumat voivat olla monimuotoisia.

Toinen yleinen hiiritapahtuma on dblclick, joka tarkoittaa kaksoisnapsautusta. Tämä käynnistyy, kun käyttäjä napsauttaa hiiren painiketta kahdesti nopeasti peräkkäin. Merkittävä asia ko addEventListener() toiminto on, että voit määrittää sen avulla useita tapahtumakuuntelijoita yhdelle elementille.

dblclick-tapahtuman lisääminen ensimmäiseen painikkeeseen

document.querySelector('.btn').addEventListener("dblclick", dblclickDemo)
function dblclickDemo(){
 alert("Tämä on esittely kaksoisnapsautustapahtuman luomisesta")
}

Yllä olevan koodin lisääminen app.js-tiedostoon luo toisen tapahtumaseuraajan verkkosivun ensimmäiselle painikkeelle. Joten ensimmäisen painikkeen napsauttaminen kahdesti luo selaimeen seuraavan varoituksen:

Yllä olevassa kuvassa näet luodun hälytyksen, ja näet myös, että konsolissa on kaksi muuta "Hei" -ulostuloa. Tämä johtuu siitä, että kaksoisnapsautustapahtuma on kahden napsautustapahtuman yhdistelmä ja molemmille on tapahtumakuuntelijoita klikkaus ja dblclick Tapahtumat.

Listassa olevien muiden hiiritapahtumien nimet kuvaavat niiden toimintaa. The hiiren siirto Tapahtuma tapahtuu aina, kun käyttäjä siirtää hiirtä, kun osoitin on elementin päällä. The hiiri Tapahtuma tapahtuu, kun käyttäjä pitää painiketta elementin päällä ja vapauttaa sen sitten.

Mitä ovat näppäimistötapahtumat?

JavaScriptissä on a Keyboard Event käyttöliittymä. Tämä kuuntelee käyttäjän ja näppäimistön välistä vuorovaikutusta. Menneisyydessä, Keyboard Event oli kolme tapahtumatyyppiä. JavaScript on kuitenkin sittemmin poistanut käytöstä näppäinpainallus tapahtuma.

Joten avaimet ja näppäin alas Tapahtumat ovat ainoat kaksi suositeltua näppäimistötapahtumaa, jotka ovat kaikki mitä tarvitset. The näppäin alas tapahtuma tapahtuu, kun käyttäjä painaa näppäintä ja avaimet tapahtuma tapahtuu, kun käyttäjä vapauttaa sen.

Katsomalla yllä olevaa HTML-esimerkkiä, paras paikka lisätä näppäimistötapahtuman kuuntelija on syöttö elementti.

Näppäimistön tapahtumaseuraajan lisääminen app.js-tiedostoon

anna tervehdys = document.querySelector('p');
document.querySelector('input').addEventListener("avain", captureInput)
function captureInput (e){
 greetings.innerText = (`Hei ${e.target.value}, tervetuloa verkkosivustolleni.`)
}

Yllä oleva koodi käyttää querySelector() toiminto päästäksesi kappaleeseen ja syöttö sivulla olevia elementtejä. Sitten se kutsuu addEventListener() menetelmällä syöttö elementti, joka kuuntelee avaimet tapahtuma. Aina kun a avaimet tapahtuma tapahtuu, captureInput() -toiminto ottaa avaimen arvon ja lisää sen sivun kappaleeseen. The e parametri edustaa tapahtumaa, jonka JavaScript määrittää automaattisesti. Tällä tapahtumaobjektilla on ominaisuus, kohde, joka on viittaus elementtiin, jonka kanssa käyttäjä oli vuorovaikutuksessa.

Tässä esimerkissä tarra, joka on kiinnitetty syöttö kenttä pyytää käyttäjätunnusta. Jos kirjoitat nimesi syöttökenttään, verkkosivu näyttää suunnilleen tältä:

Kappale sisältää nyt syöttöarvon, joka yllä olevassa esimerkissä on "Jane Doe".

addEventListener kaappaa kaikenlaisia ​​käyttäjävuorovaikutuksia

Tämä artikkeli esitteli sinut addEventListener() menetelmä, sekä useita hiiri- ja näppäimistötapahtumia, joita voit käyttää sen kanssa. Tässä vaiheessa tiedät kuinka kuunnella tiettyä tapahtumaa ja miten luoda toiminto, joka reagoi siihen.

The addEventListener tarjoaa kuitenkin lisäominaisuuksia kolmannen parametrinsa kautta. Voit käyttää sitä ohjaamaan tapahtumien leviämistä: järjestystä, jossa tapahtumat siirtyvät elementeistä vanhemmilleen tai lapsilleen.

Tapahtuman leviämisen ymmärtäminen JavaScriptissä

Tapahtumat ovat tehokas JavaScript-ominaisuus. Sen ymmärtäminen, kuinka verkkoselain nostaa ne elementtejä vastaan, on avain niiden käytön hallitsemiseen.

Lue Seuraava

Kirjailijasta