Šis vadovas parodys „onchange“ įvykio tikslą ir veikimą „JavaScript“.
Kaip naudoti „onchange“ įvykį „JavaScript“?
„ pakeitimas ” įvykis suaktyvinamas, kai pakeičiama nurodyto HTML elemento reikšmė. Kai šis įvykis suaktyvinamas, vykdoma susijusi „JavaScript“ funkcija, kad atliktų konkrečią užduotį.
Sintaksė
objektas. pakeitimas = funkcija ( ) { myScript } ;
Aukščiau pateiktoje sintaksėje:
- elementas: Tai žymi konkretų HTML elementą.
- funkcija(): Tai reiškia apibrėžtą funkciją, kuri bus iškviesta įvykio paleidus.
- myScript: Tai reiškia „JavaScript“ funkcijos apibrėžimą, skirtą atlikti konkrečią užduotį, kai įvyksta „onchange“ įvykis.
Sintaksė (su metodu „addEventListener()“)
objektas. addEventListener ( 'pakeisti' , myScript ) ;
Aukščiau pateiktoje sintaksėje „ addEventListener() “ metodas naudoja “ pakeitimas “ įvykis, skirtas JavaScript funkcijai atlikti įvairioms užduotims atlikti.
1 pavyzdys: Įvykio „onchange“ taikymas norint parodyti pasirinktą reikšmę naudojant pagrindinę sintaksę
Pagal šį scenarijų „onchange“ įvykis yra susietas su parinkčių sąrašu, kad būtų rodoma pakeista parinkties reikšmė ir iškviečiama atitinkama „JavaScript“ funkcija.
HTML kodas
Pažvelkite į šį HTML kodą:
< h2 > pakeitimas Renginys JavaScript h2 >< p > Iš sąrašo pasirinkite kitą kalbą. p >
< pasirinkite id = 'demo' pakeitimas = 'Sample()' >
< opciono vertė = 'HTML' > HTML variantas >
< opciono vertė = 'CSS' > CSS variantas >
< pasirinkimo vertė = 'JavaScript' > JavaScript variantas >
pasirinkite >
< p id = 'P1' > p >
Aukščiau pateiktame kode:
- Pirmiausia apibrėžkite paantraštę naudodami „ “ žymą.
- Tada pridėkite pastraipą su nurodytu teiginiu.
- Po to „
“ žyma sukuria išskleidžiamąjį sąrašą su priskirtu ID “ demo ' ir ' pakeitimas 'įvykis peradresuoja į funkciją' Pavyzdys () “, atitinkamai. - Žymos „
- Galiausiai sukuriama tuščia pastraipa su ID ' P1 “ norėdami parodyti pasirinktą / pakeistą reikšmę iš parinkčių sąrašo.
JavaScript kodas
Dabar šio „JavaScript“ kodo apžvalga:
< scenarijus >funkcijos pavyzdys ( ) {
kur = dokumentas. getElementById ( 'demo' ) . vertė ;
dokumentas. getElementById ( 'P1' ) . vidinis HTML = 'Pasirinkta parinktis: ' + t ;
}
scenarijus >
Aukščiau pateiktame kodo bloke:
- Pirmiausia deklaruokite funkciją pavadinimu ' Pavyzdys () “.
- Savo apibrėžime taikykite „ getElementById() “ metodą norėdami pasiekti pasirinktos parinkties vertę iš parinkčių sąrašo per „ vertė ' nuosavybė.
- Galiausiai, parodykite vertę naudodami „ vidinis HTML ' nuosavybė.
Išvestis
Kaip matyti išvestyje, išskleidžiamajame meniu pasirinkus parinktį „onchange“ įvykis suaktyvina ir iškviečia atitinkamą funkciją.
2 pavyzdys: Įvykio „onchange“ taikymas norint pakeisti įvesties lauko tekstą didžiosiomis raidėmis naudojant „addEventListener()“ metodo sintaksę
Šiame pavyzdyje paaiškinamas „onchange“ įvykis, veikiantis pakeičiant įvesties teksto lauką į „didžiosios raidės“, naudojant metodą „addEventListener()“.
HTML kodas
Pirmiausia peržiūrėkite toliau pateiktą HTML kodą:
< h2 > pakeitimas Renginys JavaScript h2 >vardas : < įvesties tipas = 'tekstas' id = 'demo' >
< mygtuką > Pateikti mygtuką >
Aukščiau pateiktame HTML kode:
- Apibrėžkite 2 lygio paantraštę naudodami „ “ žymą.
- Tada pridėkite „ <įvestis> ' laukas su etikete ' vardas ', turinio tipas ' tekstą “ ir susijusį ID „ demo “, atitinkamai.
- Galiausiai įtraukite mygtuką naudodami „
“ žymą.
JavaScript kodas
Tada pažiūrėkite į šį „JavaScript“ kodą:
< scenarijus >dokumentas. getElementById ( 'demo' ) . addEventListener ( 'pakeisti' , Pavyzdys ) ;
funkcijos pavyzdys ( ) {
kur = dokumentas. getElementById ( 'demo' ) ;
t. vertė = t. vertė . į didžiąsias raides ( ) ;
}
scenarijus >
Šiame kodo bloke:
- Pirma, „ document.getElementById() “ metodas naudoja “ pakeisti “ įvykis, dėl kurio bus pakeista įvesties teksto lauko, turinčio ID, reikšmė “ demo “ spustelėjus mygtuką.
- Toliau apibrėžiama funkcija „Sample()“, kuri naudoja „document.getElementById()“ metodą, kad pasiektų įvesties teksto lauką „demo“, o tada pakeičia jos reikšmę į „Didžiosios raidės“ naudodami „ Didžiosios raidės () “ metodas.
Išvestis
Kaip matote, spustelėjus mygtuką įvesties tekstas buvo paverstas didžiosiomis raidėmis.
Išvada
„JavaScript“ siūlo dažniausiai naudojamą „ pakeitimas “ įvykis, kuris suveikia, kai tik pasikeičia konkretaus elemento vertės būsena. Tai panašu į ' įvestis “ įvykis, tačiau „oninput“ įvyksta akimirksniu, kai vertė pasikeičia, o įvykis „onchange“ suveikia, kai įvykio reikšmė praranda dėmesį. Šiame vadove buvo parodytas „JavaScript“ įvykio „onchange“ tikslas, veikimas ir naudojimas.