onclick Wydarzenie
Przykład
Wykonaj JavaScript po kliknięciu przycisku:
<button onclick="myFunction()">Click me</button>
Definicja i użycie
Zdarzenie onclick
ma miejsce, gdy użytkownik kliknie element.
W HTML:
<element onclick="myScript">
W JavaScript:
object.onclick = function(){myScript};
W JavaScript za pomocą metody addEventListener():
object.addEventListener("click", myScript);
Szczegóły techniczne
Bąbelki: | tak |
---|---|
Możliwość anulowania: | tak |
Typ wydarzenia: | MyszZdarzenie |
Obsługiwane tagi HTML: |
Wszystkie z wyjątkiem: <base>, <bdo>, <br>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style> i <title> |
Więcej przykładów
Kliknij <przycisk>, aby wyświetlić datę:
<button onclick="getElementById('demo').innerHTML = Date()">What is the time?</button>
Kliknij element <h3>, aby zmienić kolor tekstu:
<h3 id="demo" onclick="myFunction()">Click me to change my color.</h3>
<script>
function myFunction() {
document.getElementById("demo").style.color = "red";
}
</script>
Kolejny przykład, jak zmienić kolor elementu:
<h3 onclick="myFunction(this, 'red')">Click me to change my color.</h3>
<script>
function myFunction(element, color) {
element.style.color = color;
}
</script>
Kliknij, aby skopiować tekst z jednego pola wejściowego do drugiego:
<button onclick="myFunction()">Copy Text</button>
<script>
function myFunction() {
document.getElementById("field2").value =
document.getElementById("field1").value;
}
</script>
Jak przypisać zdarzenie „onclick” do obiektu okna:
window.onclick = myFunction;
function myFunction() {
document.getElementsByTagName("BODY")[0].style.backgroundColor = "yellow";
}
Użyj onclick, aby utworzyć listę rozwijaną:
document.getElementById("myBtn").onclick = function() {myFunction()};
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}
Powiązane strony
Samouczek JavaScript: zdarzenia JavaScript
Odniesienie HTML DOM: zdarzenie ondblclick
Odniesienie HTML DOM: zdarzenie onmousedown
Odniesienie HTML DOM: zdarzenie onmouseup
Obsługa przeglądarki
onclick
to funkcja DOM Level 2 (2001).
Jest w pełni obsługiwany we wszystkich przeglądarkach:
Chrome | IE | Edge | Firefox | Safari | Opera |
Yes | 9-11 | Yes | Yes | Yes | Yes |