Esempio
Esegui un JavaScript quando un tasto è scattato:
<button onclick="myFunction()">Click me</button>
Prova tu stesso " Più "Try it Yourself" esempi di seguito.
Definizione e l'utilizzo
L'evento onclick si verifica quando l'utente clicca su un elemento.
Supporto browser
| Evento | |||||
|---|---|---|---|---|---|
| onclick | sì | sì | sì | sì | sì |
Sintassi
In HTML:
In JavaScript:
object .onclick=function(){ Prova tu stesso " In JavaScript, utilizzando il addEventListener() Metodo:
object .addEventListener("click", myScript );
Prova tu stesso " Nota: addEventListener() metodo non è supportato in Internet Explorer 8 e versioni precedenti.
Dettagli tecnici
| bolle: | sì |
|---|---|
| cancelable: | sì |
| Tipo di evento: | MouseEvent |
| tag HTML supportati: | Tutti gli elementi HTML, ad eccezione di: <base>, <BDO>, <br>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style> e <title> |
| DOM Versione: | Livello 2 Eventi |
Altri esempi
Esempio
Fare clic su un <button> elemento per visualizzare il giorno corrente, la data e l'ora:
<button onclick="getElementById('demo').innerHTML=Date()">What
is the time?</button>
Prova tu stesso " Esempio
Clicca su un <p> elemento per cambiare il suo colore del testo in rosso:
<p id="demo" onclick="myFunction()">Click me to change my text color.</p>
<script>
function myFunction() {
document.getElementById("demo").style.color = "red";
}
</script>
Prova tu stesso " Esempio
Un altro esempio su come cambiare il colore di un <p> elemento cliccando su di esso:
<p id="demo" onclick="myFunction(this, 'red')">Click me to change my text
color.</p>
<script>
function myFunction(elmnt,clr) {
elmnt.style.color = clr;
}
</script>
Prova tu stesso " Esempio
Fare clic su un pulsante per copiare del testo da un campo di input ad un altro campo di inserimento:
<button onclick="myFunction()">Copy Text</button>
<script>
function myFunction() {
document.getElementById("field2").value =
document.getElementById("field1").value;
}
</script>
Prova tu stesso " Esempio
Assegnare il "onclick" evento all'oggetto finestra:
window.onclick = myFunction;
// If the user clicks in the window, set
the background color of <body> to yellow
function myFunction() {
document.getElementsByTagName("BODY")[0].style.backgroundColor = "yellow";
}
Prova tu stesso " Esempio
Utilizzando onclick di creare un pulsante a discesa:
// Get the button, and when the user clicks on it, execute myFunction
document.getElementById("myBtn").onclick = function() {myFunction()};
/* myFunction toggles between adding and removing the show class, which
is used to hide and show the dropdown content */
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}
// Close the dropdown if the user clicks outside of it
window.onclick =
function(event) {
if (!event.target.matches('.dropbtn')) {
var dropdowns = document.getElementsByClassName("dropdown-content");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show'))
{
openDropdown.classList.remove('show');
}
}
}
}
Prova tu stesso " Pagine correlate
Di riferimento HTML DOM: evento ondblclick
Di riferimento HTML DOM: evento onmousedown
Di riferimento HTML DOM: evento onmouseup
<Oggetto evento