Come impostare OnClick con JavaScript

Un evento è un'azione intrapresa da un browser o da un utente. Il concetto JavaScript di gestori di eventi o ascoltatori può essere utilizzato per gestire questi eventi. Un certo evento innesca l'esecuzione di un ascoltatore di eventi. Uno di questi ascoltatori di eventi è "al clic."Quando un utente fa clic su un elemento, un ascoltatore di eventi onClick viene attivato o eseguito.

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 metodi diversi, che sono:

• Il primo metodo è assegnare un valore agli elementi HTML al clic attributo usando JavaScript.
• Il secondo metodo è quello di aggiungere esplicitamente un ascoltatore di eventi sull'evento HTML che controlla il "clic"Evento.

Esempio 1: assegna un valore all'attributo OnClick dell'elemento HTML usando JavaScript

Nel file HTML, crea un'intestazione e un pulsante "Cliccami"Con l'ID"js"Che attiverà la funzione JavaScript mentre fai clic su di essa.

Impostare la proprietà OnClick con JavaScript

Cliccami

Nel passaggio seguente, si accede al pulsante creato e un "al clic"L'attributo sarà allegato ad esso. Al tatto del pulsante, la funzione specificata verrà eseguita e il "stile.colore di sfondo"La proprietà cambierà il colore del pulsante come segue:

documento.getElementById ("JS").OnClick = function jsfunc ()
documento.getElementById ("JS").stile.backgroundColor = "Purple";

L'output corrispondente sarà:

Esempio 2: Aggiungi esplicitamente un ascoltatore di eventi sull'evento HTML

Crea un pulsante "clicca qui!"E assegna un ID"evento"A esso attiverà il metodo AddeventListener () sul "clic" evento:

clicca qui!pulsante>

Prendi il pulsante usando il suo id e poi allegare un "addEventListener ()Metodo "passando un"clic"Evento e una funzione"Eventfunc"Dove verrà modificato il colore di sfondo del pulsante:

documento.getElementById ("evento").addEventListener ("Click", eventFunc);
funzione eventFunc ()
documento.getElementById ("evento").stile.backgroundColor = "Green";

Produzione

Esempio 3: usando tutti i metodi OnClick contemporaneamente

In questo esempio, il funzionamento di tutti i metodi verrà visualizzato contemporaneamente. 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.

Nel seguente esempio, crea tre pulsanti e visualizza la funzionalità dell'attributo OnClick.

• Il primo pulsante "Clic"Chiamerà il"htmlfunc ()"Nell'evento click.
• Il tasto "Cliccami"Avrà accesso con l'ID assegnato"js"E quindi assegnare un valore all'attributo OnClick del pulsante usando JavaScript.
• Il tasto "clicca qui!"Verrà accessibile utilizzando l'ID"evento"E poi attaccare un"addEventListener ()"Metodo con esso:

Clic


Cliccami


clicca qui!

La funzione seguente attiverà il “al clic"Evento del pulsante"Clic":

funzione htmlfunc ()
Avviso ("Il pulsante cliccato da HTML OnClick Event");

Facendo clic su "Cliccami"Pulsante, la seguente funzione attiverà dove verrà visualizzato un messaggio di avviso.

documento.getElementById ("JS").OnClick = function jsfunc ()
Avviso ("Il pulsante cliccato da JavaScript OnClick Function");

La funzione data attiverà il pulsante "clicca qui!":

documento.getElementById ("evento").addEventListener ("Click", eventFunc);
funzione eventFunc ()
Avviso ("Il pulsante cliccato da JavaScript onClick con il metodo EventListener");

L'output visualizzerà i messaggi di avviso su ciascun pulsante Click:

Conclusione

Per impostare l'OnClick con JavaScript, ci sono due approcci diversi, il primo è quello di assegnare un valore all'attributo OnClick dell'elemento HTML usando JavaScript e il secondo approccio è quello di aggiungere esplicitamente un ascoltatore di eventi sull'evento HTML che controlla la "clic"Evento. Questo tutorial ha definito i metodi per impostare OnClick con JavaScript insieme agli esempi.