onclick olayı
Tanım ve Kullanım
onclick olayı kullanıcı bir elemente tıkladığında gerçekleşir.
实例
Düğme tıklandığında JavaScript çalıştırılır:
<button onclick="myFunction()">Bana Tıkla</button>
Sayfa altında daha fazla TIY örneği bulunmaktadır.
Sözdizimi
HTML'de:
<element onclick="myScript">
JavaScript'te:
nesne.onclick = function(){myScript};
JavaScript'te addEventListener() yöntemini kullanarak:
nesne.addEventListener("click", myScript);
Yorum:Internet Explorer 8 veya daha eski sürümler desteklememektedir addEventListener() yöntemi.
Teknik ayrıntılar
Balonlama: | Desteklenen |
---|---|
İptal edilebilir: | Desteklenen |
Olay türleri: | MouseEvent |
Desteklenen HTML etiketleri: | Tüm HTML elemanları, aşağıdaki dışında: <base>, <bdo>, <br>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style> ve <title> |
DOM sürümü: | 2. Seviye Olaylar |
Tarayıcı desteği
Olay | Chrome | IE | Firefox | Safari | Opera |
---|---|---|---|---|---|
onclick | Desteklenen | Desteklenen | Desteklenen | Desteklenen | Desteklenen |
Daha fazla örnek
实例
Bir <button> elementine tıklayarak mevcut tarih ve zamanı görüntüleyin:
<button onclick="getElementById('demo').innerHTML = Date()">Ne zaman?</button>
实例
单击 <p> 元素将其文本颜色更改为红色:
<p id="demo" onclick="myFunction()">Click me to change my text color.</p> <script> function myFunction() { document.getElementById("demo").style.color = "red"; } </script>
实例
关于如何通过单击来更改 <p> 元素颜色的另一个例子:
<p onclick="myFunction(this, 'red')">Click me to change my text color.</p> <script> function myFunction(elmnt,clr) { elmnt.style.color = clr; } </script>
实例
单击按钮将一些文本从输入字段复制到另一个输入字段:
<button onclick="myFunction()">Copy Text</button> <script> function myFunction() { document.getElementById("field2").value = document.getElementById("field1").value; } </script>
实例
把 "onclick" 事件分配给 window 对象:window.onclick = myFunction; // 如果用户在窗口中单击,则将 <body> 的背景颜色设置为黄色 function myFunction() { document.getElementsByTagName("BODY")[0].style.backgroundColor = "yellow"; }
实例
使用 onclick 创建下拉按钮:
// 获取按钮,当用户点击时,执行 myFunction document.getElementById("myBtn").onclick = function() {myFunction()}; /* myFunction 在添加和删除 show 类之间切换,用于隐藏和显示下拉内容 */ function myFunction() { document.getElementById("myDropdown").classList.toggle("show"); }
İlgili sayfalar
JavaScript dersleri:JavaScript olayları
HTML DOM referans kılavuzu:ondblclick olayı
HTML DOM referans kılavuzu:onmousedown olayı
HTML DOM referans kılavuzu:onmouseup olayı