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
A (Anchor) | ABBR | ACRONYM | ADDRESS | AREA | B (Bold) | BIG | BLOCKQUOTE | BODY | BUTTON | CANVAS | CAPTION | CITE | CODE | COL | COLGROUP | DD | DEL | DFN | DIV | DL | DT | EM | FIELDSET | FORM | H1,H2,H3,H4,H5,H6 | HR | I (Italic) | IMG | INPUT | INPUT-hidden | INPUT-text | INPUT-password | INPUT-checkbox | INPUT-radio | INPUT-submit | INPUT-reset | INPUT-file | INPUT-image | INPUT-button | INS | KBD | LABEL | LEGEND | LI | LINK | MAP | MARQUEE | NOFRAMES | NOSCRIPT | OBJECT | OL | OPTGROUP | OPTION | P (Paragraph) | PRE | Q (Quote) | SAMP | SELECT | SMALL | SPAN | STRONG | SUB | SUP | TABLE | TBODY | TD | TEXTAREA | TFOOT | TH | THEAD | TR | TT | U (Underline) | UL | VAR