Mitä ovat JavaScriptin tapahtumat ja miten niitä hoidetaan?

JavaScript-tapahtumat tarjoavat dynaamisen käyttöliittymän verkkosivulle. Nämä tapahtumat on liitetty DOM (Document Object Model) -elementteihin.

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:

Lähtö 1 - tapahtumat javascriptissä - edureka

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:

  edu-logo 

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.