onDblClick Olayı (Event)

JavaScript onDblClick olayı (event), ilgili elemente fare ile çift tıklandığı zaman tetiklenir. HTML onDblClick özelliği element üzerinde dblclick olayı gerçekleştiği zaman çalıştırılacak fonksiyonun veya betiğin (script) belirtilmesini sağlar.

HTML dahilindeki sadece tek bir fonksiyon belirtilebilen bu tip olay yönetim fonksiyonlarına olay tutucu (event handler) ismi verilir. Fakat, HTML DOM'da birden fazla olay yönetim fonksiyonu belirtilebildiği için olay tutucusu isminden ziyade olay dinleyici (event listener) ismi kullanılmaktadır. DOM'da olay dinleyici fonksiyonlar attachEvent ve addEventListener fonksiyonları ile ilgili elemente eklenebilir/bağlanabilir.

HTML Sözdizimi

<element ondblclick="betik" > ... </element>

DOM Sözdizimi

element.ondblclick = fonkBetik;

betik = element.ondblclick

betik	ondblclick olayı tetiklendiğinde çalıştırılacak betik (script) kodlarını belirtir.
fonkBetik	ondblclick olayı tetiklendiğinde çalıştırılacak fonksiyon adını veya betik kodlarını belirtir.

Dönüş Değeri

betik

Fonksiyon belirtildiyse fonksiyon gövdesi veya betik kodları döner.

Örnek

Aşağıdaki örnek, JavaScript onDblClick olay tutucu kullanarak div elementi ile oluşturulan kutucuğun arkaplan renginin her çift tıklamada değişerek sırasıyla Kırmızı, Yeşil, Mavi ve Beyaz yapılmasını göstermektedir.

<html>
<head>
    <title>JavaScript onDblClick Olay tutucu örneği</title>
<script type="text/javascript">
var Degisken = 0;
function Renk()
{
    var KutuRengi = document.getElementById('Kutu');    
    switch(Degisken)
    {
        case 0: KutuRengi.style.backgroundColor = "#e04040"; // Kırmızı
                Degisken++;
                break;
				
        case 1: KutuRengi.style.backgroundColor = "#40d040"; // Yeşil
                Degisken++;
                break;
				
        case 2: KutuRengi.style.backgroundColor = "#4080f0"; // Mavi 
                Degisken++;
                break;
				
        default:KutuRengi.style.backgroundColor = "#ffffff"; // Beyaz
                Degisken = 0;
                break;
    }
}

</script>
</head>
<body>
Kutunun içinde çift tıklayınız.
<div style="width:100px;
            height:100px;
            border: solid 1px Black;
            text-align:center;
            background-color:#ffffff;" 
            onDblClick="Renk()"
            id="Kutu"></div>
</body>
</html>

Test Edin

Kutunun içinde çift tıklayınız.

Elementler

dblclick olayının gerçekleşebileceği/kontrol edilebileceği HTML etiketleri/elementleri

İlgili Başlıklar