Ultimele tutoriale de dezvoltare web
 

onclick Eveniment

Eveniment obiect de referință obiect Eveniment

Exemplu

Executați un JavaScript atunci când un buton este apăsat:

<button onclick="myFunction()">Click me</button>
Încearcă - l singur »

Mai multe "Try it Yourself" - "Try it Yourself" exemplele de mai jos.


Definiție și utilizare

Evenimentul onclick are loc atunci când utilizatorul face clic pe un element.


Suport pentru browser-

Eveniment
onclick da da da da da

Sintaxă

In HTML:

În JavaScript:

object .onclick=function(){ Încearcă - l singur »

În JavaScript, folosind addEventListener() metoda:

object .addEventListener("click", myScript );
Încearcă - l singur »

Notă: addEventListener() , metoda nu este acceptată în Internet Explorer 8 și versiunile anterioare.


Detalii tehnice

Bule: da
anulabil: da
Tip de eveniment: MouseEvent
Tag-uri HTML acceptate: Toate elementele HTML, cu excepția: <bază>, <BDO>, <br>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style> și <title>
DOM Versiune: Nivelul 2 Evenimente
Exemple

Mai multe exemple

Exemplu

Dați clic pe un <button> Element pentru a afișa ziua curentă, data și ora:

<button onclick="getElementById('demo').innerHTML=Date()">What is the time?</button>
Încearcă - l singur »

Exemplu

Dați clic pe <p> Element pentru a schimba culoarea textului la roșu:

<p id="demo" onclick="myFunction()">Click me to change my text color.</p>

<script>
function myFunction() {
    document.getElementById("demo").style.color = "red";
}
</script>
Încearcă - l singur »

Exemplu

Un alt exemplu cu privire la modul de a schimba culoarea unui <p> elementul făcând clic pe ea:

<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>
Încearcă - l singur »

Exemplu

Faceți clic pe un buton pentru a copia un text dintr-un câmp de introducere într-un alt câmp de intrare:

<button onclick="myFunction()">Copy Text</button>

<script>
function myFunction() {
    document.getElementById("field2").value = document.getElementById("field1").value;
}
</script>
Încearcă - l singur »

Exemplu

Atribuirea "onclick" eveniment la obiect fereastră:

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";
}
Încearcă - l singur »

Exemplu

Utilizarea onclick pentru a crea un buton drop-down:

// 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');
      }
    }
  }
}
Încearcă - l singur »

Pagini similare

HTML DOM referință: eveniment ondblclick

HTML DOM referință: eveniment onmousedown

HTML DOM referință: eveniment onmouseup


<Eveniment obiect