In deze zelfstudie wordt de procedure beschreven voor het instellen van onClick met JavaScript.
Hoe onClick in te stellen met JavaScript
Om de bij klikken met JavaScript zijn er twee verschillende methoden, namelijk:
- De eerste methode is om een waarde toe te wijzen aan het HTML-element bij klikken attribuut met behulp van JavaScript.
- De tweede methode is om expliciet een gebeurtenislistener toe te voegen aan de HTML-gebeurtenis die controleert op de ' Klik ' evenement.
Voorbeeld 1: wijs een waarde toe aan het onclick-kenmerk van het HTML-element met behulp van JavaScript
Maak in het HTML-bestand een kop en een knop ' Klik hier ' met de id ' js ' die de JavaScript-functie activeert terwijl u erop klikt.
< h2 > Set onClick eigenschap Met JavaScript h2 >
< knop-id = 'js' > Klik hier knop >
In de volgende stap wordt de gemaakte knop geopend en een ' bij klikken ' attribuut zal eraan worden gekoppeld. Na een klik op de knop wordt de gespecificeerde functie uitgevoerd en de ' stijl.achtergrondkleur ” eigenschap verandert de kleur van de knop als volgt:
document. getElementById ( 'js' ) . bij klikken = functie jsFunc ( ) {
document. getElementById ( 'js' ) . stijl . Achtergrond kleur = 'Purper' ;
}
De bijbehorende uitvoer is:
Voorbeeld 2: voeg expliciet een gebeurtenislistener toe aan de HTML-gebeurtenis
Maak een knop ' Klik hier! ” en wijst een id toe “ evenement 'naar toe die de methode addEventListener() activeert op de 'Klik' evenement:
< knop-id = 'evenement' > Klik hier ! krachtig > knop krachtig >>
Haal de knop op met behulp van its ID kaart en voeg dan een ' addEventListener() ' methode door een ' Klik 'gebeurtenis en een functie' evenementFunc ” waar de achtergrondkleur van de knop wordt gewijzigd:
document. getElementById ( 'evenement' ) . addEventListener ( 'Klik' , eventFunc ) ;functie eventFunc ( ) {
document. getElementById ( 'evenement' ) . stijl . Achtergrond kleur = 'Groente' ;
}
Uitgang
Voorbeeld 3: Alle onClick-methoden tegelijk gebruiken
In dit voorbeeld wordt de werking van alle methoden in één keer weergegeven. De eerste is de standaardmanier om het onclick-attribuut toe te voegen aan de HTML-tag zelf. Daarna zijn ook de twee methoden voor het instellen van het onclick-attribuut met behulp van JavaScript gedemonstreerd.
Maak in het volgende voorbeeld drie knoppen en bekijk de functionaliteit van het onclick-attribuut.
- De eerste knop ' Klik ” zal de “ htmlFunc() ” op het klikgebeurtenis.
- De knop ' Klik hier ' is toegankelijk met de toegewezen id ' js ' en wijs vervolgens een waarde toe aan het onclick-attribuut van de knop met behulp van JavaScript.
- De knop ' Klik hier! ' is toegankelijk met behulp van de id ' evenement ” en voeg vervolgens een “ addEventListener() methode ermee:
< knop-id = 'js' > Klik hier knop >< br >< br >
< knop-id = 'evenement' > Klik hier ! knop >
De onderstaande functie activeert de ' bij klikken 'gebeurtenis van de knop' Klik ”:
functie htmlFunc ( ) {alarm ( 'De knop waarop is geklikt door de HTML onClick-gebeurtenis' ) ;
}
Door te klikken op de ' Klik hier ”-knop, wordt de volgende functie geactiveerd waarbij een waarschuwingsbericht wordt weergegeven.
document. getElementById ( 'js' ) . bij klikken = functie jsFunc ( ) {alarm ( 'De knop geklikt door JavaScript onClick-functie' ) ;
}
De gegeven functie activeert de knop ' Klik hier! ”:
document. getElementById ( 'evenement' ) . addEventListener ( 'Klik' , eventFunc ) ;functie eventFunc ( ) {
alarm ( 'De knop waarop JavaScript heeft geklikt op Click met de EventListener-methode' ) ;
}
De uitvoer zal waarschuwingsberichten weergeven bij elke klik op de knop:
Conclusie
Om de onclick met JavaScript in te stellen, zijn er twee verschillende benaderingen: de eerste is om een waarde toe te wijzen aan het onclick-attribuut van het HTML-element met behulp van JavaScript en de tweede benadering is om expliciet een gebeurtenislistener toe te voegen aan de HTML-gebeurtenis die controleert op de ' Klik ' evenement. Deze tutorial heeft de methoden gedefinieerd om onClick met JavaScript in te stellen, samen met voorbeelden.