Javascript onmouseover ve onmouseout kullanımı ve basit bir örnek

JavaScript’te, “onmouseover” ve “onmouseout” olay dinleyicileri, bir HTML elementine fare imlecinin üzerine geldiği veya bu elementten çıktığı zaman tetiklenen olaylardır. Bu olay dinleyicileri, HTML elementlerine bir “event handler” olarak eklenebilir ve bu elementlerin bir davranışını tanımlayan JavaScript kodunu çalıştırır.

“onmouseover” olay dinleyicisi, fare imlecinin bir HTML elementinin üzerine geldiği zaman tetiklenir. Bu olay, genellikle bir elementin üzerine geldiğinde bir açıklama göstermek veya bir görsel değişiklik yapmak gibi amaçlarla kullanılır.

“onmouseout” olay dinleyicisi, fare imlecinin bir HTML elementinin dışına çıktığı zaman tetiklenir. Bu olay, genellikle bir elementin üzerinden çıktığında bir açıklama gizlemek veya bir görsel değişiklik geri almak gibi amaçlarla kullanılır.

Örnek olarak, aşağıdaki HTML kodu, bir div elementine “onmouseover” ve “onmouseout” olay dinleyicileri ekler ve bu olayları tetiklediğinde farklı bir arka plan rengi ayarlar:

<div onmouseover="this.style.backgroundColor = 'yellow'" onmouseout="this.style.backgroundColor = 'white'">
  Fare imleci bu div elementinin üzerine geldiğinde arka plan rengi değişecektir.
</div>

Bu kod, mouse imlecinin bu div elementinin üzerine geldiğinde arka plan rengini “yellow” yapar ve mouse imlecinin bu elementin dışına çıktığında arka plan rengini “white” olarak değiştirir.

Not: Günümüzde, “onmouseover” ve “onmouseout” olay dinleyicileri yerine, genellikle “addEventListener()” metodu kullanılır ve bu metodu kullanarak olay dinleyicileri dinamik olarak eklenir. Bu yöntem, “onmouseover” ve “onmouseout” olay dinleyicilerine göre daha esnek ve ölçeklenebilir olması nedeniyle tercih edilir.

Burada bahsettiğimiz addEventListener’ı ileride çok fazla kullanacağız bu yüzden bu makaleyi bölmeden biraz daha detaya girebiliriz.

“addEventListener()”, bir HTML elementine bir olay dinleyicisi eklemek için kullanılırız. Bu metod, bir olay tipini ve olayın tetiklendiğinde çalıştırılacak kodu belirtir. Böylece, bir elementin bir davranışını tanımlamak için olay dinleyicileri dinamik olarak eklenebilir ve bu elementlerin davranışı run-time (çalışma sırasında) değiştirilebilir.

“addEventListener()” metodunun kullanımı şöyledir:

element.addEventListener(eventType, functionToCall);

Bu metodda, “element” parametresi bir HTML elementi temsil eder ve “eventType” parametresi, eklenen olay dinleyicisinin hangi tipe ait olduğunu belirtir. Örneğin, “click”, “mouseover”, “keydown” gibi olay tipleri olabilir. “functionToCall” parametresi ise, olay dinleyicisinin tetiklendiğinde çalıştırılacak kodu temsil eder. Bu kod, bir function expression veya function declaration olabilir.

Örnek olarak, aşağıdaki kod, bir div elementine “mouseover” olayını dinleyen bir olay dinleyicisi ekler ve bu olay tetiklendiğinde arka plan rengini “yellow” yapar:

const divElement = document.querySelector('div');

divElement.addEventListener('mouseover', function() {
  this.style.backgroundColor = 'yellow';
});