Táto príručka bude demonštrovať cieľ a fungovanie udalosti „onchange“ v jazyku JavaScript.
Ako používať udalosť „onchange“ v JavaScripte?
' pri zmene ” udalosť sa aktivuje, keď sa zmení hodnota špecifikovaného prvku HTML. Keď sa táto udalosť spustí, vykoná sa príslušná funkcia JavaScript, aby vykonala konkrétnu úlohu.
Syntax
objekt. pri zmene = funkciu ( ) { myScript } ;
Vo vyššie uvedenej syntaxi:
- element: Označuje konkrétny prvok HTML.
- funkcia(): Predstavuje definovanú funkciu, ktorá bude vyvolaná pri spúšťaní udalosti.
- myScript: Odkazuje na definíciu funkcie JavaScript na vykonanie konkrétnej úlohy, keď nastane udalosť „onchange“.
Syntax (S metódou „addEventListener()“)
objekt. addEventListener ( 'zmena' , myScript ) ;
Vo vyššie uvedenej syntaxi je „ addEventListener() “ metóda využíva “ pri zmene ” udalosť na spustenie funkcie JavaScript na vykonávanie rôznych úloh.
Príklad 1: Použitie udalosti „onchange“ na zobrazenie vybranej hodnoty pomocou základnej syntaxe
V tomto scenári je udalosť „onchange“ spojená so zoznamom možností, aby sa zobrazila hodnota zmenenej možnosti a vyvolala sa zodpovedajúca funkcia JavaScript.
HTML kód
Pozrite si nasledujúci HTML kód:
< h2 > pri zmene Udalosť v JavaScripte h2 >< p > Vyberte iný jazyk zo zoznamu. p >
< vybrať id = 'demo' pri zmene = 'Ukážka()' >
< hodnotu opcie = 'HTML' > HTML možnosť >
< hodnotu opcie = 'CSS' > CSS možnosť >
< hodnotu opcie = 'JavaScript' > JavaScript možnosť >
vyberte >
< p id = 'P1' > p >
Vo vyššie uvedenom kóde:
- Najprv definujte podnadpis pomocou „ ” tag.
- Ďalej pridajte odsek s uvedeným vyhlásením.
- Potom sa „
Značka ” vytvorí rozbaľovací zoznam s priradeným ID “ demo “ a „ pri zmene “udalosť presmeruje na funkciu” Ukážka() “, resp. - V tele značky „
- Nakoniec sa vytvorí prázdny odsek s ID „ P1 ” pre zobrazenie zvolenej/zmenenej hodnoty zo zoznamu možností.
JavaScript kód
Teraz prehľad nasledujúceho kódu JavaScript:
< skript >funkcia Ukážka ( ) {
kde = dokument. getElementById ( 'demo' ) . hodnotu ;
dokument. getElementById ( 'P1' ) . innerHTML = 'Vybraná možnosť je:' + t ;
}
skript >
Vo vyššie uvedenom bloku kódu:
- Najprv deklarujte funkciu s názvom „ Ukážka() “.
- Vo svojej definícii použite „ getElementById() “, aby ste získali prístup k hodnote vybranej možnosti zo zoznamu možností prostredníctvom „ hodnotu ' nehnuteľnosť.
- Nakoniec zobrazte hodnotu pomocou „ innerHTML ' nehnuteľnosť.
Výkon
Ako je vidieť na výstupe, po výbere možnosti z rozbaľovacej ponuky sa spustí udalosť „onchange“ a vyvolá zodpovedajúcu funkciu.
Príklad 2: Použitie udalosti „onchange“ na zmenu textu vstupného poľa veľkými písmenami pomocou syntaxe metódy „addEventListener()“
Tento príklad vysvetľuje fungovanie udalosti „onchange“ zmenou vstupného textového poľa na „Veľké písmená“ pomocou metódy „addEventListener()“.
HTML kód
Najprv si prejdite nižšie uvedený HTML kód:
< h2 > pri zmene Udalosť v JavaScripte h2 >názov : < typ vstupu = 'text' id = 'demo' >
< tlačidlo > Predložiť tlačidlo >
Vo vyššie uvedenom HTML kóde:
- Definujte podnadpis úrovne 2 pomocou „ ” tag.
- Ďalej pridajte „
” pole pri štítku “ názov ', Druh obsahu ' text “ a súvisiace id „ demo “, resp. - Nakoniec pridajte tlačidlo pomocou „
” tag.
JavaScript kód
Ďalej sa pozrite na nasledujúci kód JavaScript:
< skript >dokument. getElementById ( 'demo' ) . addEventListener ( 'zmena' , Vzorka ) ;
funkcia Ukážka ( ) {
kde = dokument. getElementById ( 'demo' ) ;
t. hodnotu = t. hodnotu . na veľké písmená ( ) ;
}
skript >
V tomto bloku kódu:
- Po prvé, „ document.getElementById() “ metóda využíva “ zmeniť ” udalosť, ktorá bude mať za následok zmenu hodnoty vstupného textového poľa s id “ demo “ po kliknutí na tlačidlo.
- Ďalej je definovaná funkcia „Sample()“, ktorá využíva metódu „document.getElementById()“ na prístup k vstupnému textovému poľu „demo“ a následne zmení jeho hodnotu na „Uppercase“ cez „ Veľké písmená() “.
Výkon
Ako je vidieť, vstupný text bol po kliknutí na tlačidlo prevedený na veľké písmená.
Záver
JavaScript ponúka bežne používané „ pri zmene ” udalosť, ktorá sa spustí hneď, ako sa zmení stav hodnoty konkrétneho prvku. Je to podobné ako „ na vstupe “, ale „oninput“ sa objaví okamžite, keď sa hodnota zmení, zatiaľ čo udalosť „onchange“ sa spustí, keď hodnota udalosti stratí zameranie. Táto príručka demonštrovala cieľ, fungovanie a použitie udalosti „onchange“ v jazyku JavaScript.