Zdarzenie onclick

Obiekt zdarzenia

Przykład

Wykonać JavaScript po kliknięciu przycisku:

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

Spróbuj sam "

Więcej "Try it Yourself" przykłady poniżej.

Definicja i Wykorzystanie

Onclick zdarzenie występuje, gdy użytkownik kliknie na elemencie.

Wsparcie przeglądarka

Zdarzenie
onclick	tak	tak	tak	tak	tak

Składnia

W HTML:

< Spróbuj sam "

W JavaScript:

object .onclick=function(){ Spróbuj sam "

W JavaScript, używając addEventListener() metodę:

object .addEventListener("click", myScript );

Spróbuj sam "

Uwaga: addEventListener() metoda ta nie jest obsługiwana w programie Internet Explorer 8 i wcześniejszych wersjach.

Szczegóły techniczne

bubbles:	tak
opłata:	tak
Typ wydarzenia:	MouseEvent
Obsługiwane znaczniki HTML:	Wszystkie elementy HTML, z wyjątkiem: <baza>, <BDO>, Największa, <head>, <html>, <iframe>, <meta>, <param> <script> <style> i <title>
DOM wersja:	Poziom 2 Wydarzenia

Więcej przykładów

Przykład

Kliknij na <button> elementu, aby wyświetlić bieżący dzień, data i czas:

Spróbuj sam "

Przykład

Kliknij na <p> elementu, aby zmienić jej kolor tekstu na czerwono:

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

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

Spróbuj sam "

Przykład

Innym przykładem, w jaki sposób zmienić kolor na <p> elementu klikając na niego:

<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>

Spróbuj sam "

Przykład

Kliknij na przycisk, aby skopiować tekst z pola wejściowego do innego pola wejściowego:

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

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

Spróbuj sam "

Przykład

Przypisać "onclick" zdarzenie do obiektu window:

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";
}

Spróbuj sam "

Przykład

Korzystanie onclick utworzyć przycisk rozwijane:

// 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');
      }
    }
}
}

Spróbuj sam "