Questo tutorial definirà la procedura su come impostare onClick con JavaScript.
Come impostare onClick con JavaScript
Per impostare il al clic con JavaScript, ci sono due diversi metodi, che sono:
- Il primo metodo consiste nell'assegnare un valore all'elemento HTML al clic attributo utilizzando JavaScript.
- Il secondo metodo consiste nell'aggiungere esplicitamente un ascoltatore di eventi sull'evento HTML che verifica la presenza di ' clic evento.
Esempio 1: assegna un valore all'attributo onclick dell'elemento HTML utilizzando JavaScript
Nel file HTML, crea un'intestazione e un pulsante ' Cliccami 'con l'identificativo' js ” che attiverà la funzione JavaScript mentre si fa clic su di esso.
< h2 > Impostare Proprietà onClick Con JavaScript h2 >
< ID pulsante = 'js' > Cliccami pulsante >
Nel passaggio successivo, si accederà al pulsante creato e verrà visualizzato un ' al clic ” verrà allegato ad esso. Al clic del pulsante, verrà eseguita la funzione specificata e il ' style.backgroundColor ” cambierà il colore del pulsante come segue:
documento. getElementById ( 'js' ) . al clic = funzione jsFunc ( ) {
documento. getElementById ( 'js' ) . stile . colore di sfondo = 'Viola' ;
}
L'output corrispondente sarà:
Esempio 2: aggiungere in modo esplicito un listener di eventi sull'evento HTML
Crea un pulsante” Clicca qui! ” e assegna un id “ evento ” ad esso che attiverà il metodo addEventListener() sul file 'clic' evento:
< ID pulsante = 'evento' > Clicca qui ! forte > pulsante forte >>
Recupera il pulsante usando its id e quindi allegare un ' addEventListener() ” metodo passando un “ clic ” evento e funzione “ eventoFunc ” dove verrà cambiato il colore di sfondo del pulsante:
documento. getElementById ( 'evento' ) . addEventListener ( 'clic' , funzione evento ) ;funzione eventoFunc ( ) {
documento. getElementById ( 'evento' ) . stile . colore di sfondo = 'Verde' ;
}
Produzione
Esempio 3: utilizzo di tutti i metodi onClick contemporaneamente
In questo esempio, verrà visualizzato contemporaneamente il funzionamento di tutti i metodi. Il primo è il modo predefinito di aggiungere l'attributo onclick all'interno del tag HTML stesso. Successivamente, sono stati dimostrati anche i due metodi per impostare l'attributo onclick con l'aiuto di JavaScript.
Nell'esempio seguente, crea tre pulsanti e osserva la funzionalità dell'attributo onclick.
- Il primo pulsante “ Clic ” chiamerà il “ htmlFunc() ” sull'evento clic.
- Il tasto ' Cliccami ” si accederà con l'ID assegnato “ js ' e quindi assegnare un valore all'attributo onclick del pulsante utilizzando JavaScript.
- Il tasto ' Clicca qui! ” si accederà utilizzando l'id “ evento ' e quindi allegare un ' addEventListener() ” metodo con esso:
< ID pulsante = 'js' > Cliccami pulsante >< fratello >< fratello >
< ID pulsante = 'evento' > Clicca qui ! pulsante >
La funzione seguente attiverà il ' al clic ” evento del pulsante “ Clic ”:
funzione htmlFunc ( ) {mettere in guardia ( 'Il pulsante cliccato dall'evento HTML onClick' ) ;
}
Facendo clic su ' Cliccami ”, si attiverà la seguente funzione in cui verrà visualizzato un messaggio di avviso.
documento. getElementById ( 'js' ) . al clic = funzione jsFunc ( ) {mettere in guardia ( 'Il pulsante cliccato dalla funzione JavaScript onClick' ) ;
}
La funzione data attiverà il pulsante ' Clicca qui! ”:
documento. getElementById ( 'evento' ) . addEventListener ( 'clic' , funzione evento ) ;funzione eventoFunc ( ) {
mettere in guardia ( 'Il pulsante cliccato da JavaScript onClick con il metodo EventListener' ) ;
}
L'output visualizzerà messaggi di avviso a ogni clic del pulsante:
Conclusione
Per impostare l'onclick con JavaScript, esistono due diversi approcci, il primo consiste nell'assegnare un valore all'attributo onclick dell'elemento HTML utilizzando JavaScript e il secondo approccio consiste nell'aggiungere esplicitamente un ascoltatore di eventi sull'evento HTML che verifica la presenza di ' clic evento. Questo tutorial ha definito i metodi per impostare onClick con JavaScript insieme ad esempi.