onclick Olayı
Örnek
Bir düğme tıklandığında bir JavaScript yürütün:
<button onclick="myFunction()">Click me</button>
Tanım ve Kullanım
Olay onclick, kullanıcı bir öğeye tıkladığında gerçekleşir.
HTML'de:
<element onclick="myScript">
JavaScript'te:
object.onclick = function(){myScript};
JavaScript'te, addEventListener() yöntemini kullanarak:
object.addEventListener("click", myScript);
Teknik detaylar
| kabarcıklar: | Evet |
|---|---|
| İptal edilebilir: | Evet |
| Etkinlik tipi: | FareEtkinliği |
| Desteklenen HTML etiketleri: |
Tüm hariç: <base>, <bdo>, <br>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style> ve <title> |
Daha fazla örnek
Tarihi görüntülemek için bir <düğmeye> tıklayın:
<button onclick="getElementById('demo').innerHTML = Date()">What is the time?</button>
Metin rengini değiştirmek için bir <h3> öğesine tıklayın:
<h3 id="demo" onclick="myFunction()">Click me to change my color.</h3>
<script>
function myFunction() {
document.getElementById("demo").style.color = "red";
}
</script>
Bir öğenin renginin nasıl değiştirileceğine dair başka bir örnek:
<h3 onclick="myFunction(this, 'red')">Click me to change my color.</h3>
<script>
function myFunction(element, color) {
element.style.color = color;
}
</script>
Metni bir giriş alanından diğerine kopyalamak için tıklayın:
<button onclick="myFunction()">Copy Text</button>
<script>
function myFunction() {
document.getElementById("field2").value =
document.getElementById("field1").value;
}
</script>
Pencere nesnesine bir "onclick" olayı nasıl atanır:
window.onclick = myFunction;
function myFunction() {
document.getElementsByTagName("BODY")[0].style.backgroundColor = "yellow";
}
Bir açılır menü oluşturmak için onclick'i kullanın:
document.getElementById("myBtn").onclick = function() {myFunction()};
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}
İlgili Sayfalar
JavaScript Eğitimi: JavaScript Etkinlikleri
HTML DOM referansı: ondblclick olayı
HTML DOM referansı: onmousedown olayı
HTML DOM referansı: onmouseup olayı
Tarayıcı Desteği
onclick bir DOM Düzey 2 (2001) özelliğidir.
Tüm tarayıcılarda tam olarak desteklenir:
| Chrome | IE | Edge | Firefox | Safari | Opera |
| Yes | 9-11 | Yes | Yes | Yes | Yes |