IL al clic L'evento generalmente si verifica quando l'utente fa clic su un elemento. Consente al programmatore di eseguire una funzione JavaScript quando viene fatto clic su un elemento. Questo evento può essere utilizzato per convalidare un modulo, messaggi di avviso e molto altro.
Utilizzando JavaScript, questo evento può essere aggiunto dinamicamente a qualsiasi elemento. Supporta tutti gli elementi HTML tranne , , , , , , , ,
, , E . Significa che non possiamo applicare il al clic evento sui tag specificati.
In HTML, possiamo usare il file al clic attribuire e assegnare a Funzione JavaScript ad esso. Possiamo anche usare JavaScript aggiungiEventListener() metodo e passare a clic evento per una maggiore flessibilità.
Sintassi
Ora vediamo la sintassi dell'utilizzo di al clic evento in HTML e in javascript (senza aggiungiEventListener() metodo o utilizzando il aggiungiEventListener() metodo).
Nell'HTML
In JavaScript
object.onclick = function() { myScript }; In JavaScript utilizzando il metodo addEventListener()
object.addEventListener('click', myScript);
Vediamo come utilizzare al clic evento utilizzando alcune illustrazioni. Ora vedremo gli esempi di utilizzo di al clic evento in HTML e in JavaScript.
Esempio 1: utilizzo dell'attributo onclick in HTML
In questo esempio, stiamo utilizzando il file HTML al clic attributo e assegnandogli una funzione JavaScript. Quando l'utente fa clic sul pulsante indicato, verrà eseguita la funzione corrispondente e sullo schermo verrà visualizzata una finestra di dialogo di avviso.
function fun() { alert('Welcome to the javaTpoint.com'); } <h3> This is an example of using onclick attribute in HTML. </h3> <p> Click the following button to see the effect. </p> Click me Provalo adesso Produzione
Dopo aver fatto clic sul pulsante indicato, l'output sarà:
Esempio2: utilizzo di JavaScript
In questo esempio, stiamo utilizzando JavaScript al clic evento. Qui stiamo usando il al clic evento con l'elemento paragrafo.
Quando l'utente fa clic sull'elemento paragrafo, verrà eseguita la funzione corrispondente e il testo del paragrafo verrà modificato. Facendo clic su elemento, verranno modificati anche il colore di sfondo, la dimensione, il bordo e il colore del testo.
onclick event <h3> This is an example of using onclick event. </h3> <p> Click the following text to see the effect. </p> <p id="para">Click me</p> document.getElementById('para').onclick = function() { fun() }; function fun() { document.getElementById('para').innerHTML = 'Welcome to the javaTpoint.com'; document.getElementById('para').style.color = 'blue'; document.getElementById('para').style.backgroundColor = 'yellow'; document.getElementById('para').style.fontSize = '25px'; document.getElementById('para').style.border = '4px solid red'; } Provalo adesso Produzione
Dopo aver fatto clic sul testo Cliccami, l'output sarà -
Esempio 3: utilizzo del metodo addEventListener()
In questo esempio, stiamo utilizzando JavaScript aggiungiEventListener() metodo per allegare a clic evento all'elemento paragrafo. Quando l'utente fa clic sull'elemento paragrafo, il testo del paragrafo viene modificato.
Facendo clic sul paragrafo, cambieranno anche il colore dello sfondo e la dimensione del carattere degli elementi.
<h3> This is an example of using click event. </h3> <p> Click the following text to see the effect. </p> <p id="para">Click me</p> document.getElementById('para').onclick = function() { fun() }; function fun() { document.getElementById('para').innerHTML = 'Welcome to the javaTpoint.com'; document.getElementsByTagName('body')[0].style.color = 'blue'; document.getElementsByTagName('body')[0].style.backgroundColor = 'lightgreen'; document.getElementsByTagName('body')[0].style.fontSize = '25px'; document.getElementById('para').style.border = '4px solid red'; } Provalo adesso Produzione
Facendo clic sul testo Cliccami , l'output sarà -
