Tapahtumat ovat toimintoja tai tapahtumia, jotka tapahtuvat järjestelmässä. Ohjelmoinnin maailmassa tapahtumia tapahtuu HTML-elementeille. Mutta kun käytetään HTML-sivuilla, se voi reagoida näihin tapahtumiin. Tässä artikkelissa näemme, mitkä ovat JavaScriptin erityyppiset tapahtumat ja miten ne toimivat seuraavassa järjestyksessä:
Mitä ovat tapahtumat JavaScriptissä?
Javascriptissa on tapahtumia, jotka tarjoavat dynaamisen käyttöliittymän verkkosivulle. Nämä tapahtumat on yhdistetty Asiakirjan objektimalli (TUOMIO).
Myös nämä tapahtumat käyttävät oletuksena kuplivaa etenemistä eli ylöspäin DOM: ssa lapsista vanhempiin. Voimme sitoa tapahtumia joko inline-muodossa tai ulkoisena komentotiedostona. JavaScriptin avulla voit havaita, kun tietyt tapahtumat tapahtuvat, ja saada asioita tapahtumaan vastauksena näihin tapahtumiin.
Tapahtumatyypit JavaScriptissä
Kohteessa on erilaisia tapahtumia joita käytetään reagoimaan tapahtumiin. Tässä keskustelemme kuuluisimmista tai yleisimmin käytetyistä tapahtumista, kuten:
- Klikkaamalla
- Onkeyup
- Onmouseover
- Lastina
- Kohdistus
Joten siirrymme eteenpäin ja katsotaanpa näitä tapahtumia JavaScript-esimerkissä.
java on-suhde
Onclick-tapahtuma
Onclick-tapahtuma on hiiritapahtuma ja saa aikaan minkä tahansa määritellyn logiikan, jos käyttäjä napsauttaa elementtiä, johon se on sidottu. Otetaan esimerkki ja katsotaan, miten se toimii:
function edu () {alert ('Tervetuloa Edurekaan!')} Napsauta painiketta
Tuotos:
Napsautettuasi painiketta saat seuraavan hälytysviestin:
Onekeyup-tapahtuma
Tämä tapahtuma on näppäimistötapahtuma, ja sitä käytetään ohjeiden suorittamiseen aina, kun näppäin vapautetaan painamisen jälkeen. Seuraava esimerkki näyttää tapahtuman toiminnan:
var a = 0 var b = 0 var c = 0 funktion muutosTausta () {var x = document.getElementById ('bg') bg.style.backgroundColor = 'rgb (' + a + ',' + b + ',' + c + ')' a + = 1 b + = a + 1 c + = b + 1 jos (a> 255) a = a - b jos (b> 255) b = a jos (c> 255) c = b}
Tuotos:
Kun olet kirjoittanut jotain, se näyttää tältä:
Onmouseover -tapahtuma
Onmouseover-tapahtuma JavaScriptissä vastaa hiiren osoittimen viemistä elementin ja sen lasten päälle, joihin se on sidottu. Esimerkki on esitetty alla:
function hov () {var e = document.getElementById ('hover') e.style.display = 'none'}
Tuotos:
Värillinen ruutu ilmestyy ennen hiiren osoittamista. Heti kun viet hiiren laatikon päälle, se katoaa.
Onload-tapahtuma
Kuormitustapahtuma herätetään, kun elementti ladataan kokonaan. Otetaan esimerkki ja katsotaan, miten se toimii:
Tuotos:
Onfocus-tapahtuma
Onfocus-tapahtumassa on elementtiluettelo, joka suorittaa ohjeet aina, kun se saa kohdistuksen. Seuraava esimerkki osoittaa, miten onfocus-tapahtuma toimii:
toimintokeskeinen () {var e = document.getElementById ('input') if (vahvista ('Focus Event')) {e.blur ()}}Tarkenna syöttöruudussa:
Tuotos:
Nämä ovat joitain JavaScriptin yleisimmin käytettyjä tapahtumia. Tämän avulla olemme päässeet artikkelimme loppuun. Toivon, että ymmärsit tapahtumia ja miten niitä käytetään.
Katso meidän joka sisältää ohjaajan vetämän live-koulutuksen ja tosielämän projektikokemuksen. Tämä koulutus antaa sinulle taitoja työskennellä back-end- ja front-end-verkkoteknologioiden kanssa. Se sisältää koulutusta verkkokehityksestä, jQuerystä, Angularista, NodeJS: stä, ExpressJS: stä ja MongoDB: stä.
Onko sinulla kysymys meille? Mainitse se tämän blogin kommenttiosassa ja palaamme sinuun.