Denne veiledningen vil demonstrere formålet og virkemåten til 'onchange'-hendelsen i JavaScript.
Hvordan bruke en 'onchange'-hendelse i JavaScript?
« ved endring ”-hendelsen aktiveres når verdien til det angitte HTML-elementet endres. Når denne hendelsen utløses, kjøres den tilknyttede JavaScript-funksjonen for å utføre den spesifikke oppgaven.
Syntaks
gjenstand. ved endring = funksjon ( ) { myScript } ;
I syntaksen ovenfor:
- element: Det angir det bestemte HTML-elementet.
- funksjon(): Den representerer den definerte funksjonen som vil bli påkalt ved hendelsestriggeren.
- myScript: Det refererer til JavaScript-funksjonsdefinisjonen for å utføre den spesifikke oppgaven når 'onchange'-hendelsen inntreffer.
Syntaks(Med 'addEventListener()'-metoden)
gjenstand. addEventListener ( 'endring' , myScript ) ;
I syntaksen ovenfor, ' addEventListener() '-metoden bruker ' ved endring ”-hendelse for å utføre JavaScript-funksjonen for å utføre ulike oppgaver.
Eksempel 1: Bruk av «onchange»-hendelsen for å vise valgt verdi ved å bruke grunnleggende syntaks
I dette scenariet er en 'onchange'-hendelse knyttet til en alternativliste for å vise den endrede alternativverdien og påkalle den tilsvarende JavaScript-funksjonen.
HTML-kode
Ta en titt på følgende HTML-kode:
< h2 > ved endring Begivenhet i JavaScript h2 >< s > Velg et annet språk fra listen. s >
< velg id = 'demo' ved endring = 'Prøve()' >
< opsjonsverdi = 'HTML' > HTML alternativ >
< opsjonsverdi = 'CSS' > CSS alternativ >
< opsjonsverdi = 'JavaScript' > JavaScript alternativ >
plukke ut >
< p id = 'P1' > s >
I koden ovenfor:
- Først definerer du en underoverskrift ved å bruke ' ' stikkord.
- Deretter legger du til et avsnitt med det angitte utsagnet.
- Etter det, '
' tag lager en rullegardinliste med en tildelt id ' demo ' og ' ved endring ' hendelse omdirigerer til funksjonen ' Prøve() ', henholdsvis. - I brødteksten til «
»-taggen spesifiseres en liste over alternativer ved hjelp av « ' stikkord. - Til slutt opprettes et tomt avsnitt med en id ' P1 ” for å vise den valgte/endrede verdien fra alternativlisten.
JavaScript-kode
Nå, oversikt over følgende JavaScript-kode:
< manus >funksjon Eksempel ( ) {
hvor = dokument. getElementById ( 'demo' ) . verdi ;
dokument. getElementById ( 'P1' ) . indreHTML = 'Det valgte alternativet er: ' + t ;
}
manus >
I kodeblokken ovenfor:
- Først av alt, erklær en funksjon som heter ' Prøve() '.
- I sin definisjon, bruk ' getElementById() ' metode for å få tilgang til verdien av det valgte alternativet fra alternativlisten via ' verdi ' eiendom.
- Til slutt, vis verdien ved å bruke ' indreHTML ' eiendom.
Produksjon
Som vist i utdataene, når du velger et alternativ fra rullegardinmenyen, utløser og påkaller 'onchange'-hendelsen den tilsvarende funksjonen.
Eksempel 2: Bruk av «onchange»-hendelse for å endre inndatafelttekst med store bokstaver ved å bruke «addEventListener()»-metodesyntaks
Dette eksemplet forklarer 'onchange'-hendelsen som fungerer ved å endre inndatatekstfeltet til 'store bokstaver' ved hjelp av 'addEventListener()'-metoden.
HTML-kode
Gå først gjennom HTML-koden nedenfor:
< h2 > ved endring Begivenhet i JavaScript h2 >Navn : < inndatatype = 'tekst' id = 'demo' >
< knapp > Sende inn knapp >
I HTML-koden ovenfor:
- Definer en underoverskrift til nivå 2 via ' ' stikkord.
- Deretter legger du til en ' '-feltet ved etiketten ' Navn ', innholdstype ' tekst ', og den tilknyttede ID-en ' demo ', henholdsvis.
- Til slutt, ta med en knapp ved å bruke '
' stikkord.
JavaScript-kode
Se deretter på følgende JavaScript-kode:
< manus >dokument. getElementById ( 'demo' ) . addEventListener ( 'endring' , Prøve ) ;
funksjon Eksempel ( ) {
hvor = dokument. getElementById ( 'demo' ) ;
t. verdi = t. verdi . til Store bokstaver ( ) ;
}
manus >
I denne kodeblokken:
- Først ' document.getElementById() '-metoden bruker ' endring '-hendelse som vil resultere i å endre verdien på inndatatekstfeltet med id ' demo ” ved knappeklikk.
- Deretter er funksjonen 'Sample()' definert som bruker 'document.getElementById()'-metoden for å få tilgang til inngangstekstfeltet 'demo' og deretter endrer verdien til 'Store bokstaver' via ' Stor bokstav() 'metoden.
Produksjon
Som vist har inndatateksten blitt konvertert til store bokstaver ved knappeklikk.
Konklusjon
JavaScript tilbyr det ofte brukte ' ved endring ”-hendelse som utløses så snart tilstanden til verdien til et bestemt element endres. Det ligner på ' på inngang '-hendelse, men 'oninput' oppstår umiddelbart når verdien endres, mens 'onchange'-hendelsen utløses når verdien av hendelsen mister fokus. Denne veiledningen demonstrerte målet, virkemåten og bruken av 'onchange'-hendelsen i JavaScript.