Metod on

on metodu, bir elemana olay işleyici eklemeyi sağlar. İşleyiciyi kaldırmak için off metodunu kullanabilirsiniz. Olayın yalnızca bir kez tetiklenip ardından işleyicinin kendini kaldırması için one metodunu kullanın. İşleyici bağladığımız elemanlar, on çağrıldığı anda mevcut olmalıdır.

Sözdizimi

Bir elemana olay işleyici eklemek için ilk parametre olarak boşlukla ayrılmış bir veya daha fazla olayı string olarak iletiyoruz, ikinci parametre olarak eleman içindeki alt öğeleri filtreleyen ek bir seçici iletiyoruz, üçüncü parametre olarak ise olay tetiklendiğinde işleyiciye event.data özelliğinde iletilen ek verileri iletiyoruz. İkinci ve üçüncü parametreler isteğe bağlıdır. Dördüncü parametre olarak, olay nesnesi ve isteğe bağlı ek parametrelerin iletildiği bir işleyici fonksiyon iletiyoruz. Eğer işleyici fonksiyon yerine false iletirsek, fonksiyon sadece false döndürür:

$(seçici).on(olaylar, [seçici], [veri], işleyici-fonksiyon(olay nesnesi, [ek parametreler]));

on metodunu farklı şekilde de kullanabiliriz, bu durumda ilk parametre olarak, anahtarların olay türü, değerlerin ise olaylar için çağrılan işleyici fonksiyonlar olduğu bir JavaScript nesnesi iletilir:

$(seçici).on({'olay türü': handler}, [seçici], [veri]);

Eğer ek seçici iletmezsek, olay işleyiciyi eklediğimiz eleman üzerinde tetiklenir, aksi takdirde bu seçiciyle eşleşen alt eleman üzerinde tetiklenir (delege edilmiş olaylar). Aynı olay işleyici bir elemana birden fazla kez bağlanabilir.

Örnek

alert içinde, #test kimliğine sahip paragrafın metnini üzerine tıklandığında gösterelim, diğer paragraflara tıklamak hiçbir şey yapmasın:

<p>metin1</p>
<p id="test">metin2</p>
<p>metin3</p>

$('#test').on('click', function() {
	alert( $(this).text() );
});

Örnek

Bir paragrafa tıklandığında, on metoduna ilettiğimiz verileri gösterelim. Oluşturduğumuz testFunc işleyici fonksiyonunu kullanalım:

<p>tıkla</p>

function testFunc(event) {
	alert(event.data.text);
}

$('p').on('click', {text: 'aaa'}, testFunc);

Ayrıca bakınız

bir elemandan olay işleyiciyi kaldırmayı sağlayan
off metodu
olayın bir kez tetiklenip ardından işleyicinin
otomatik olarak kaldırılmasını sağlayan
one metodu
olay hakkında bilgi içeren
event nesnesi
bir elemana bağlı tüm olay işleyicilerini,
belirtilen türdeki olaylar için çalıştırmayı sağlayan
trigger metodu
bir fonksiyona bağlamı bağlamayı sağlayan
JavaScript bind metodu