JavaScript onMouseOut olayı (event), ilgili elementin sayfa üzerinde kapladığı alanın üzerinden fare işaretçisi (pointer) çıktığı zaman gerçekleşerek tetiklenir. HTML onMouseOut özelliği element üzerinde mouseout 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 onmouseout="betik" > ... </element>
DOM Sözdizimi
element.onmouseout = fonkBetik;
betik = element.onmouseout
| betik | onmouseout olayı tetiklendiğinde çalıştırılacak betik (script) kodlarını belirtir. |
| fonkBetik | onmouseout 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, 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ç
| Faaliyet | Olay | Test Alanı |
|---|
| onMouseMove |
|
| onMouseOver |
| onMouseOut |
| onMouseDown |
| onMouseUp |
Elementler
mouseout 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