Javascript onmouseover ve onmouseout kullanımı

Sezai AlkanFrontend Developer

JavaScript #javascript #js #onmouseover #onmouseout

Javascript onmouseover ve onmouseout kullanımı, mouse ile bir nesnenin veya html elemanın üzerine gelme veya gitme olayını dinlemektedir. Bu özellikler ile bir nesnenin üzerine gelince veya gidince bir javascript kodu veya fonksiyonu çalıştırabilmekteyiz.

Kullanımı : onmouseover="" ve onmouseout=""

onmouseover özelliği nesnenin üzerine gelme onmouseout özelliği ise nesnenin üzerinden gitme durumunu dinlemektedir.

<p onmouseover="alert('üzerinde gelindi')">Üzerine gel</p>

<p onmouseout="alert('üzerinden gidildi')">Üzerine gel ve sonra git</p>

Yukarıda iki ayrı html elemanı üzerinde mouse ile üzerinde gelme ve gitme olayını gözlemledik bu özelleri istersek tek bir html elemanı üzerinde de kullanabilmekteyiz.

<p onmouseover="console.log('Üzerinde gelindi')" onmouseout="console.log('Üzerinde gidildi')">Bu bir Paragraftır</p>

Yukarıdaki kullanımda ise html elemanının üzerinde her gelindiğinde veya gidildiğince console çıktı verecektir.