Denne guide vil demonstrere formålet med og virkemåden for 'onchange'-hændelsen i JavaScript.
Hvordan bruger man en 'onchange'-begivenhed i JavaScript?
Det ' ved ændring ” hændelse aktiveres, når værdien af det angivne HTML-element ændres. Når denne hændelse udløses, udføres den tilknyttede JavaScript-funktion for at udføre den specifikke opgave.
Syntaks
objekt. ved ændring = fungere ( ) { myScript } ;
I ovenstående syntaks:
- element: Det angiver det særlige HTML-element.
- fungere(): Det repræsenterer den definerede funktion, der vil blive påkaldt ved hændelsesudløseren.
- myScript: Det refererer til JavaScript-funktionsdefinitionen for at udføre den specifikke opgave, når 'onchange'-hændelsen opstår.
Syntaks(Med 'addEventListener()'-metoden)
objekt. addEventListener ( 'lave om' , myScript ) ;
I ovenstående syntaks er ' addEventListener() '-metoden bruger ' ved ændring ” hændelse for at udføre JavaScript-funktionen til udførelse af forskellige opgaver.
Eksempel 1: Anvendelse af 'onchange'-hændelsen til at vise den valgte værdi ved hjælp af grundlæggende syntaks
I dette scenarie er en 'onchange'-hændelse knyttet til en valgliste for at vise den ændrede indstillingsværdi og aktivere den tilsvarende JavaScript-funktion.
HTML kode
Tag et kig på følgende HTML-kode:
< h2 > ved ændring Begivenhed i JavaScript h2 >< s > Vælg et andet sprog fra listen. s >
< vælg id = 'demo' ved ændring = 'Prøve()' >
< option værdi = 'HTML' > HTML mulighed >
< option værdi = 'CSS' > CSS mulighed >
< option værdi = 'JavaScript' > JavaScript mulighed >
Vælg >
< p id = 'P1' > s >
I ovenstående kode:
- Først skal du definere en underoverskrift ved hjælp af ' ” tag.
- Tilføj derefter et afsnit med det angivne udsagn.
- Derefter vil '
' tag opretter en rulleliste med et tildelt id ' demo ' og ' ved ændring ' begivenhed omdirigerer til funktionen ' Prøve() ', henholdsvis. - I brødteksten af '
'-tagget er en liste over muligheder angivet ved hjælp af ' ” tag. - Til sidst oprettes et tomt afsnit med et id ' P1 ” for at vise den valgte/ændrede værdi fra valglisten.
JavaScript kode
Nu, oversigt over følgende JavaScript-kode:
< manuskript >funktion Eksempel ( ) {
hvor = dokument. getElementById ( 'demo' ) . værdi ;
dokument. getElementById ( 'P1' ) . indreHTML = 'Den valgte indstilling er: ' + t ;
}
manuskript >
I ovenstående kodeblok:
- Først og fremmest skal du erklære en funktion ved navn ' Prøve() ”.
- Anvend i sin definition ' getElementById() ”-metoden for at få adgang til værdien af den valgte mulighed fra valglisten via “ værdi ” ejendom.
- Til sidst skal du vise værdien ved hjælp af ' indreHTML ” ejendom.
Produktion
Som det ses i outputtet, udløser og påkalder 'onchange'-hændelsen den tilsvarende funktion, når du vælger en mulighed fra rullemenuen.
Eksempel 2: Anvendelse af 'onchange'-hændelse for at ændre inputfelttekst med store bogstaver ved hjælp af 'addEventListener()'-metodesyntaks
Dette eksempel forklarer 'onchange'-hændelsen, der fungerer ved at ændre inputtekstfeltet til 'store bogstaver' ved hjælp af 'addEventListener()'-metoden.
HTML kode
Gå først igennem den nedenstående HTML-kode:
< h2 > ved ændring Begivenhed i JavaScript h2 >Navn : < input type = 'tekst' id = 'demo' >
< knap > Indsend knap >
I ovenstående HTML-kode:
- Definer en underoverskrift på niveau 2 via ' ” tag.
- Tilføj derefter en ' ' felt ved etiketten ' Navn ', indholdstype ' tekst ', og det tilhørende id ' demo ', henholdsvis.
- Medtag endelig en knap ved hjælp af '
” tag.
JavaScript kode
Dernæst skal du se på følgende JavaScript-kode:
< manuskript >dokument. getElementById ( 'demo' ) . addEventListener ( 'lave om' , prøve ) ;
funktion Eksempel ( ) {
hvor = dokument. getElementById ( 'demo' ) ;
t. værdi = t. værdi . til Store bogstaver ( ) ;
}
manuskript >
I denne kodeblok:
- For det første ' document.getElementById() '-metoden bruger ' lave om ' hændelse, der vil resultere i at ændre værdien af input tekstfeltet med id ' demo ” ved knapklik.
- Dernæst defineres funktionen 'Sample()', som bruger 'document.getElementById()'-metoden til at få adgang til inputtekstfeltet 'demo' og derefter ændrer dens værdi til 'store bogstaver' via ' Store bogstaver() ” metode.
Produktion
Som det ses, er inputteksten blevet konverteret til store bogstaver ved knapklik.
Konklusion
JavaScript tilbyder det almindeligt anvendte ' ved ændring ” hændelse, der udløses, så snart tilstanden af værdien af et bestemt element ændres. Det ligner ' oninput ”-hændelse, men ”oninput” forekommer øjeblikkeligt, når værdien ændres, mens ”onchange”-hændelsen udløses, når værdien af hændelsen mister fokus. Denne vejledning demonstrerede formålet, virkemåden og brugen af 'onchange'-hændelsen i JavaScript.