JQUERY EVENT FONKSİYONLARI

Tarhi : 23-02-2020 12:41:35 | Yazar : ÇAĞLAR BOSTANCI

Merhaba bu yazıda Jquery’le event fonksiyonlarının kullanımlarına bakacağız. Sizlerinde bildiği gibi mouse’un ve klavyenin sayfa ile etkileşimlerini yakalayarak ilgili fonksiyonları çalıştırmamızı sağlamaktadır bu fonksiyonları. Bunları Javascript’de kullanmıştık. Jquery de ise bunlar biraz daha baside indirgenmiş ve daha etkin bir şekilde kullanmamızı sağlamaktadır. Öncelikle https://jquery.com/download/ adresinden jquery’nin son versiyonunu indirerek sayfamıza dahil edelim. Sayfaya eklerken bizler genel olarak body tagleri kapanmadan önce dahil etmekteyiz. İsterseniz sayfanın <head> tagleri </head> arasında ekleye bilirsiniz. Önemli olan sizin yazmış olduğunuz jquery kodlarının, Jquery kütüphanesi eklendikten sonra geliyor olmasıdır. Aksi takdirde hata alırsınız.

Önemli konulardan bir diğeri ise yazmış olduğunuz event’lerin

$(document).ready(function() {
  //sayfa okunduktan sonra kodların çalıştırılması
});

$(document).ready(function() {

//sayfa okunduktan sonra kodların çalıştırılması

});

fonksiyonu arsında yer almasına özen göstermemizdir. Bunun nedeni ise yakalamak istediğiniz bir nesnenin eventi o nesne oluşmadan hataya düşmesini engellemektir. Sayfa okunduktan sonra event’in oluşturulması gerekmektedir. Bazende yazmış olduğunuz bir event’in nesneden önce gelmesi durumunda o nesneyi bulamayıp hataya düşecektir. Biz işimizi sağlama almak için yukarıda belirtmiş olduğumuz fonksiyonun içerisinde kodlarımızı yazacağız.

.click() Kullanımı

En çok kullanılan event’lerden biridir. Nesneye tıklanıldığında yapılması gereken fonksiyonu tanımlamanızı sağlar.

$("p").click(function(){
    $(this).hide();//P elementine tıklandığında gizlenecek
});

$("p").click(function(){

$(this).hide();//P elementine tıklandığında gizlenecek

});

dblClick() Kullanımı

Seçilen elemente çift tıklanıldığında çalışmasını istediğiniz fonksiyonu tanımlamanızı sağlar.

$("p").dblclick(function(){
    $(this).hide();//p elementine çift tıkladığında çalışacak (tıklanılan elementi gizleyecek)
});

$("p").dblclick(function(){

$(this).hide();//p elementine çift tıkladığında çalışacak (tıklanılan elementi gizleyecek)

});

mouseEnter()

Seçmiş olduğunuz elementin üzerine gelindiğinde çalışmasını istediğiniz fonksiyonu tanımlamanıza yarar.

$("#p1").mouseenter(function(){
    alert("Üzerinde!"); //Mouse üzerine geldiğinde alert verecek.
});

$("#p1").mouseenter(function(){

alert("Üzerinde!"); //Mouse üzerine geldiğinde alert verecek.

});

mouseLeave () Kullanımı

mouseLeave () yöntemi, bir HTML elemanına bir olay giderici fonksiyonu vermektedir. Fare işaretçisi HTML öğesini ayrıldığında fonksiyon çalıştırılır:

mousedown() Kullanımı

mousedown () yöntemi, bir HTML elemanına bir olay giderici fonksiyonu vermektedir. fonksiyon fare HTML öğesi üzerindeyken sol, orta veya sağ fare düğmesi aşağı basıldığında, yürütülür:

$("#p1").mousedown(function(){
    alert("parağrafa tıklayınca alert çalışır.");
});

$("#p1").mousedown(function(){

alert("parağrafa tıklayınca alert çalışır.");

});

mouseup() Kullanımı

İlgili elemente mouse ile tıklanıldığında mosue kaldırılırken çalışan fonskiyondur.

$("#p1").hover(
	function(){alert("Mouse üzerine geldiğinde");},
	function(){alert("mouser üzerinden ayrıldığında");
});

$("#p1").hover(

function(){alert("Mouse üzerine geldiğinde");},

function(){alert("mouser üzerinden ayrıldığında");

});

focus() Kullanımı

focus() yöntemi bir HTML form alanına bir olay işleyici işlevi ekler. form alanı odak aldığında fonksiyon çalıştırılır:

$("input").focus(function(){
    $(this).css("background-color", "#cccccc");// input elementine odaklanıldığında arkaplan rengi değişecek.
});

$("input").focus(function(){

$(this).css("background-color", "#cccccc");// input elementine odaklanıldığında arkaplan rengi değişecek.

});

blur() Kullanımı

blur() yöntemi bir HTML form alanına bir olay giderici fonksiyonu vermektedir. form alanı odağı kaybettiğinde fonksiyon çalıştırılır:

$("input").blur(function(){
    $(this).css("background-color", "#CCC");//fare odaklanıp ayrıldıktansonra elementin arkaplan rengi değişeck.
});

$("input").blur(function(){

$(this).css("background-color", "#CCC");//fare odaklanıp ayrıldıktansonra elementin arkaplan rengi değişeck.

});

on() Kullanımı

on() yöntemi, seçilen öğeler için bir veya daha fazla olay işleyicileri vermektedir. Bir

öğesi için bir tıklama etkinliği ekleyin:

$("p").on("click", function(){
    $(this).hide();//Bütün p elementlerini kapsaycak şekilde üzerine tıklandığında kaybolcak.
});

$("p").on("click", function(){

$(this).hide();//Bütün p elementlerini kapsaycak şekilde üzerine tıklandığında kaybolcak.

});

Bir

elementine birden fazla event tanımlayalım:

$("p").on({
    mouseenter: function(){
        $(this).css("background-color", "lightgray");//fare odaklanınca
    }, 
    mouseleave: function(){
        $(this).css("background-color", "lightblue");//üzerinden ayrılınca
    }, 
    click: function(){
        $(this).css("background-color", "yellow");//tıklanınca 
    } 
});

$("p").on({

mouseenter: function(){

$(this).css("background-color", "lightgray");//fare odaklanınca

mouseleave: function(){

$(this).css("background-color", "lightblue");//üzerinden ayrılınca

click: function(){

$(this).css("background-color", "yellow");//tıklanınca

}

});

keypress() Kullanımı

Klavyede herhangi bir tuşa basıldığında çalışmasını istediğini fonksiyonu tetikler

$('input[type="text"]').keypress(function(c){
		alert(c.keyCode);//KLAVYEYE BASILDIĞINDA TUŞUN KODUNU VERECEK
		});   

});

$('input[type="text"]').keypress(function(c){

alert(c.keyCode);//KLAVYEYE BASILDIĞINDA TUŞUN KODUNU VERECEK

});

İlgili

JQUERY

JQUERY EVENT FONKSİYONLARI

Hemen Başla

Konu ile ilgili olarak mail gönderebilirsiniz.

Çağlar Bostancı

JQUERY EVENT FONKSİYONLARI