Tämä opetusohjelma määrittelee menettelyn, jolla onClick asetetaan JavaScriptillä.
OnClickin asettaminen JavaScriptillä
Asettaaksesi klikkaamalla JavaScriptillä on kaksi eri menetelmää, jotka ovat:
- Ensimmäinen tapa on määrittää arvo HTML-elementille klikkaamalla attribuutti JavaScriptillä.
- Toinen tapa on lisätä eksplisiittisesti tapahtuman kuuntelija HTML-tapahtumaan, joka tarkistaa ' klikkaus ' tapahtuma.
Esimerkki 1: Määritä arvo HTML-elementin onclick-attribuutille JavaScriptin avulla
Luo HTML-tiedostoon otsikko ja painike ' Napsauta minua 'tunnuksella' js ', joka käynnistää JavaScript-toiminnon, kun sitä napsautetaan.
< h2 > Aseta onClick-ominaisuus JavaScriptillä h2 >
< painikkeen tunnus = 'js' > Napsauta minua -painiketta >
Seuraavassa vaiheessa avataan luotu painike ja ' klikkaamalla ”-attribuutti liitetään siihen. Kun painiketta napsautetaan, määritetty toiminto suoritetaan ja ' style.backgroundColor ”-ominaisuus muuttaa painikkeen väriä seuraavasti:
asiakirja. getElementById ( 'js' ) . klikkaamalla = funktio jsFunc ( ) {
asiakirja. getElementById ( 'js' ) . tyyli . taustaväri = 'Violetti' ;
}
Vastaava tulos on:
Esimerkki 2: Tapahtumaseurannan lisääminen HTML-tapahtumaan
Luo painike ' Klikkaa tästä! 'ja antaa tunnuksen' tapahtuma ', joka käynnistää addEventListener()-metodin 'klikkaus' tapahtuma:
< painikkeen tunnus = 'tapahtuma' > Klikkaa tästä ! vahva > -painiketta vahva >>
Hae painike sen avulla id ja liitä sitten ' addEventListener() ' -menetelmä ohittamalla ' klikkaus 'tapahtuma ja toiminto' eventFunc ', jossa painikkeen taustaväri muutetaan:
asiakirja. getElementById ( 'tapahtuma' ) . addEventListener ( 'klikkaus' , eventFunc ) ;toiminto eventFunc ( ) {
asiakirja. getElementById ( 'tapahtuma' ) . tyyli . taustaväri = 'Vihreä' ;
}
Lähtö
Esimerkki 3: Kaikkien onClick-menetelmien käyttäminen kerralla
Tässä esimerkissä kaikkien menetelmien toiminta näytetään kerralla. Ensimmäinen on oletustapa lisätä onclick-attribuutti itse HTML-tunnisteeseen. Sen jälkeen on myös esitelty kaksi tapaa asettaa onclick-attribuutti JavaScriptin avulla.
Luo seuraavassa esimerkissä kolme painiketta ja katso onclick-attribuutin toiminnallisuus.
- Ensimmäinen painike ' Klikkaus ' kutsuu ' htmlFunc() 'napsautustapahtumassa.
- Nappi ' Napsauta minua ' pääsee käsiksi sille määritetyllä tunnuksella' js ” ja määritä sitten arvo painikkeen onclick-attribuutille JavaScriptin avulla.
- Nappi ' Klikkaa tästä! ' pääsee tunnuksella ' tapahtuma ' ja liitä sitten ' addEventListener() ”menetelmä sen kanssa:
< painikkeen tunnus = 'js' > Napsauta minua -painiketta >< br >< br >
< painikkeen tunnus = 'tapahtuma' > Klikkaa tästä ! -painiketta >
Alla oleva toiminto käynnistää ' klikkaamalla 'painikkeen tapahtuma' Klikkaus ':
toiminto htmlFunc ( ) {hälytys ( 'HTML onClick -tapahtuman napsauttama painike' ) ;
}
Napsauttamalla ' Napsauta Minä ” -painiketta, seuraava toiminto laukeaa, jossa varoitusviesti tulee näkyviin.
asiakirja. getElementById ( 'js' ) . klikkaamalla = funktio jsFunc ( ) {hälytys ( 'JavaScript onClick -toiminnon napsauttama painike' ) ;
}
Annettu toiminto laukaisee painikkeen ' Klikkaa tästä! ':
asiakirja. getElementById ( 'tapahtuma' ) . addEventListener ( 'klikkaus' , eventFunc ) ;toiminto eventFunc ( ) {
hälytys ( 'JavaScriptin napsauttama painike onClick with EventListener Method' ) ;
}
Tulos näyttää varoitusviestit jokaisesta painikkeen napsautuksesta:
Johtopäätös
Onclickin asettamiseen JavaScriptillä on kaksi erilaista lähestymistapaa, joista ensimmäinen on määrittää arvo HTML-elementin onclick-attribuutille JavaScriptin avulla ja toinen tapa on lisätä HTML-tapahtumaan eksplisiittisesti tapahtumaseuraaja, joka tarkistaa klikkaus ' tapahtuma. Tämä opetusohjelma on määritellyt menetelmät onClickin määrittämiseksi JavaScriptillä ja esimerkkejä.