myNotlar Logo

Fare Olay tutucuları (Mouse Event Handlers)


(onMouseDown, onMouseMove, onMouseOut, onMouseOver ve onMouseUp)

JavaScript Fare (Mouse) olay tutucuları birçok sayfa elementinde aşağıda tanımlanan olaylar tetiklendiği zaman gerçekleşir.

  • onMouseMove : Fare işaretçisi hareket ettirildiği zaman gerçekleşir.
  • onMouseOut : Fare işaretçisi sayfa üzerindeki bir alandan veya bir linkten çıktığı zaman gerçekleşir.
  • onMouseOver : Fare işaretçisi sayfa üzerindeki bir nesnenin veya alanın kapsadığı alana girdiği zaman gerçekleşir.
  • onMouseDown : Farenin bir tuşuna basıldığı zaman gerçekleşir.
  • onMouseUp : Farenin basılı tuşu bırakıldığı zaman gerçekleşir.

Aşağıdaki örnek JavaScript onMouseDown, onMouseMove, onMouseOut, onMouseOver ve onMouseUp olay tutucularının çalışma anındaki etkilerini gösterir.

FaaliyetOlayTest Alanı
 
onMouseMove
 
onMouseOver
 
onMouseOut
 
onMouseDown
 
onMouseUp

<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>

Örnekte test alanı olarak bir div ve onMouseDown, onMouseMove, onMouseOut, onMouseOver ve onMouseUp olay tutucuları için ayrı ayrı kontrol fonksiyonları tanımlanmıştır. Fonksiyonlar div içinde fare ile ilgili olaylar gerçekleştiği zaman basit bir animasyon tekniği ile gösterilirler.

Animasyon için |, /, - ve \ karakterlerinden oluşan kareler isminde bir dizi ve her olay için ayrı ayrı, gösterilecek karakterin sırasını tutan beş değişken tanımlanmıştır. Her olay gerçekleştiğinde dizideki bir karakter gösterilir ve kendi sıra değişkeni 1 arttırılarak sonraki karaktere geçilir. Sıra toplam karakter sayısı olan 4'e eşit olduğu zaman sıfırlanır.

Not : onMouseDown, fare tuşuna basıldığı zaman gerçekleşen bir olaydır. onMouseUp, basılı olan tuş bırakıldığı zaman gerçekleşen bir olaydır. Fakat, bu iki olayın çift tıklamaya vereceği tepki hakkında kesin bir tanım yoktur! Bu yüzden tarayıcılar bu iki olay için çift tıklamaya 1 basma/2 bırakma veya 2 basma/2 bırakma gibi farklı farklı tepki verirler.

İlgili Başlıklar
 
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 | Oyunlar |