Neueste Web-Entwicklung Tutorials
 

Onclick Ereignis

Ereignisobjektreferenz Ereignisobjekt

Beispiel

Führen Sie einen JavaScript wenn eine Schaltfläche geklickt wird:

<button onclick="myFunction()">Click me</button>
Versuch es selber "

Mehr "Try it Yourself" Sie "Try it Yourself" Beispiele unten.

Definition und Verwendung

Das Onclick-Ereignis tritt ein, wenn der Benutzer auf ein Element klickt.

Browser-Unterstützung

Event
onclick Ja Ja Ja Ja Ja

Syntax

In HTML:

< Versuch es selber "

In JavaScript:

object .onclick=function(){ Versuch es selber "

In JavaScript mit den addEventListener() Methode:

object .addEventListener("click", myScript );
Versuch es selber "

Hinweis: Die addEventListener() Methode wird nicht unterstützt in Internet Explorer 8 und früheren Versionen.

Technische Details

Blasen: Ja
Es fällt eine Pauschale: Ja
Event-Typ: Mouseevent
Unterstützte HTML-Tags: Alle HTML - Elemente, AUSSER: <base>, <bdo>, in , <head>, <html>, <iframe>, <meta>, <param>, <script>, <style> und <title>
DOM Version: Level 2 Veranstaltungen
Beispiele

Mehr Beispiele

Beispiel

Klicken Sie auf ein <button> Element den aktuellen Tag, Datum und Uhrzeit angezeigt werden :

<button onclick="getElementById('demo').innerHTML=Date()">What is the time?</button>
Versuch es selber "

Beispiel

Klicken Sie auf ein <p> Element auf seine Textfarbe auf rot:

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

<script>
function myFunction() {
    document.getElementById("demo").style.color = "red";
}
</script>
Versuch es selber "

Beispiel

Ein weiteres Beispiel dafür, wie die Farbe eines ändern <p> , indem Sie auf das Element:

<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>
Versuch es selber "

Beispiel

Klicken Sie auf eine Schaltfläche einen Text aus einem Eingabefeld ein anderes Eingabefeld zu kopieren:

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

<script>
function myFunction() {
    document.getElementById("field2").value = document.getElementById("field1").value;
}
</script>
Versuch es selber "

Beispiel

Weisen Sie den "onclick" Ereignis an das Fensterobjekt:

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";
}
Versuch es selber "

Beispiel

Mit Onclick eine Dropdown-Schaltfläche zu erstellen:

// 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');
      }
    }
  }
}
Versuch es selber "

Verwandte Seiten

HTML - DOM - Referenz: ondblclick Ereignis

HTML - DOM - Referenz: onmousedown Ereignis

HTML - DOM - Referenz: onmouseup Ereignis

<Ereignisobjekt