Örnek
Bir düğme tıklandığında JavaScript yürütün:
<button onclick="myFunction()">Click me</button>
Kendin dene " Daha "Try it Yourself" Aşağıdaki örnekler.
Tanımı ve Kullanımı
Kullanıcı bir öğesini tıkladığında onclick olayı oluşur.
Tarayıcı Desteği
| Olay | |||||
|---|---|---|---|---|---|
| onclick | Evet | Evet | Evet | Evet | Evet |
Sözdizimi
HTML'de:
JavaScript:
object .onclick=function(){ Kendin dene " JavaScript olarak, kullanılarak addEventListener() metodu:
object .addEventListener("click", myScript );
Kendin dene " Not: addEventListener() metodu Internet Explorer 8 ve önceki sürümlerinde desteklenmez.
Teknik detaylar
| Kabarcıklar: | Evet |
|---|---|
| iptal Edilebilir: | Evet |
| Etkinlik tipi: | MouseEvent |
| Desteklenen HTML etiketleri: | <Baz>, <BDO>, <br>, <head>, <html>, <iframe>, <meta>, <param> <script> <style> ve: DIŞINDA Tüm HTML öğeleri, <title> |
| DOM Versiyon: | Seviye 2 Olaylar |
Diğer Örnekler
Örnek
Bir tıklayın <button> Geçerli gün, tarih ve saati görüntülemek için eleman:
<button onclick="getElementById('demo').innerHTML=Date()">What
is the time?</button>
Kendin dene " Örnek
Bir tıklayın <p> kırmızıya Metin rengini değiştirmek için eleman:
<p id="demo" onclick="myFunction()">Click me to change my text color.</p>
<script>
function myFunction() {
document.getElementById("demo").style.color = "red";
}
</script>
Kendin dene " Örnek
Bir rengini değiştirmek için nasıl başka örnek <p> üzerine tıklayarak elemanı:
<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>
Kendin dene " Örnek
Başka bir giriş alanına bir giriş alanından bazı metin kopyalamak için bir düğmeye tıklayın:
<button onclick="myFunction()">Copy Text</button>
<script>
function myFunction() {
document.getElementById("field2").value =
document.getElementById("field1").value;
}
</script>
Kendin dene " Örnek
Ata "onclick" pencere nesnesine olay:
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";
}
Kendin dene " Örnek
bir açılan düğmesi oluşturmak için onclick kullanarak:
// 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');
}
}
}
}
Kendin dene " İlgili Sayfalar
HTML DOM referansı: OnDblClick olay
HTML DOM referansı: onmousedown olay
HTML DOM referansı: onmouseup olay
<Olay Nesne