jQuery Olay Yöntemleri

jQuery, bir HTML sayfasındaki olaylara yanıt vermek için özel olarak yapılmıştır.

Etkinlikler nedir?

Bir web sayfasının yanıt verebileceği tüm farklı ziyaretçilerin eylemlerine etkinlik denir.

Bir olay, bir şeyin gerçekleştiği kesin anı temsil eder.

Örnekler:

bir öğenin üzerinde fareyi hareket ettirmek
radyo düğmesi seçme
bir öğeye tıklamak

"Yangınlar/ateşler" terimi genellikle olaylarla birlikte kullanılır. Örnek: "Bir tuşa bastığınız anda tuşa basma olayı tetiklenir".

İşte bazı yaygın DOM olayları:

Mouse Events	Keyboard Events	Form Events	Document/Window Events
click	keypress	submit	load
dblclick	keydown	change	resize
mouseenter	keyup	focus	scroll
mouseleave		blur	unload

Olay Yöntemleri için jQuery Sözdizimi

jQuery'de çoğu DOM olayının eşdeğer bir jQuery yöntemi vardır.

Bir sayfadaki tüm paragraflara bir tıklama olayı atamak için şunu yapabilirsiniz:

$("p").click();

Bir sonraki adım, olay başladığında ne olacağını tanımlamaktır. Olaya bir işlev iletmelisiniz:

$("p").click(function(){
// action goes here!!
});

Yaygın Olarak Kullanılan jQuery Olay Yöntemleri

$(belge).hazır()

Yöntem $(document).ready(), belge tamamen yüklendiğinde bir işlevi yürütmemize izin verir. Bu olay, jQuery Sözdizimi bölümünde zaten açıklanmıştır .

Tıklayın()

Yöntem click(), bir HTML öğesine bir olay işleyici işlevi ekler.

İşlev, kullanıcı HTML öğesine tıkladığında yürütülür.

Aşağıdaki örnek şöyle diyor: Bir <p>öğede bir tıklama olayı tetiklendiğinde; geçerli <p>öğeyi gizle:

Örnek

$("p").click(function(){
$(this).hide();
});

dblclick()

Yöntem dblclick(), bir HTML öğesine bir olay işleyici işlevi ekler.

İşlev, kullanıcı HTML öğesine çift tıkladığında yürütülür:

Örnek

$("p").dblclick(function(){
$(this).hide();
});

fare enter()

Yöntem mouseenter(), bir HTML öğesine bir olay işleyici işlevi ekler.

İşlev, fare işaretçisi HTML öğesine girdiğinde yürütülür:

Örnek

$("#p1").mouseenter(function(){
alert("You entered p1!");
});

fare yaprağı()

Yöntem mouseleave(), bir HTML öğesine bir olay işleyici işlevi ekler.

İşlev, fare işaretçisi HTML öğesinden ayrıldığında yürütülür:

Örnek

$("#p1").mouseleave(function(){
alert("Bye! You now leave p1!");
});

fare aşağı()

Yöntem mousedown(), bir HTML öğesine bir olay işleyici işlevi ekler.

İşlev, fare HTML öğesinin üzerindeyken sol, orta veya sağ fare düğmesine basıldığında yürütülür:

Örnek

$("#p1").mousedown(function(){
alert("Mouse down over p1!");
});

fare yukarı()

Yöntem mouseup(), bir HTML öğesine bir olay işleyici işlevi ekler.

İşlev, fare HTML öğesinin üzerindeyken sol, orta veya sağ fare düğmesi bırakıldığında yürütülür:

Örnek

$("#p1").mouseup(function(){
alert("Mouse up over p1!");
});

üzerine gelin()

Yöntem iki işlev alır ve ve yöntemlerinin hover()bir birleşimidir .mouseenter()mouseleave()

İlk işlev, fare HTML öğesine girdiğinde yürütülür ve ikinci işlev, fare HTML öğesinden ayrıldığında yürütülür:

Örnek

$("#p1").hover(function(){
alert("You entered p1!");
},
function(){
alert("Bye! You now leave p1!");
});

odak()

Yöntem focus(), bir HTML form alanına bir olay işleyici işlevi ekler.

İşlev, form alanı odaklandığında yürütülür:

Örnek

$("input").focus(function(){
$(this).css("background-color", "#cccccc");
});

bulanıklık()

Yöntem blur(), bir HTML form alanına bir olay işleyici işlevi ekler.

İşlev, form alanı odağı kaybettiğinde yürütülür:

Örnek

$("input").blur(function(){
$(this).css("background-color", "#ffffff");
});

on() Yöntemi

Yöntem on(), seçilen öğeler için bir veya daha fazla olay işleyicisi ekler.

<p>Bir öğeye bir tıklama olayı ekleyin :

Örnek

$("p").on("click", function(){
$(this).hide();
});

<p>Bir öğeye birden çok olay işleyicisi ekleyin :

Örnek

$("p").on({
mouseenter: function(){
    $(this).css("background-color", "lightgray");
  },
mouseleave: function(){
    $(this).css("background-color", "lightblue");
  },
  click: function(){
    $(this).css("background-color", "yellow");
  }
});

jQuery Alıştırmaları