Aquesta guia mostrarà l'objectiu i el funcionament de l'esdeveniment 'onchange' a JavaScript.
Com utilitzar un esdeveniment 'onchange' a JavaScript?
El ' al canvi ” s'activa quan es canvia el valor de l'element HTML especificat. Quan s'activa aquest esdeveniment, la funció JavaScript associada s'executa per dur a terme la tasca específica.
Sintaxi
objecte. al canvi = funció ( ) { myScript } ;
En la sintaxi anterior:
- element: Indica l'element HTML concret.
- funció(): Representa la funció definida que s'invocarà al disparar l'esdeveniment.
- myScript: Es refereix a la definició de la funció JavaScript per realitzar la tasca específica quan es produeix l'esdeveniment 'onchange'.
Sintaxi (amb el mètode 'addEventListener()')
objecte. addEventListener ( 'canviar' , myScript ) ;
En la sintaxi anterior, el ' addEventListener() El mètode utilitza el mètode al canvi ” esdeveniment per executar la funció JavaScript per realitzar diverses tasques.
Exemple 1: aplicació de l'esdeveniment 'onchange' per mostrar el valor seleccionat mitjançant la sintaxi bàsica
En aquest escenari, un esdeveniment 'en canvi' s'associa amb una llista d'opcions per mostrar el valor de l'opció canviat i invocar la funció JavaScript corresponent.
Codi HTML
Fes una ullada al següent codi HTML:
< h2 > al canvi Esdeveniment en JavaScript h2 >< pàg > Trieu un altre idioma de la llista. pàg >
< seleccioneu id = 'demo' al canvi = 'Mostra()' >
< valor de l'opció = 'HTML' > HTML opció >
< valor de l'opció = 'CSS' > CSS opció >
< valor de l'opció = 'JavaScript' > JavaScript opció >
seleccionar >
< p id = 'P1' > pàg >
En el codi anterior:
- En primer lloc, definiu un subtítol amb el ' ' etiqueta.
- A continuació, afegiu un paràgraf amb la declaració indicada.
- Després d'això, el '
L'etiqueta ' crea una llista desplegable amb un identificador assignat ' demostració ' i la ' al canvi 'l'esdeveniment redirigeix a la funció' Mostra () ”, respectivament. - Al cos de l'etiqueta '
', s'especifica una llista d'opcions mitjançant el botó ' ' etiqueta. - Finalment, es crea un paràgraf buit amb un identificador ' P1 ” per mostrar el valor seleccionat/canviat de la llista d'opcions.
Codi JavaScript
Ara, una visió general del següent codi JavaScript:
< guió >funció Mostra ( ) {
on = document. getElementById ( 'demo' ) . valor ;
document. getElementById ( 'P1' ) . innerHTML = 'L'opció seleccionada és:' + t ;
}
guió >
Al bloc de codi anterior:
- Primer de tot, declara una funció anomenada ' Mostra () ”.
- En la seva definició, apliqueu el ' getElementById() ” mètode per accedir al valor de l'opció seleccionada de la llista d'opcions mitjançant el “ valor ' propietat.
- Finalment, visualitzeu el valor amb el botó ' innerHTML ' propietat.
Sortida
Com es veu a la sortida, en seleccionar una opció del menú desplegable, l'esdeveniment 'onchange' activa i invoca la funció corresponent.
Exemple 2: aplicació de l'esdeveniment 'onchange' per canviar el text del camp d'entrada en majúscules mitjançant la sintaxi del mètode 'addEventListener()'
Aquest exemple explica l'esdeveniment 'onchange' que funciona canviant el camp de text d'entrada a 'Majúscula' amb l'ajuda del mètode 'addEventListener()'.
Codi HTML
Primer, revisa el codi HTML que es proporciona a continuació:
< h2 > al canvi Esdeveniment en JavaScript h2 >Nom : < tipus d'entrada = 'text' id = 'demo' >
< botó > Presentar botó >
Al codi HTML anterior:
- Definiu un subtítol del nivell 2 mitjançant el ' ' etiqueta.
- A continuació, afegiu un '
'camp de l'etiqueta' Nom ”, tipus de contingut “ text ”, i l'identificador associat “ demostració ”, respectivament. - Finalment, inclou un botó utilitzant el '
' etiqueta.
Codi JavaScript
A continuació, mireu el següent codi JavaScript:
< guió >document. getElementById ( 'demo' ) . addEventListener ( 'canviar' , Mostra ) ;
funció Mostra ( ) {
on = document. getElementById ( 'demo' ) ;
t. valor = t. valor . a majúscules ( ) ;
}
guió >
En aquest bloc de codi:
- En primer lloc, el ' document.getElementById() El mètode utilitza el mètode canvi ” esdeveniment que donarà lloc a canviar el valor del camp de text d'entrada amb id “ demostració ” en fer clic al botó.
- A continuació, es defineix la funció 'Sample()' que utilitza el mètode 'document.getElementById()' per accedir al camp de text d'entrada 'demo' i després canvia el seu valor a 'Majúscula' mitjançant el ' majúscules () ” mètode.
Sortida
Com s'ha vist, el text d'entrada s'ha convertit a majúscules en fer clic al botó.
Conclusió
JavaScript ofereix l'ús habitual ' al canvi ” esdeveniment que es desencadena tan aviat com canvia l'estat del valor d'un element determinat. És similar al ' a l'entrada ', però l''oninput' es produeix a l'instant quan el valor canvia, mentre que l'esdeveniment 'onchange' s'activa quan el valor de l'esdeveniment perd el focus. Aquesta guia va demostrar l'objectiu, el funcionament i l'ús de l'esdeveniment 'onchange' a JavaScript.