La funzione OnClick in JQuery spiegata con esempi

Una delle librerie veloci, piccole e ricche di funzionalità in JavaScript è jQuery. jQuery viene utilizzato per creare documenti HTML, gestione di eventi, attraversamento e manipolazione, ecc.

Ogni volta che si fa clic su un elemento HTML, si verifica l'evento click jQuery. Per attivare la funzione onclick in jQuery , viene utilizzato il metodo click(). Ad esempio, facendo clic su un paragrafo in un documento, un evento click verrà attivato dal metodo $(“p”).click(). L'utente può allegare una funzione a un metodo click ogni volta che si verifica un evento di un clic per eseguire la funzione. Un pezzo di codice viene quindi eseguito ogni volta che viene attivato un evento di click().

Il clic del mouse viene simulato tramite il metodo HTMLElement.click().

La funzione Click() è una funzione integrata in jQuery che avvia un evento click. Ogni volta che si fa clic su un elemento rilevante, viene attivato un evento da un metodo click(). Questo evento genera quindi un evento clic degli elementi più in alto nell'albero del documento (o catena di eventi).

Come suggerisce il nome, è semplicemente la pressione e il rilascio del pulsante del mouse da parte dell'utente sull'elemento.

Uno o più gestori di eventi sono collegati agli elementi selezionati tramite il metodo on(). Facendo clic su un elemento, si verifica un evento di click(). Un metodo click() viene eseguito una volta che si verifica un evento di click(). Una funzione è collegata a un metodo click() ed eseguita. Un metodo click() viene utilizzato con altri eventi di jQuery.

Pertanto .click() associa un gestore di eventi all'evento JavaScript "click" oppure attiva un evento su un elemento. Le varianti del metodo JavaScript onclick sono:

1. .click( gestore ).
2. .click([eventData], gestore).
3. .clic().

La prima e la seconda variazione sono una forma abbreviata per .on( “click”, handler ) e la scorciatoia per .trigger( “click” ) nell'ultima variazione.

Ogni volta che un puntatore del mouse si trova sull'elemento e il pulsante viene premuto e rilasciato, l'evento click() viene inviato a quell'elemento. L'evento può essere ricevuto da qualsiasi elemento dell'HTML.

L'evento Click() può anche essere attivato se si fa clic sull'altro elemento tramite il codice seguente.

Con questo codice, il messaggio verrà avvisato dall'elemento

Attraverso i seguenti eventi, viene attivato solo un evento click().

• Quando il puntatore di un mouse si trova all'interno di un elemento e il pulsante del mouse è premuto.
• Quando il puntatore di un mouse si trova all'interno di un elemento e il pulsante del mouse viene rilasciato.

Prima di intraprendere un'azione, gli eventi sopra menzionati sono solitamente la sequenza desiderata. Altrimenti, l'altro evento adatto è l'evento mouse giù o mouse su.

Dato che il metodo .click() è la scorciatoia per .on( “click”, handler ), la possibilità di distacco è presente attraverso l'uso di .off( “click” ).

Utilizzo

Sono presenti due modi che possono essere utilizzati per chiamare un metodo click():

• Con un dato argomento di funzione
• Senza un dato argomento

La funzione onclick in jQuery può essere utilizzata in elementi di HTML come div, paragrafi, collegamenti ipertestuali, ecc. per eseguire l'attività desiderata. Un clic è un evento del mouse che si verifica quando si preme il pulsante del mouse. Tuttavia, l'evento si verificherà se il puntatore di un mouse si trova all'interno dell'elemento.

Sintassi:

$(selettore).click() ; -> utilizzato per attivare un evento click per gli elementi selezionati.

$(selettore).click(funzione); -> utilizzato per allegare la funzione a un evento click.

• Il parametro opzionale utilizzato è la “funzione” che viene utilizzata per l'esecuzione al verificarsi di un evento click.
• Valore restituito: viene restituito l'elemento selezionato specificato con la funzione da eseguire.

Implementazione del metodo click()

1. Quando viene fornito un argomento di funzione

In questo tipo di implementazione, una funzione viene presa come input e viene eseguita ogni volta che viene chiamato il metodo click().

• La scrittura del codice avviene tra il tag dello script e all'interno del corpo HTML del codice.
• La chiamata della funzione viene eseguita come attributo di stile h1.
• Un argomento viene dichiarato con la funzione e viene preso come funzione separatamente.
• Il metodo toggle viene applicato sull'oggetto utilizzando questo operatore con un ritardo di 1000 ms.
• Di seguito viene mostrato un esempio del metodo di implementazione con un determinato argomento di funzione.

L'output del codice sarà "Facendo clic su di me si alternerà il testo!"

2. Quando non viene fornito alcun argomento

Il metodo javascript onclick genera un evento di Un elemento è già assegnato al metodo. Pertanto un elemento può chiamare l'evento onclick di un altro elemento separatamente. Ciò può essere ottenuto attraverso i seguenti passaggi:

1. Un oggetto deve essere prima dichiarato con un attributo di uno stile particolare su cui è possibile fare clic. Un'azione onclick deve essere dichiarata per l'oggetto.
2. Un blocco di script deve essere creato nel corpo del codice in cui l'attribuzione del metodo click() viene eseguita in un formato di stile diverso, p .
3. Il metodo h1 onclick che è già definito deve essere chiamato all'interno della chiamata di funzione.
4. Lo stesso metodo onclick viene quindi richiamato per un attributo.
5. Di seguito è mostrato un esempio di codice che mostra l'implementazione di un metodo click() senza un determinato argomento.

L'output del codice è "Facendo clic su di me verrà visualizzato un avviso!".

• • Molti eventi possono essere utilizzati nel metodo $.on come dblclick, change e altri.

3. Rendering di un pulsante HTML e aggiunta di testo alla pagina facendo clic sul pulsante. Il metodo Click() è più comunemente associato a un pulsante, tuttavia può essere collegato a qualsiasi altro elemento in una pagina Web.

• • Viene visualizzato un pulsante di base con un id di "btn-primary" che si trova all'interno di un <div> con un id di "main.
  • Attraverso il codice, i nuovi contenuti devono essere visualizzati con una classe di "nuovi contenuti" nel tag <p> dopo il clic del pulsante.
  • Il jQuery è racchiuso all'interno dei tag <script>.

• • Il metodo click() è collegato all'id del pulsante e un argomento viene preso come una funzione di call back che è una funzione anonima.
  • La stringa "pulsante cliccato" viene restituita dalla funzione di callback.

• • Una funzione senza nome viene semplicemente definita funzione anonima e utilizzata come callback come argomenti di un metodo. Per la creazione di siti Web e applicazioni reattivi, le funzioni anonime e i metodi di callback fungono da pietra angolare.

• • Il codice inizierà con il pulsante all'interno del <div> “main”.
  • Una volta che si fa clic sul pulsante, la funzione di callback verrà chiamata dal gestore dell'evento poiché il metodo click() è collegato al selettore del pulsante.
  • Verrà visualizzata la stringa "pulsante cliccato".
  • Il codice sopra visualizzerà il contenuto solo una volta, tuttavia per visualizzare la stringa ogni volta che si fa clic sul codice, viene utilizzato append() invece di HTML().

• • Produrrà la stringa tre volte come nuovo contenuto all'interno del tag <p>.
  • La funzione di richiamata viene richiamata ogni volta che si fa clic sul pulsante.

Conclusione

Il funzionamento della funzione onclick in jquery è stato discusso nell'articolo insieme ai suoi usi ed esempi. Con solo poche righe di codice, è possibile creare funzionalità di pagina Web tramite il metodo JavaScript onclick .

Se hai voglia di saperne di più sullo sviluppo web e specializzarti in altre aree correlate, puoi consultare il corso “ Master of Science in Computer Science ” offerto da upGrad . Appositamente progettato per i professionisti entry-level (sia maschi che femmine tra i 21 ei 45 anni di età), il corso sarà su una piattaforma online con sessioni dal vivo, per la comodità dei pendolari a lunga distanza. Con oltre 30 progetti e incarichi, lo studente otterrà i vantaggi dello status di alumni IIIT-Bangalore e LJMU . Sentiti libero di contattare il nostro team per qualsiasi assistenza.