jQuery'de Fare Olayları veya ingilizcede Mouse Events olarak kullanılan metodlar oldukça kullanışlıdır. Aşağıda açıklamalar, sözdizimleri ve örnekler bulunmaktadır.
-
.click(): Seçili nesne tıklandığı zaman çalışır.
-
.dblclick() : Seçili nesne çift tıklandığı zaman çalışır.
-
.hover(): Seçili nesnenin üzerine mouse ile gelindiğinde ve mouse üzerinden gittiğinde çalışacak fonksiyonları çalıştırmaya yarar. Aşağıda anlatacağım .mouseenter() ve .mouseleave() metodlarının birleşimidir. Parametre olarak tek fonksiyon yazılırsa .mouseenter() ve .mouseleave() aynı işlemi yapar.
-
.mousedown() : Fareye seçili nesne üzerinde basıldığı zaman çalışır.
-
.mouseup() : Farenin basılma tuşu seçili nesne üzerinde bırakıldığı zaman çalışır.
-
.mouseleave() : Olay, fare sadece seçili nesne üzerinden ayrıldığı zaman tetiklenir.
-
.mouseout() : Olay, fare hem seçili nesne hem de o nesnenin child(çocuk) elemanları üzerinden ayrıldığı zaman tetiklenir.
-
.mouseenter() : Olay, fare sadece seçili nesne üzerine geldiği zaman tetiklenir. Genellikle .mouseleave() metoduyla birlikte kullanılır.
-
.mouseover() : Olay, fare hem seçili nesne hem de o nesnenin child(çocuk) elemanları üzerine geldiği zaman tetiklenir. Genellikle .mouseout() metoduyla birlikte kullanılır.
-
.mousemove(): Fare seçili nesne ve o nesnenin child(çocuk) elemanları üzerinde gezindikçe çalışır.
Syntax
$('seçici').click(function);
$('seçici').dblclick(function);
$('seçici').hover(inFunction,outFunction);
$('seçici').mousedown(function);
$('seçici').mouseup(function);
$('seçici').mouseleave(function);
$('seçici').mouseout(function);
$('seçici').mouseenter(function);
$('seçici').mouseover(function);
$('seçici').mousemove(function);
Parametreler
-
function : Opsiyonel bir parametredir. Olay tetiklendiği zaman çalışacak fonksiyon yazılır.
Alabileceği değerler : milisaniye, "fast", "slow"
-
inFunction : Gerekli bir parametredir. .hover() metodunda kullanılır. mouseenter olayı oluştuğu yani fare ile nesne üzerine gelindiği zaman çalışacak fonksiyonu yazarız.
-
outFunction : Opsiyonel bir parametredir. .hover() metodunda kullanılır. mouseleave olayı oluştuğu yani fare nesne üzerinden ayrıldığı zaman çalışacak fonksiyonu yazarız.
Demo
.click() dblclick() .hover() .mouseup() .mousedown() metodlarının örnekleri:
Demo
.mouseout() mouseleave() .mouseover() .mouseenter() .mousemove() metodlarının örnekleri:
