myNotlar Logo

onMouseDown Olayı (Event)


JavaScript onMouseDown olayı (event), ilgili element üzerinde farenin herhangi bir tuşuna basıldığı zaman gerçekleşerek tetiklenir. HTML onMouseDown özelliği element üzerinde mousedown 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 onmousedown="betik" > ... </element>

DOM Sözdizimi

element.onmousedown = fonkBetik;

betik = element.onmousedown
betikonmousedown olayı tetiklendiğinde çalıştırılacak betik (script) kodlarını belirtir.
fonkBetikonmousedown olayı tetiklendiğinde çalıştırılacak fonksiyon adını veya betik kodlarını belirtir.

Dönüş Değeri

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

Örnek

Aşağıdaki örnek, bir DIV elementi üzerinde onMouseDown, onMouseMove, onMouseOut, onMouseOver ve onMouseUp olaylarının kontrolünü ve gerçekleşme durumlarını göstermektedir.

<html>
<head>
    <title>JavaScript onMouseDown, onMouseMove, onMouseOut, onMouseOver ve 
onMouseUp Olay tutucuları örneği</title>
<style type="text/css">
table.ornek {    
    width: 300px;
    border: solid 1px Black; }
td.ornek {
    font-weight:bold;
    text-align:center; }
</style>
<script type="text/javascript" language="javascript1.2">
var kareler = new Array("|", "/", "-", "\\");
var MouseDownSira = 0;
var MouseMoveSira = 0;
var MouseOutSira = 0;
var MouseOverSira = 0;
var MouseUpSira = 0;
function On_MouseDown() {
    document.getElementById('On_MouseDown').innerHTML = kareler[MouseDownSira].toString();
    MouseDownSira++;
    if(MouseDownSira == 4) MouseDownSira = 0; }
    
function On_MouseMove() {
    document.getElementById('On_MouseMove').innerHTML = kareler[MouseMoveSira].toString();
    MouseMoveSira++;
    if(MouseMoveSira == 4) MouseMoveSira = 0; }
    
function On_MouseOut() {
    document.getElementById('On_MouseOut').innerHTML = kareler[MouseOutSira].toString();
    MouseOutSira++;
    if(MouseOutSira == 4) MouseOutSira = 0; }
    
function On_MouseOver() {
    document.getElementById('On_MouseOver').innerHTML = kareler[MouseOverSira].toString();
    MouseOverSira++;
    if(MouseOverSira == 4) MouseOverSira = 0; }
    
function On_MouseUp() {
    document.getElementById('On_MouseUp').innerHTML = kareler[MouseUpSira].toString();
    MouseUpSira++;
    if(MouseUpSira == 4) MouseUpSira = 0; }
</script>
</head>
<body>
<table class="ornek" rules="all" cellpadding="0" cellspacing="0">
    <thead><tr><th>Faaliyet</th><th>Olay</th><th>Test Alanı</th></tr></thead>
    <tbody>
    <tr>
        <td class="ornek"><div id="On_MouseMove"> </div></td><td>onMouseMove</td><td rowspan="5">
        <div style="width:130px; height:120px; background-color: #6af;" 
        onMouseMove="On_MouseMove()"
        onMouseDown="On_MouseDown()"
        onMouseOut="On_MouseOut()"
        onMouseOver="On_MouseOver()"
        onMouseUp="On_MouseUp()">
        </div></td>
    </tr>
    <tr><td class="ornek"><div id="On_MouseOver"> </div></td><td>onMouseOver</td></tr>
    <tr><td class="ornek"><div id="On_MouseOut"> </div></td><td>onMouseOut</td></tr>
    <tr><td class="ornek"><div id="On_MouseDown"> </div></td><td>onMouseDown</td></tr>
    <tr><td class="ornek"><div id="On_MouseUp"> </div></td><td>onMouseUp</td></tr>
    </tbody>
</table>
</body>
</html>
Canlı Sonuç
FaaliyetOlayTest Alanı
 
onMouseMove
 
onMouseOver
 
onMouseOut
 
onMouseDown
 
onMouseUp

Elementler

mousedown 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

 
myNotlar Hakkında
Telif Hakkı © 2007-2009 mynotlar.com Tüm Hakları Saklıdır. Kopyalanamaz. Yayınlanamaz.
E-Posta : support@myNotlar.com

| Tek Kişilik Oyunlar | Sudoku | YasinKa |