Številne spletne aplikacije se za izvajanje svojih funkcij zanašajo na neko obliko dogodka. Na neki točki človek komunicira s svojim vmesnikom, kar ustvari dogodek. Ti dogodki, ki jih vodijo ljudje, so običajno odvisni od periferne naprave, kot je miška ali tipkovnica.

Ko naprava ustvari dogodek, ga lahko program posluša, da ve, kdaj izvesti določeno vedenje. V tej vadnici se boste naučili poslušati dogodke z uporabo JavaScripta.

Kaj je programiranje na podlagi dogodkov?

Dogodkovno vodeno programiranje je ime paradigme, ki se za opravljanje svojih funkcij opira na izvedbo dogodka. Možno je ustvariti program, ki temelji na dogodkih, v katerem koli programskem jeziku na visoki ravni. Toda programiranje na podlagi dogodkov je najpogostejše v jezikih, kot je JavaScript, ki se integrirajo z uporabniškim vmesnikom.

Kaj je poslušalec dogodkov?

Poslušalnik dogodkov je funkcija, ki sproži vnaprej določen proces, če pride do določenega dogodka. Torej poslušalec dogodkov »posluša« dejanje, nato pokliče funkcijo, ki izvede povezano nalogo. Ta dogodek ima lahko eno od mnogih oblik. Pogosti primeri vključujejo dogodke miške, dogodke tipkovnice in dogodke oken.

Ustvarjanje poslušalca dogodkov z uporabo JavaScripta

Dogodke lahko poslušate na katerem koli element v DOM. JavaScript ima addEventListener() funkcijo, ki jo lahko pokličete na katerem koli elementu na spletni strani. The addEventListener() funkcija je metoda Cilj dogodka vmesnik. Vsi objekti, ki podpirajo dogodke, izvajajo ta vmesnik. To vključuje okno, dokument in posamezne elemente na strani.

Funkcija addEventListener() ima naslednjo osnovno strukturo:

element.addEventListener("dogodek", functionToExecute);

Kje:

• the element lahko predstavlja katero koli oznako HTML (od gumba do odstavka)
• the "dogodek" je niz, ki poimenuje določeno, prepoznano dejanje
• the functionToExecute je sklicevanje na obstoječo funkcijo

Ustvarimo naslednjo spletno stran, ki ima nekaj elementov HTML:

Dobrodošli


 Pozdravljeni, dobrodošli na moji spletni strani.


Nauči se več





Informacije o uporabniku

Uporabniško ime: 

Pošlji

Zgornja koda HTML ustvari preprosto stran, ki je povezana z datoteko JavaScript, imenovano app.js. The app.js bo vsebovala kodo za nastavitev poslušalcev dogodkov. Torej, če želite začeti določen postopek, ko uporabnik klikne prvi gumb na spletni strani, je to datoteka, v kateri ga želite ustvariti.

Datoteka app.js

document.querySelector('.btn').addEventListener("klik", klikDemo)
funkcija clickDemo(){
 console.log("Živjo")
}

Zgornja koda JavaScript dostopa do prvega gumba na strani z uporabo querySelector() funkcijo. Nato temu elementu doda poslušalca dogodkov z uporabo addEventListener() metoda. Konkretni dogodek, ki ga posluša, ima ime »klik«. Ko gumb sproži ta dogodek, bo poslušalec poklical kliknite Demo() funkcijo.

Povezano: Naučite se uporabljati izbirnike DOM

The kliknite Demo() funkcija natisne »Živjo« na konzolo brskalnika. Vsakič, ko kliknete gumb, bi morali videti ta izhod v svoji konzoli.

Izhod dogodka »klik«.

Kaj so dogodki miške?

JavaScript ima MouseEvent vmesnik, ki predstavlja dogodke, ki se pojavijo zaradi interakcije uporabnika z miško. Več dogodkov uporablja MouseEvent vmesnik. Ti dogodki vključujejo naslednje:

• kliknite
• dblclick
• mousemove
• miško
• mouseout
• mouseup
• mousedown

The kliknite dogodek se zgodi, ko uporabnik pritisne in spusti gumb miške, medtem ko je njegov kazalec nad elementom. Točno to se je zgodilo v prejšnjem primeru. Kot lahko vidite na zgornjem seznamu, imajo lahko dogodki miške različne oblike.

Drug pogost dogodek miške je dblclick, kar pomeni dvojni klik. To se sproži, ko uporabnik dvakrat hitro zapored klikne gumb miške. Izjemna stvar o addEventListener() funkcija je, da jo lahko uporabite za dodelitev več poslušalcev dogodkov posameznemu elementu.

Dodajanje dogodka dblclick prvemu gumbu

document.querySelector('.btn').addEventListener("dblclick", dblclickDemo)
funkcija dblclickDemo(){
 alert("To je predstavitev, kako ustvariti dogodek dvojnega klika")
}

Če zgornjo kodo dodate datoteki app.js, boste dejansko ustvarili drugi poslušalec dogodkov za prvi gumb na spletni strani. Torej, če dvakrat kliknete prvi gumb, boste v brskalniku ustvarili naslednje opozorilo:

Na zgornji sliki boste videli ustvarjeno opozorilo, prav tako pa boste videli, da sta v konzoli še dva izhoda »Živjo«. To je zato, ker je dogodek dvojnega klika kombinacija dveh dogodkov klikov in obstajajo poslušalci dogodkov za oba kliknite in dblclick dogodkov.

Imena drugih dogodkov miške na seznamu opisujejo njihovo vedenje. The mousemove dogodek se pojavi vsakič, ko uporabnik premakne miško, ko je kazalec nad elementom. The mouseup Do dogodka pride, ko uporabnik drži gumb nad elementom in ga nato spusti.

Kaj so dogodki na tipkovnici?

JavaScript ima KeyboardEvent vmesnik. To posluša interakcije med uporabnikom in njegovo tipkovnico. V preteklosti, KeyboardEvent imel tri vrste dogodkov. Vendar je JavaScript od takrat opustil pritisk na tipko dogodek.

Torej keyup in tipko navzdol dogodki sta edina priporočena dogodka s tipkovnico, kar je vse, kar potrebujete. The tipko navzdol dogodek se zgodi, ko uporabnik pritisne na tipko, in keyup dogodek se zgodi, ko ga uporabnik sprosti.

Če pogledamo zgornji primer HTML, je najboljše mesto za dodajanje poslušalca dogodkov na tipkovnici na vnos element.

Dodajanje poslušalca dogodkov tipkovnice v datoteko app.js

pusti pozdrav = document.querySelector('p');
document.querySelector('input').addEventListener("keyup", captureInput)
funkcija captureInput (e){
 greetings.innerText = (`Pozdravljeni, ${e.target.value}, dobrodošli na mojem spletnem mestu.`)
}

Zgornja koda uporablja querySelector() funkcija za dostop do odstavka in vnos elementov na strani. Nato pokliče addEventListener() metoda na vnos element, ki posluša keyup dogodek. Kadar koli a keyup zgodi dogodek, captureInput() funkcija vzame ključno vrednost in jo doda odstavku na strani. The e parameter predstavlja dogodek, ki ga JavaScript dodeli samodejno. Ta objekt dogodka ima lastnost, cilj, ki je sklic na element, s katerim je uporabnik sodeloval.

V tem primeru je oznaka, pritrjena na vnos polje zahteva uporabniško ime. Če v polje za vnos vnesete svoje ime, bo spletna stran videti nekako takole:

Odstavek zdaj vsebuje vhodno vrednost, ki je v zgornjem primeru »Jane Doe«.

addEventListener zajame vse vrste uporabniških interakcij

Ta članek vas je seznanil z addEventListener() metodo, pa tudi več dogodkov miške in tipkovnice, ki jih lahko uporabite z njo. Na tej točki veste, kako poslušati določen dogodek in kako ustvariti funkcijo, ki se nanj odzove.

The addEventListener vendar zagotavlja dodatno zmogljivost prek svojega tretjega parametra. Uporabite ga lahko za nadzor širjenja dogodkov: vrstni red, v katerem se dogodki premikajo od elementov do njihovih staršev ali otrok.

Razumevanje širjenja dogodkov v JavaScriptu

Dogodki so zmogljiva funkcija JavaScript. Razumevanje, kako jih spletni brskalnik postavlja proti elementom, je ključnega pomena za obvladovanje njihove uporabe.

Preberite Naprej

O avtorju