jQuery'de Evrensel on Metodu
Olayları bağlamak için ayrıca evrensel
on
metodu kullanılabilir.
İlk parametresi olayın adını (örneğin, 'click'), ikincisi ise
bağlanacak fonksiyonu alır.
Aşağıdaki HTML kodu üzerinde bir örnek inceleyelim:
<ul>
<li>text</li>
<li>text</li>
<li>text</li>
</ul>
CSS şu şekilde görünüyor:
li {
width: 100px;
cursor: pointer;
}
Şimdi, daha önce on metodu ile yazdığımız
li kodunu tekrar yazalım. Çalışmasını test etmek için
liste öğelerine tıklayın:
$('li').on('click', function() {
$(this).append('!');
});
Aynı fonksiyonu aynı anda birden fazla olay türüne
bağlamak mümkündür - bunun için olaylar
boşlukla ayrılarak listelenmelidir: 'click
mousemove vb.'. Örneğin, şu şekilde:
$('li').on('click mousemove', function func() {
$(this).append('!');
});
Tüm bağlantılara bir olay bağlayın -
bağlantının üzerine gelindiğinde, metninin sonuna
href değeri yuvarlak parantez içinde eklenir.
Tüm giriş alanlarına bir olay bağlayın -
odak kaybedildiğinde, her giriş alanı kendi value
değerini, id'si #test olan paragrafa yazdırır.