Šajā rokasgrāmatā tiks parādīts notikuma “onchange” mērķis un darbība JavaScript valodā.
Kā izmantot 'onchange' notikumu JavaScript?
' maiņa ” notikums tiek aktivizēts, kad tiek mainīta norādītā HTML elementa vērtība. Kad šis notikums tiek aktivizēts, tiek izpildīta saistītā JavaScript funkcija, lai veiktu konkrēto uzdevumu.
Sintakse
objektu. maiņa = funkciju ( ) { myScript } ;
Iepriekš minētajā sintaksē:
- elements: Tas apzīmē konkrēto HTML elementu.
- funkcija (): Tas apzīmē definēto funkciju, kas tiks izsaukta pēc notikuma aktivizētāja.
- myScript: Tas attiecas uz JavaScript funkcijas definīciju, lai veiktu konkrēto uzdevumu, kad notiek notikums “onchange”.
Sintakse (ar metodi “addEventListener()”)
objektu. addEventListener ( 'mainīt' , myScript ) ;
Iepriekš minētajā sintaksē ' addEventListener() ” metode izmanto “ maiņa ” notikumu, lai izpildītu JavaScript funkciju dažādu uzdevumu veikšanai.
1. piemērs: notikuma “onchange” lietošana, lai parādītu atlasīto vērtību, izmantojot pamata sintaksi
Šajā scenārijā notikums “onchange” ir saistīts ar opciju sarakstu, lai parādītu mainītās opcijas vērtību un izsauktu atbilstošo JavaScript funkciju.
HTML kods
Apskatiet šo HTML kodu:
< h2 > maiņa Pasākums JavaScript h2 >< lpp > Izvēlieties citu valodu no saraksta. lpp >
< atlasiet id = 'demo' maiņa = 'Paraugs()' >
< opcijas vērtība = 'HTML' > HTML opciju >
< opcijas vērtība = 'CSS' > CSS opciju >
< opcijas vērtība = 'JavaScript' > JavaScript opciju >
izvēlieties >
< p id = 'P1' > lpp >
Iepriekš minētajā kodā:
- Vispirms definējiet apakšvirsrakstu, izmantojot ' ” tagu.
- Pēc tam pievienojiet rindkopu ar norādīto paziņojumu.
- Pēc tam '
tags izveido nolaižamo sarakstu ar piešķirtu ID demo ” un „ maiņa 'notikums novirza uz funkciju' Paraugs() ”, attiecīgi. - Taga “
- Visbeidzot, tiek izveidota tukša rindkopa ar ID ' P1 ”, lai parādītu atlasīto/mainīto vērtību no opciju saraksta.
JavaScript kods
Tagad pārskats par šo JavaScript kodu:
< skripts >funkcijas paraugs ( ) {
kur = dokumentu. getElementById ( 'demo' ) . vērtību ;
dokumentu. getElementById ( 'P1' ) . innerHTML = 'Izvēlētā opcija ir: ' + t ;
}
skripts >
Iepriekš minētajā koda blokā:
- Vispirms deklarējiet funkciju ar nosaukumu ' Paraugs() ”.
- Tās definīcijā piemēro ' getElementById() ”, lai piekļūtu atlasītās opcijas vērtībai no opciju saraksta, izmantojot “ vērtību ” īpašums.
- Visbeidzot, parādiet vērtību, izmantojot ' innerHTML ” īpašums.
Izvade
Kā redzams izvadē, nolaižamajā izvēlnē atlasot opciju, notikums “onchange” aktivizē un izsauc atbilstošo funkciju.
2. piemērs. Notikuma “onchange” lietošana, lai mainītu ievades lauka tekstu ar lielajiem burtiem, izmantojot metodes “addEventListener()” sintaksi
Šajā piemērā ir izskaidrots notikums “onchange”, mainot ievades teksta lauku uz “Lielajiem burtiem”, izmantojot metodi “addEventListener()”.
HTML kods
Vispirms izlasiet tālāk norādīto HTML kodu:
< h2 > maiņa Pasākums JavaScript h2 >Vārds : < ievades veids = 'teksts' id = 'demo' >
< pogu > Iesniegt pogu >
Iepriekš minētajā HTML kodā:
- Definējiet 2. līmeņa apakšvirsrakstu, izmantojot ' ” tagu.
- Pēc tam pievienojiet '
' lauks ar etiķeti ' Vārds ”, satura veids “ tekstu ' un saistīto ID ' demo ”, attiecīgi. - Visbeidzot, iekļaujiet pogu, izmantojot '
” tagu.
JavaScript kods
Pēc tam apskatiet šo JavaScript kodu:
< skripts >dokumentu. getElementById ( 'demo' ) . addEventListener ( 'mainīt' , Paraugs ) ;
funkcijas paraugs ( ) {
kur = dokumentu. getElementById ( 'demo' ) ;
t. vērtību = t. vērtību . uz Lielajiem burtiem ( ) ;
}
skripts >
Šajā koda blokā:
- Pirmkārt, ' document.getElementById() ” metode izmanto “ mainīt ' notikums, kura rezultātā tiks mainīta ievades teksta lauka vērtība ar ID ' demo ” noklikšķinot uz pogas.
- Pēc tam tiek definēta funkcija “Sample()”, kas izmanto metodi “document.getElementById()”, lai piekļūtu ievades teksta laukam “demo”, un pēc tam maina tās vērtību uz “Uppercase”, izmantojot “ Lielie burti() ” metode.
Izvade
Kā redzams, pēc pogas noklikšķināšanas ievades teksts ir pārveidots par lielajiem burtiem.
Secinājums
JavaScript piedāvā bieži lietoto ' maiņa ” notikums, kas tiek aktivizēts, tiklīdz mainās konkrēta elementa vērtības stāvoklis. Tas ir līdzīgs ' ievade ” notikumu, bet “oninput” notiek uzreiz, mainoties vērtībai, savukārt notikums “onchange” tiek aktivizēts, kad notikuma vērtība zaudē fokusu. Šajā rokasgrāmatā tika parādīts JavaScript notikuma “onchange” mērķis, darbība un lietojums.