Come attivare l'evento di clic su JavaScript

Durante la programmazione in JavaScript, incontriamo spesso situazioni in cui vogliamo invocare qualsiasi funzione sul clic del pulsante. Ad esempio, nel caso dei test di automazione, è necessario testare alcune funzionalità aggiunte di una pagina Web o di un sito. In tali scenari, la tecnica di innescare gli eventi di clic in JavaScript diventa molto utile ed efficiente per contrastare le sfide dichiarate.

Questo articolo ti guiderà sulla procedura per attivare gli eventi di clic in JavaScript.

Come attivare l'evento di clic su JavaScript?

Per innescare fare clic su Evento in JavaScript, applicare le seguenti tecniche:

• "clic()" metodo
• "addEventListener ()" E "DispatchEvent ()"Metodi

Ora dimostreremo l'uso dei metodi sopra menzionati uno per uno!

Metodo 1: trigger fare clic su Evento in JavaScript usando il metodo Click ()

IL "clic()"Il metodo viene utilizzato per eseguire un clic sull'elemento specificato. Questo metodo può essere implementato creando un pulsante, ottenendo il suo ID e attivando l'evento clicca quando il pulsante viene fatto clic utilizzando una funzione definita dall'utente.

Passare attraverso il seguente esempio per la dimostrazione.

Esempio
Nel seguente esempio, verrà aggiunto un pulsante con "Cliccami"Come ID e il suo evento OnClick associato, che accederà al"clickevent ()" funzione:

Cliccami

Nel codice JavaScript, accedi al pulsante creato specificando il suo ID nel documento.metodo getElementById (). Successivamente, il metodo "Click ()" verrà invocato per eseguire l'ulteriore operazione:

const get = document.getElementById ('btn');
Ottenere.clic();

Infine, definisci la funzione denominata "clickevent ()"In modo tale da stampare il seguente messaggio sulla console quando il pulsante viene cliccato usando"clic()" metodo:

funzione clickevent ()
console.Log ("Fare clic su evento attivato")

L'output dell'implementazione di cui sopra risulterà come segue:

Nell'uscita sopra, si osserva che il pulsante "Cliccami"Viene cliccato in modo automatizzato usando il"clic()" metodo. Nel frattempo, si accede alla funzione Clickevent () e il messaggio specificato viene registrato sulla console.

Metodo 2: trigger fare clic sull'evento in JavaScript utilizzando i metodi "AddeventListener ()" e "DispatchEvent ()"

IL "addEventListener ()"Il metodo allega un gestore di eventi a un oggetto DOM e al"DispatchEvent ()"Il metodo invia l'evento specificato sull'oggetto. Questi metodi possono essere utilizzati in combinazione per creare un nuovo oggetto evento ed eseguire l'evento Click con l'aiuto della funzione specificata.

Sintassi

documento.addEventListener (evento, funzione)

Nella sintassi sopra, "evento"Si riferisce all'evento specificato e"funzione"È la funzione su cui deve essere applicato l'evento.

DispatchEvent (evento)

Qui, "evento"Si riferisce all'oggetto evento selezionato che deve essere spedito.

Panoramica il seguente esempio.

Esempio
Il primo passo è includere un pulsante con un ID, un evento OnClick e un valore discusso nel metodo precedente:

Cliccami

Quindi, prendi il pulsante e aggiungi l'evento "clic" usando il "addEventListener ()"Metodo e specificare"e"Nel suo argomento che si riferisce all'oggetto evento (clicca). Poi il "DispatchEvent ()"Il metodo spedirà l'evento click su un oggetto chiamato"Evento"Come dimostrato:

const get = document.getElementById ('btn');
Ottenere.addEventListener ('click', e => );
Ottenere.DispatchEvent (nuovo evento ('Click'));

Infine, definire la stessa funzione clickevent () indicata nel metodo precedente per visualizzare il messaggio corrispondente quando il "clic"L'evento è attivato:

funzione clickevent ()
console.Log ("Fare clic su evento attivato")

Produzione

Abbiamo compilato metodi diversi per attivare gli eventi di clic in JavaScript.

Conclusione

Per attivare gli eventi clicca in JavaScript, il “clic()"Il metodo può essere applicato per recuperare il pulsante e invocare la funzione aggiunta di conseguenza. Anche il "addEventListener ()" E "DispatchEvent ()"I metodi possono essere utilizzati per includere un evento specificato e inviarlo a un oggetto appena creato. Questo articolo ha dimostrato i metodi per attivare gli eventi di clic in JavaScript.