Acest tutorial va defini procedura despre cum să setați onClick cu JavaScript.
Cum să setați onClick cu JavaScript
Pentru a seta onclick cu JavaScript, există două metode diferite, care sunt:
- Prima metodă este de a atribui o valoare elementelor HTML onclick atribut folosind JavaScript.
- A doua metodă este să adăugați în mod explicit un ascultător de evenimente pe evenimentul HTML care verifică „ clic ” eveniment.
Exemplul 1: Atribuiți o valoare atributului onclick al elementului HTML utilizând JavaScript
În fișierul HTML, creați un titlu și un buton „ Click pe mine ” cu id-ul ” js ” care va declanșa funcția JavaScript în timp ce faceți clic pe ea.
< h2 > A stabilit Proprietate onClick Cu JavaScript h2 >
< ID-ul butonului = 'js' > Click pe mine buton >
În pasul următor, butonul creat va fi accesat și un „ onclick ” va fi atașat acestuia. La clic pe butonul, funcția specificată va fi executată și „ stil.fondCuloare ”proprietatea va schimba culoarea butonului după cum urmează:
document. getElementById ( 'js' ) . onclick = funcția jsFunc ( ) {
document. getElementById ( 'js' ) . stil . culoare de fundal = 'Violet' ;
}
Ieșirea corespunzătoare va fi:
Exemplul 2: Adăugați în mod explicit un ascultător de evenimente la evenimentul HTML
Creați un buton „ Click aici! ” și atribuie un id ” eveniment ” la acesta care va declanșa metoda addEventListener() pe 'clic' eveniment:
< ID-ul butonului = 'eveniment' > Click aici ! puternic > buton puternic >>
Preluați butonul folosindu-l id și apoi atașați un „ addEventListener() ” prin trecerea unui “ clic „eveniment și o funcție” eventFunc ” unde culoarea de fundal a butonului va fi schimbată:
document. getElementById ( 'eveniment' ) . addEventListener ( 'clic' , eventFunc ) ;funcția eventFunc ( ) {
document. getElementById ( 'eveniment' ) . stil . culoare de fundal = 'Verde' ;
}
Ieșire
Exemplul 3: Utilizarea simultană a tuturor metodelor onClick
În acest exemplu, funcționarea tuturor metodelor va fi afișată simultan. Prima este modalitatea implicită de a adăuga atributul onclick în eticheta HTML în sine. După aceea, au fost demonstrate și cele două metode de setare a atributului onclick cu ajutorul JavaScript.
În exemplul următor, creați trei butoane și vedeți funcționalitatea atributului onclick.
- Primul buton „ Clic ” va numi „ htmlFunc() ” pe evenimentul clic.
- Butonul ' Click pe mine ” va fi accesat cu id-ul atribuit ” js ” și apoi atribuiți o valoare atributului onclick al butonului folosind JavaScript.
- Butonul ' Click aici! ” va fi accesat folosind id-ul “ eveniment ” și apoi atașați un „ addEventListener() ” metoda cu ea:
< ID-ul butonului = 'js' > Click pe mine buton >< br >< br >
< ID-ul butonului = 'eveniment' > Click aici ! buton >
Funcția de mai jos va declanșa „ onclick „eveniment al butonului” Clic ”:
funcția htmlFunc ( ) {alerta ( „Butonul pe care s-a făcut clic de evenimentul HTML onClick” ) ;
}
Făcând clic pe „ Faceți clic pe Mine ”, se va declanșa următoarea funcție, unde va fi afișat un mesaj de avertizare.
document. getElementById ( 'js' ) . onclick = funcția jsFunc ( ) {alerta ( „Butonul pe care s-a făcut clic de către funcția JavaScript onClick” ) ;
}
Funcția dată va declanșa butonul „ Click aici! ”:
document. getElementById ( 'eveniment' ) . addEventListener ( 'clic' , eventFunc ) ;funcția eventFunc ( ) {
alerta ( „Butonul pe care a făcut clic de JavaScript onClick cu metoda EventListener” ) ;
}
Ieșirea va afișa mesaje de alertă la fiecare clic pe buton:
Concluzie
Pentru a seta onclick-ul cu JavaScript, există două abordări diferite, prima este de a atribui o valoare atributului onclick al elementului HTML folosind JavaScript și a doua abordare este de a adăuga în mod explicit un ascultător de evenimente la evenimentul HTML care verifică „ clic ” eveniment. Acest tutorial a definit metodele de setare onClick cu JavaScript, împreună cu exemple.