Tato příručka bude demonstrovat cíl a fungování události „onchange“ v JavaScriptu.
Jak používat událost „onchange“ v JavaScriptu?
' při změně ” událost se aktivuje, když se změní hodnota zadaného prvku HTML. Když se tato událost spustí, provede se přidružená funkce JavaScript k provedení konkrétní úlohy.
Syntax
objekt. při změně = funkce ( ) { myScript } ;
Ve výše uvedené syntaxi:
- živel: Označuje konkrétní prvek HTML.
- funkce(): Představuje definovanou funkci, která bude vyvolána při spuštění události.
- myScript: Odkazuje na definici funkce JavaScript pro provedení konkrétní úlohy, když dojde k události „onchange“.
Syntaxe (s metodou „addEventListener()“)
objekt. addEventListener ( 'změna' , myScript ) ;
Ve výše uvedené syntaxi je „ addEventListener() “ metoda využívá “ při změně ” událost pro provedení funkce JavaScript pro provádění různých úkolů.
Příklad 1: Použití události „onchange“ k zobrazení vybrané hodnoty pomocí základní syntaxe
V tomto scénáři je událost „onchange“ přidružena k seznamu voleb, aby se zobrazila změněná hodnota volby a vyvolala se odpovídající funkce JavaScriptu.
HTML kód
Podívejte se na následující HTML kód:
< h2 > při změně událost v JavaScriptu h2 >< p > Vyberte jiný jazyk ze seznamu. p >
< vybrat id = 'demo' při změně = 'Vzorek()' >
< hodnotu opce = 'HTML' > HTML volba >
< hodnotu opce = 'CSS' > CSS volba >
< hodnotu opce = 'JavaScript' > JavaScript volba >
vybrat >
< p id = 'P1' > p >
Ve výše uvedeném kódu:
- Nejprve definujte podnadpis pomocí „ ” tag.
- Dále přidejte odstavec s uvedeným tvrzením.
- Poté se „
Značka ” vytvoří rozevírací seznam s přiřazeným ID “ demo “ a „ při změně 'událost přesměruje na funkci' Vzorek() “, resp. - V těle značky „
- Nakonec se vytvoří prázdný odstavec s id „ P1 ” pro zobrazení vybrané/změněné hodnoty ze seznamu možností.
JavaScript kód
Nyní přehled následujícího kódu JavaScript:
< skript >funkce Ukázka ( ) {
kde = dokument. getElementById ( 'demo' ) . hodnota ;
dokument. getElementById ( 'P1' ) . vnitřní HTML = 'Vybraná možnost je:' + t ;
}
skript >
Ve výše uvedeném bloku kódu:
- Nejprve deklarujte funkci s názvem „ Vzorek() “.
- V jeho definici použijte „ getElementById() ” metodu pro přístup k hodnotě vybrané možnosti ze seznamu možností pomocí “ hodnota ' vlastnictví.
- Nakonec zobrazte hodnotu pomocí „ vnitřní HTML ' vlastnictví.
Výstup
Jak je vidět na výstupu, po výběru možnosti z rozevíracího seznamu se událost „onchange“ spustí a vyvolá odpovídající funkci.
Příklad 2: Použití události „onchange“ pro změnu textu vstupního pole velkými písmeny pomocí „addEventListener()“ Syntaxe metody
Tento příklad vysvětluje fungování události „onchange“ změnou vstupního textového pole na „Velká písmena“ pomocí metody „addEventListener()“.
HTML kód
Nejprve si projděte níže uvedený HTML kód:
< h2 > při změně událost v JavaScriptu h2 >název : < Typ vstupu = 'text' id = 'demo' >
< knoflík > Předložit knoflík >
Ve výše uvedeném HTML kódu:
- Definujte podnadpis úrovně 2 pomocí „ ” tag.
- Dále přidejte „
“ pole u štítku “ název ', typ obsahu ' text “ a související id „ demo “, resp. - Nakonec přidejte tlačítko pomocí „
” tag.
JavaScript kód
Dále se podívejte na následující kód JavaScript:
< skript >dokument. getElementById ( 'demo' ) . addEventListener ( 'změna' , Vzorek ) ;
funkce Ukázka ( ) {
kde = dokument. getElementById ( 'demo' ) ;
t. hodnota = t. hodnota . velká písmena ( ) ;
}
skript >
V tomto bloku kódu:
- Za prvé, „ document.getElementById() “ metoda využívá “ změna ” událost, která povede ke změně hodnoty vstupního textového pole s id “ demo “ po kliknutí na tlačítko.
- Dále je definována funkce „Sample()“, která využívá metodu „document.getElementById()“ pro přístup k vstupnímu textovému poli „demo“ a poté změní jeho hodnotu na „Uppercase“ pomocí „ velká písmena() “ metoda.
Výstup
Jak je vidět, vstupní text byl po kliknutí na tlačítko převeden na velká písmena.
Závěr
JavaScript nabízí běžně používané „ při změně ” událost, která se spustí, jakmile se změní stav hodnoty určitého prvku. Je to podobné jako „ na vstupu ” událost, ale “oninput” se objeví okamžitě, když se hodnota změní, zatímco událost “onchange” se spustí, když hodnota události ztratí pozornost. Tato příručka demonstrovala cíl, fungování a použití události „onchange“ v JavaScriptu.