Deze gids zal het doel en de werking van het 'onchange' -gebeurtenis in JavaScript demonstreren.
Hoe een 'onchange' -gebeurtenis in JavaScript te gebruiken?
De ' op verandering ”-gebeurtenis wordt geactiveerd wanneer de waarde van het opgegeven HTML-element wordt gewijzigd. Wanneer deze gebeurtenis wordt geactiveerd, wordt de bijbehorende JavaScript-functie uitgevoerd om de specifieke taak uit te voeren.
Syntaxis
voorwerp. op verandering = functie ( ) { mijnScript } ;
In de bovenstaande syntaxis:
- element: Het geeft het specifieke HTML-element aan.
- functie(): Het vertegenwoordigt de gedefinieerde functie die wordt aangeroepen bij de trigger van de gebeurtenis.
- mijnScript: Het verwijst naar de JavaScript-functiedefinitie om de specifieke taak uit te voeren wanneer de gebeurtenis 'onchange' plaatsvindt.
Syntaxis (met methode 'addEventListener()')
voorwerp. addEventListener ( 'wijziging' , mijnScript ) ;
In de bovenstaande syntaxis is de ' addEventListener() ” methode maakt gebruik van de “ op verandering ”-gebeurtenis om de JavaScript-functie uit te voeren voor het uitvoeren van verschillende taken.
Voorbeeld 1: de gebeurtenis 'onchange' toepassen om geselecteerde waarde weer te geven met behulp van basissyntaxis
In dit scenario wordt een 'onchange'-gebeurtenis gekoppeld aan een optielijst om de gewijzigde optiewaarde weer te geven en de bijbehorende JavaScript-functie aan te roepen.
HTML code
Kijk eens naar de volgende HTML-code:
< h2 > op verandering Evenement in javascript h2 >< P > Kies een andere taal uit de lijst. P >
< selecteer id = 'demonstratie' op verandering = 'Steekproef()' >
< Optie waarde = 'HTML' > HTML keuze >
< Optie waarde = 'CSS' > CSS keuze >
< Optie waarde = 'JavaScript' > javascript keuze >
selecteren >
< p id = 'P1' > P >
In bovenstaande code:
- Definieer eerst een subkop met behulp van de ' ' label.
- Voeg vervolgens een alinea toe met de genoemde verklaring.
- Daarna is de “
” tag maakt een vervolgkeuzelijst met een toegewezen id “ demo ' en de ' op verandering ”gebeurtenis verwijst door naar de functie “ Steekproef() ”, respectievelijk. - In de hoofdtekst van de tag '
- Als laatste wordt er een lege paragraaf aangemaakt met een id “ P1 ” om de geselecteerde/gewijzigde waarde uit de optielijst weer te geven.
JavaScript-code
Nu een overzicht van de volgende JavaScript-code:
< script >functie Voorbeeld ( ) {
waar = document. getElementById ( 'demonstratie' ) . waarde ;
document. getElementById ( 'P1' ) . binnenHTML = 'Geselecteerde optie is: ' + T ;
}
script >
In het bovenstaande codeblok:
- Verklaar allereerst een functie met de naam ' Steekproef() ”.
- Pas in zijn definitie de ' getElementById() ' methode om toegang te krijgen tot de waarde van de geselecteerde optie uit de optielijst via de ' waarde ' eigendom.
- Geef ten slotte de waarde weer met behulp van de ' binnenHTML ' eigendom.
Uitgang
Zoals te zien is in de uitvoer, wordt bij het selecteren van een optie in de vervolgkeuzelijst de gebeurtenis 'onchange' geactiveerd en wordt de bijbehorende functie aangeroepen.
Voorbeeld 2: de gebeurtenis 'onchange' toepassen om de tekst van het invoerveld in hoofdletters te wijzigen met de syntaxis van de methode 'addEventListener()'
In dit voorbeeld wordt uitgelegd hoe de gebeurtenis 'onchange' werkt door het invoertekstveld te wijzigen in 'Hoofdletters' met behulp van de methode 'addEventListener()'.
HTML code
Ga eerst door de onderstaande HTML-code:
< h2 > op verandering Evenement in javascript h2 >Naam : < invoertype = 'tekst' ID kaart = 'demonstratie' >
< knop > Indienen knop >
In de bovenstaande HTML-code:
- Definieer een subkop van niveau 2 via de “ ' label.
- Voeg vervolgens een '
' veld bij het label ' Naam ”, inhoudstype “ tekst ”, en de bijbehorende id “ demo ”, respectievelijk. - Voeg ten slotte een knop toe met behulp van de '
' label.
JavaScript-code
Bekijk vervolgens de volgende JavaScript-code:
< script >document. getElementById ( 'demonstratie' ) . addEventListener ( 'wijziging' , Steekproef ) ;
functie Voorbeeld ( ) {
waar = document. getElementById ( 'demonstratie' ) ;
T. waarde = T. waarde . naarHoofdletter ( ) ;
}
script >
In dit codeblok:
- Eerst de ' document.getElementById() ” methode maakt gebruik van de “ wijziging ”gebeurtenis die zal resulteren in het wijzigen van de waarde van het invoertekstveld met id “ demo ” bij het klikken op de knop.
- Vervolgens wordt de functie 'Sample()' gedefinieerd die de methode 'document.getElementById()' gebruikt om toegang te krijgen tot het invoertekstveld 'demo' en vervolgens de waarde verandert in 'Hoofdletters' via de ' Hoofdletters() ” methode.
Uitgang
Zoals te zien is, is de invoertekst bij het klikken op de knop geconverteerd naar hoofdletters.
Conclusie
JavaScript biedt de veelgebruikte “ op verandering ”gebeurtenis die wordt geactiveerd zodra de status van de waarde van een bepaald element verandert. Het is vergelijkbaar met de ' op invoer '-gebeurtenis, maar de 'oninput' treedt onmiddellijk op wanneer de waarde verandert, terwijl de 'onchange'-gebeurtenis wordt geactiveerd wanneer de waarde van de gebeurtenis de focus verliest. Deze gids demonstreerde het doel, de werking en het gebruik van de 'onchange' -gebeurtenis in JavaScript.