Šajā apmācībā tiks definēta procedūra onClick iestatīšanai, izmantojot JavaScript.
Kā iestatīt onClick, izmantojot JavaScript
Lai iestatītu onclick izmantojot JavaScript, ir divas dažādas metodes, kas ir:
- Pirmā metode ir vērtības piešķiršana HTML elementam onclick atribūts, izmantojot JavaScript.
- Otrā metode ir skaidri pievienot notikumu uztvērēju HTML notikumam, kas pārbauda “ klikšķis ” pasākums.
1. piemērs. Piešķiriet vērtību HTML elementa onclick atribūtam, izmantojot JavaScript
HTML failā izveidojiet virsrakstu un pogu ' Noklikšķiniet uz manis 'ar ID' js ”, kas aktivizēs JavaScript funkciju, noklikšķinot uz tās.
< h2 > Iestatīt onClick īpašums ar JavaScript h2 >
< pogas id = 'js' > Noklikšķiniet uz manis pogu >
Nākamajā darbībā tiks atvērta izveidotā poga un tiks parādīts “ onclick ” atribūts tiks pievienots tam. Noklikšķinot uz pogas, tiks izpildīta norādītā funkcija un ' style.backgroundColor ” rekvizīts mainīs pogas krāsu šādi:
dokumentu. getElementById ( 'js' ) . onclick = funkcija jsFunc ( ) {
dokumentu. getElementById ( 'js' ) . stils . fona krāsa = 'Violets' ;
}
Atbilstošā izvade būs:
2. piemērs: skaidri pievienojiet notikumu uztvērēju HTML notikumam
Izveidojiet pogu ' Noklikšķiniet šeit! 'un piešķir id' notikumu ”, kas aktivizēs metodi addEventListener() vietnē 'klikšķis' pasākums:
< pogas id = 'pasākums' > Noklikšķiniet šeit ! stiprs > pogu stiprs >>
Atnesiet pogu, izmantojot to id un pēc tam pievienojiet ' addEventListener() ” metodi, nododot “ klikšķis 'pasākums un funkcija' notikumsFunc ” kur tiks mainīta pogas fona krāsa:
dokumentu. getElementById ( 'pasākums' ) . addEventListener ( 'klikšķis' , notikumsFunc ) ;funkcija notikumsFunc ( ) {
dokumentu. getElementById ( 'pasākums' ) . stils . fona krāsa = 'zaļš' ;
}
Izvade
3. piemērs: visu onClick metožu izmantošana vienlaikus
Šajā piemērā visu metožu darbība tiks parādīta uzreiz. Pirmais ir noklusējuma veids, kā pievienot atribūtu onclick pašā HTML tagā. Pēc tam tika demonstrētas arī divas onclick atribūta iestatīšanas metodes ar JavaScript palīdzību.
Nākamajā piemērā izveidojiet trīs pogas un skatiet atribūta onclick funkcionalitāti.
- Pirmā poga ' Klikšķis ' sauksies ' htmlFunc() ” klikšķa notikumā.
- Poga ' Noklikšķiniet uz manis ' tiks piekļūts ar tai piešķirto ID' js ” un pēc tam piešķiriet vērtību pogas onclick atribūtam, izmantojot JavaScript.
- Poga ' Noklikšķiniet šeit! ' tiks piekļūts, izmantojot ID ' notikumu un pēc tam pievienojiet ' addEventListener() ” metode ar to:
< pogas ID = 'js' > Noklikšķiniet uz manis pogu >< br >< br >
< pogas id = 'pasākums' > Noklikšķiniet šeit ! pogu >
Tālāk esošā funkcija aktivizēs ' onclick 'pogas notikums' Klikšķis ”:
funkcija htmlFunc ( ) {brīdinājums ( 'Poga, uz kuras noklikšķināja HTML onClick notikums' ) ;
}
Noklikšķinot uz ' Noklikšķiniet uz Es ” pogu, tiks aktivizēta tālāk norādītā funkcija, kur tiks parādīts brīdinājuma ziņojums.
dokumentu. getElementById ( 'js' ) . onclick = funkcija jsFunc ( ) {brīdinājums ( 'Poga, uz kuras noklikšķināja funkcija JavaScript onClick' ) ;
}
Dotā funkcija aktivizēs pogu ' Noklikšķiniet šeit! ”:
dokumentu. getElementById ( 'pasākums' ) . addEventListener ( 'klikšķis' , notikumsFunc ) ;funkcija notikumsFunc ( ) {
brīdinājums ( 'Poga, uz kuras noklikšķināja JavaScript onClick ar EventListener metodi' ) ;
}
Izvade parādīs brīdinājuma ziņojumus par katru pogas klikšķi:
Secinājums
Lai iestatītu onclick ar JavaScript, ir divas dažādas pieejas: pirmā ir piešķirt vērtību HTML elementa onclick atribūtam, izmantojot JavaScript, un otrā pieeja ir skaidri pievienot notikumu uztvērēju HTML notikumam, kas pārbauda klikšķis ” pasākums. Šajā apmācībā ir definētas metodes onClick iestatīšanai ar JavaScript, kā arī piemēri.