Tämä opas näyttää 'onchange'-tapahtuman tavoitteen ja toiminnan JavaScriptissä.
Kuinka käyttää 'onchange' -tapahtumaa JavaScriptissä?
' vaihdossa ” -tapahtuma aktivoituu, kun määritetyn HTML-elementin arvoa muutetaan. Kun tämä tapahtuma käynnistyy, siihen liittyvä JavaScript-toiminto suoritetaan suorittaakseen tietyn tehtävän.
Syntaksi
esine. vaihdossa = toiminto ( ) { myScript } ;
Yllä olevassa syntaksissa:
- elementti: Se ilmaisee tietyn HTML-elementin.
- funktio(): Se edustaa määritettyä toimintoa, jota kutsutaan tapahtuman liipaisussa.
- myScript: Se viittaa JavaScript-funktion määritelmään tietyn tehtävän suorittamiseksi, kun 'onchange'-tapahtuma tapahtuu.
Syntaksi ('addEventListener()'-menetelmällä)
esine. addEventListener ( 'muuttaa' , myScript ) ;
Yllä olevassa syntaksissa ' addEventListener() menetelmä käyttää vaihdossa ”-tapahtuma suorittaa JavaScript-toiminnon eri tehtävien suorittamista varten.
Esimerkki 1: 'onchange'-tapahtuman käyttäminen valitun arvon näyttämiseen perussyntaksin avulla
Tässä skenaariossa 'onchange'-tapahtuma liittyy asetusluetteloon, joka näyttää muuttuneen vaihtoehdon arvon ja kutsua vastaavan JavaScript-funktion.
HTML-koodi
Katso seuraava HTML-koodi:
< h2 > vaihdossa Tapahtuma JavaScriptissä h2 >< s > Valitse toinen kieli luettelosta. s >
< valitse tunnus = 'demo' vaihdossa = 'Näyte()' >
< vaihtoehdon arvo = 'HTML' > HTML vaihtoehto >
< vaihtoehdon arvo = 'CSS' > CSS vaihtoehto >
< vaihtoehdon arvo = 'JavaScript' > JavaScript vaihtoehto >
valitse >
< p id = 'P1' > s >
Yllä olevassa koodissa:
- Määritä ensin alaotsikko käyttämällä ' ' -tunniste.
- Lisää seuraavaksi kappale ilmoitetun lausunnon kanssa.
- Sen jälkeen '
' -tunniste luo avattavan luettelon, jolla on määritetty tunnus ' demo ' ja ' vaihdossa 'tapahtuma ohjaa toimintoon' Näyte() ”, vastaavasti. - '
- Lopuksi luodaan tyhjä kappale tunnuksella ' P1 ' näyttää valitun/muokatun arvon vaihtoehtoluettelosta.
JavaScript-koodi
Nyt yleiskatsaus seuraavaan JavaScript-koodiin:
< käsikirjoitus >funktionäyte ( ) {
missä = asiakirja. getElementById ( 'demo' ) . arvo ;
asiakirja. getElementById ( 'P1' ) . innerHTML = 'Valittu vaihtoehto on: ' + t ;
}
käsikirjoitus >
Yllä olevassa koodilohkossa:
- Ilmoita ensin funktio nimeltä ' Näyte() ”.
- Käytä sen määritelmässä ' getElementById() ' -menetelmää saadaksesi valitun vaihtoehdon arvon asetusluettelosta '' arvo ” omaisuutta.
- Näytä lopuksi arvo käyttämällä ' innerHTML ” omaisuutta.
Lähtö
Kuten tulosteesta näkyy, kun vaihtoehto valitaan pudotusvalikosta, 'onchange' -tapahtuma laukaisee ja kutsuu vastaavan toiminnon.
Esimerkki 2: 'onchange'-tapahtuman käyttäminen syöttökentän tekstin muuttamiseen isoilla kirjaimilla käyttämällä 'addEventListener()' -menetelmän syntaksia
Tämä esimerkki selittää 'onchange'-tapahtuman, joka toimii muuttamalla syöttötekstikenttä 'isoilla kirjaimilla' 'addEventListener()'-menetelmän avulla.
HTML-koodi
Käy ensin läpi alla toimitettu HTML-koodi:
< h2 > vaihdossa Tapahtuma JavaScriptissä h2 >Nimi : < syötteen tyyppi = 'teksti' id = 'demo' >
< -painiketta > Lähetä -painiketta >
Yllä olevassa HTML-koodissa:
- Määritä tason 2 alaotsikko ' ' -tunniste.
- Lisää seuraavaksi '
' kenttä otsikon ' Nimi ', sisältötyyppi ' teksti ' ja siihen liittyvä tunnus ' demo ”, vastaavasti. - Lisää lopuksi painike '
' -tunniste.
JavaScript-koodi
Katso seuraavaksi seuraava JavaScript-koodi:
< käsikirjoitus >asiakirja. getElementById ( 'demo' ) . addEventListener ( 'muuttaa' , Näyte ) ;
funktionäyte ( ) {
missä = asiakirja. getElementById ( 'demo' ) ;
t. arvo = t. arvo . Isoin kirjaimeen ( ) ;
}
käsikirjoitus >
Tässä koodilohkossa:
- Ensinnäkin ' document.getElementById() menetelmä käyttää muuttaa ' tapahtuma, joka muuttaa syötetyn tekstikentän arvoa, jolla on tunnus ' demo ” painiketta napsauttamalla.
- Seuraavaksi määritellään funktio 'Sample()', joka käyttää 'document.getElementById()'-menetelmää päästäkseen syöttötekstikenttään 'demo' ja muuttaa sitten sen arvoksi 'Isot kirjaimet' ' Isot kirjaimet() ”menetelmä.
Lähtö
Kuten näkyy, syöttöteksti on muutettu isoiksi kirjaimille painiketta napsauttamalla.
Johtopäätös
JavaScript tarjoaa yleisesti käytetyn ' vaihdossa ”tapahtuma, joka laukeaa heti, kun tietyn elementin arvon tila muuttuu. Se on samanlainen kuin ' sisääntulossa ' -tapahtuma, mutta 'oninput' tapahtuu välittömästi arvon muuttuessa, kun taas 'onchange' -tapahtuma laukeaa, kun tapahtuman arvo menettää fokuksen. Tämä opas esitteli 'onchange'-tapahtuman tavoitteen, toiminnan ja käytön JavaScriptissä.