Ez az útmutató bemutatja az „onchange” esemény célját és működését JavaScriptben.
Hogyan használjunk „onchange” eseményt JavaScriptben?
A ' váltáskor ” esemény akkor aktiválódik, amikor a megadott HTML elem értéke megváltozik. Amikor ez az esemény aktiválódik, a kapcsolódó JavaScript-függvény végrehajtja az adott feladatot.
Szintaxis
tárgy. váltáskor = funkció ( ) { myScript } ;
A fenti szintaxisban:
- elem: Az adott HTML elemet jelöli.
- funkció(): Azt a meghatározott függvényt jelöli, amely az eseményindító hatására meg lesz hívva.
- myScript: Az „onchange” esemény bekövetkezésekor a konkrét feladat végrehajtására szolgáló JavaScript függvénydefinícióra utal.
Szintaxis ('addEventListener()' metódussal)
tárgy. addEventListener ( 'változás' , myScript ) ;
A fenti szintaxisban a „ addEventListener() ' módszer a ' váltáskor ” eseményt a JavaScript függvény végrehajtásához különféle feladatok végrehajtásához.
1. példa: Az „onchange” esemény alkalmazása a kiválasztott érték megjelenítésére az alapvető szintaxis használatával
Ebben a forgatókönyvben egy „onchange” esemény egy beállításlistához van társítva, amely megjeleníti a módosított beállításértéket, és meghívja a megfelelő JavaScript-függvényt.
HTML kód
Tekintse meg a következő HTML kódot:
< h2 > váltáskor Esemény JavaScriptben h2 >< p > Válasszon másik nyelvet a listából. p >
< válassza ki az azonosítót = 'demó' váltáskor = 'Minta()' >
< opció értéke = 'HTML' > HTML választási lehetőség >
< opció értéke = 'CSS' > CSS választási lehetőség >
< opció értéke = 'JavaScript' > JavaScript választási lehetőség >
válassza ki >
< p id = 'P1' > p >
A fenti kódban:
- Először határozzon meg egy alcímet a ' ” címke.
- Ezután adjon hozzá egy bekezdést a megadott utasítással.
- Ezt követően a „
' címke létrehoz egy legördülő listát hozzárendelt azonosítóval ' demó ' és a ' váltáskor ' esemény átirányítja a funkciót ' Minta() ”, ill. - A „
- Végül egy üres bekezdés jön létre 'azonosítóval' P1 ” a kiválasztott/módosított érték megjelenítéséhez az opciólistából.
JavaScript kód
Most a következő JavaScript-kód áttekintése:
< forgatókönyv >függvény minta ( ) {
ahol = dokumentum. getElementById ( 'demó' ) . érték ;
dokumentum. getElementById ( 'P1' ) . innerHTML = 'A kiválasztott opció: ' + t ;
}
forgatókönyv >
A fenti kódblokkban:
- Először deklaráljon egy '' nevű függvényt Minta() ”.
- Meghatározásában alkalmazza a „ getElementById() ” módszerrel elérheti a kiválasztott opció értékét az opciók listájából a „ érték ' ingatlan.
- Végül jelenítse meg az értéket a „ innerHTML ' ingatlan.
Kimenet
Ahogy a kimeneten látható, a legördülő menüből egy opció kiválasztásakor az „onchange” esemény elindítja és meghívja a megfelelő funkciót.
2. példa: Az „onchange” esemény alkalmazása a beviteli mező szövegének nagybetűs módosítására az „addEventListener()” metódus szintaxisával
Ez a példa az „onchange” esemény működését magyarázza úgy, hogy a beviteli szövegmezőt „nagybetűre” változtatja az „addEventListener()” metódus segítségével.
HTML kód
Először menjen át az alábbi HTML-kódon:
< h2 > váltáskor Esemény JavaScriptben h2 >Név : < bemeneti típus = 'szöveg' id = 'demó' >
< gomb > Beküldés gomb >
A fenti HTML kódban:
- Határozzon meg egy 2. szintű alcímet a „ ” címke.
- Ezután adjon hozzá egy „
' mező a ' címkével Név ', tartalom típus ' szöveg ”, és a kapcsolódó azonosító „ demó ”, ill. - Végül adjon meg egy gombot a „
” címke.
JavaScript kód
Ezután nézze meg a következő JavaScript kódot:
< forgatókönyv >dokumentum. getElementById ( 'demó' ) . addEventListener ( 'változás' , Minta ) ;
függvény minta ( ) {
ahol = dokumentum. getElementById ( 'demó' ) ;
t. érték = t. érték . toUpperCase ( ) ;
}
forgatókönyv >
Ebben a kódblokkban:
- Először is a „ document.getElementById() ' módszer a ' változás ' esemény, amely az azonosítóval rendelkező beviteli szövegmező értékének megváltoztatását eredményezi ' demó ” gombnyomásra.
- Ezután a „Sample()” függvény definiálva van, amely a „document.getElementById()” metódust használja a „demo” beviteli szövegmező eléréséhez, majd az értékét „Nagybetűre” módosítja a „ Nagybetűs() ” módszerrel.
Kimenet
Amint látható, a beviteli szöveget nagybetűssé alakítottuk a gombra kattintva.
Következtetés
A JavaScript az általánosan használt ' váltáskor ” esemény, amely azonnal aktiválódik, amikor egy adott elem értékének állapota megváltozik. Ez hasonló a ' bemenet ” eseményt, de az „oninput” azonnal megjelenik, amikor az érték megváltozik, míg az „onchange” esemény akkor aktiválódik, amikor az esemény értéke elveszti a fókuszt. Ez az útmutató bemutatta az „onchange” esemény célját, működését és használatát JavaScriptben.