jQuery Olay Yöntemleri

❮ Önceki Sonraki Bölüm ❯

jQuery kişiye özel bir HTML sayfası olaylara yanıt etmektir.

Etkinlikler nelerdir?

Bir web sayfası cevap verebilir tüm farklı ziyaretçinin eylemler olaylar denir etmek.

bir şey olduğunda bir olay kesin anını temsil ediyor.

Örnekler:

bir eleman üzerine fareyi hareket
Bir radyo düğmesini seçerek
Bir elemanın tıklayarak

Terimi "fires/fired" sık olaylarla kullanılır. Örnek: " keypress olayı, anı Bir tuşa basın ateşlenir".

Burada bazı genel DOM olaylar şunlardır:

Fare Olaylar	Klavye Olaylar	Form Olayları	Belge / Pencere Olaylar
click	keypress	submit	load
dblclick	keydown	change	resize
mouseenter	keyup	focus	scroll
mouseleave		blur	unload

Olay Yöntemleri için jQuery sözdizimi

jQuery, çoğu DOM olayları eşdeğer jQuery yöntemi var.

Bir sayfadaki tüm paragraflara Bir tıklama olayı atamak için, bunu yapabilirsiniz:

$("p") . click() ;

Bir sonraki adım ne zaman olay yangınlar ne olacağına tanımlamaktır. Sen olaya bir işlev geçmelidir:

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

Yaygın jQuery Olay Yöntemleri Kullanılan

$(document). ready()

$(document). ready() $(document). ready() belge tam dolu olduğunda yöntem bir işlevi yürütmek için bize izin verir. Bu olay zaten açıklanmıştır jQuery sözdizimi bölüm.

click()

click() yöntemi bir HTML öğesine bir olay işleyici işlevi ekler.

kullanıcı HTML öğesine tıkladığında işlem gerçekleşir.

Aşağıdaki örnek diyor ki: Ne zaman bir yapılan bir tıklama olayı harekete <p> elemanı; mevcut gizlemek <p> elemanı;

Örnek

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

Kendin dene "

dblclick()

dblclick() metodu bir HTML elemanına bir olay giderici fonksiyonu vermektedir.

Fonksiyon çalıştırıldığında HTML öğesi üzerinde kullanıcı çift tıklama:

Örnek

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

Kendin dene "

mouseenter()

mouseenter() metodu bir HTML elemanına bir olay giderici fonksiyonu vermektedir.

fare işaretçisi HTML öğesini girdiğinde fonksiyon yürütülür:

Örnek

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

Kendin dene "

mouseleave()

mouseleave() metodu bir HTML elemanına bir olay giderici fonksiyonu vermektedir.

Fare işaretçisi HTML öğesini ayrıldığında fonksiyon çalıştırılır:

Örnek

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

Kendin dene "

mousedown()

mousedown() metodu 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:

Örnek

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

Kendin dene "

mouseup()

mouseup() metodu bir HTML elemanına bir olay giderici fonksiyonu vermektedir.

orta veya sağ fare düğmesi serbest bırakıldığında, sol fare HTML öğesi üzerindeyken fonksiyonu, yürütülür:

Örnek

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

Kendin dene "

hover()

hover() metodu iki işlev alır ve bir kombinasyonudur mouseenter() ve mouseleave() yöntemleri.

Fare HTML öğesini ayrıldığında fare HTML öğesini girdiğinde ilk fonksiyon yürütülür ve ikinci fonksiyon yürütülür:

Örnek

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

Kendin dene "

focus()

focus() metodu bir HTML form alanına bir olay işleyici işlevi ekler.

form alanı odak aldığında fonksiyon çalıştırılır:

Örnek

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

Kendin dene "

blur()

blur() metodu bir HTML form alanına bir olay giderici fonksiyonu vermektedir.

form alanı odağı kaybettiğinde fonksiyon çalıştırılır:

Örnek

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

Kendin dene "

on() Yöntem

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

Bir Bir tıklama etkinliği ekleyin <p> elemanı:

Örnek

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

Kendin dene "

Bir çoklu olay işleyicileri takın <p> elemanı:

Örnek

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

Kendin dene "

Egzersizleri ile Yourself test edin!

Egzersiz 1 » Alıştırma 2» Egzersiz 3 » Egzersiz 4» Egzersiz 5 »