Merhaba arkadaşlar bu yazımda sizlere Javascript'te mouse olaylarından bahsedeceğim. Mouse olayları şu şekilde çalışır.
Mouse bir elementin üzerine geldiğinde, elementin üzerinden uzaklaştıktan sonra yapılmasını istediğimiz şeyler olusa mouse olaylarından neyi tetiklemek istiyorsak o eventi kullanırız.
onmouseover ve onmouseout Olayı
Fare bir elementin üzerine geldiğinde onmouseover o elementin üzerinden başka bir yere gittiğinde ise onmouseout olayı tetiklenir.
<!DOCTYPE html>
<html>
<body>
<p style="padding:20px" onmouseover="style.color='red'" onmouseout="style.color='yellow'">
Fareyi bnuraya sürükle
</p>
</body>
</html>
onmousedown ve onmouseup Olayı
Eğer bir elemente tıklarsanız onmousedown tıklamayı bıraktığınız anda ise onmouseup fonksiyonu tetiklenir.
<!DOCTYPE html>
<html>
<head>
<script>
function tetik(element, renk) {
element.style.color = renk;
}
</script>
</head>
<body>
<p onmousedown="tetik(this,'gray')" onmouseup="tetik(this,'green')">Üstüme Gel</p>
</body>
</html>
onmousemove Olayı
Bir elementin üzerine gelip fareyi hareket ettirdiğiniz zaman bu olay tetiklenir.
<!DOCTYPE html>
<html>
<head>
<script>
function kordinat_bul(e) {
x = e.clientX;
y = e.clientY;
kord = "Coordinates: (" + x + "," + y + ")";
document.getElementById("kordinat").innerHTML = kord;
}
function renk_sil() {
document.getElementById("kordinat").innerHTML = "";
}
</script>
</head>
<body>
<div id="coordiv" style="width:199px;height:99px;border:1px solid" onmousemove="kordinat_bul(event)" onmouseout="renk_sil()"></div>
<p>Fareyi yukardaki dikdörtgenin içinde gezdirin ve koordinatlarını alın.</p>
<p id="kordinat"></p>
</body>
</html>
