jQuery'de Olay Bağlama

Hemen hemen her JavaScript olayına karşılık bir jQuery metodu vardır. Örneğin, elementlere tıklama şu şekilde yakalanabilir: $(seçici).click(fonksiyon).

Aşağıdaki HTML kodunu inceleyelim:

html<ul>
  <li>text</li>
  <li>text</li>
  <li>text</li>
</ul>

Bunun için şu CSS yazılmıştır:

cssli {
  width: 100px;
  cursor: pointer;
}

Herhangi bir li öğesine tıklandığında ünlem işareti çıkmasını sağlayalım. Liste öğelerine tıklayarak deneyin:

javascript$('li').click(function() {
  alert('!');
});

Bağlanan fonksiyonun içinde, olayın meydana geldiği elemente (bizim durumumuzda tıklanan li) referans eden this kullanılabilir. Bu this, JavaScript tarzında, örneğin this.innerHTML şeklinde veya jQuery tarzında - bunun için bu this $ içine alınmalıdır, şu şekilde: $(this).

Şu HTML kodunu alalım:

html<ul>
  <li>text</li>
  <li>text</li>
  <li>text</li>
</ul>

Bu kod için aşağıdaki CSS stilleri yazılmıştır:

cssli {
  width: 100px;
}
li:hover {
  color: red;
  cursor: pointer;
}

Bir li öğesine tıklandığında sonuna '!' eklenmesini sağlayalım. Çalışmasını test etmek için liste öğelerine tıklayın:

javascript$('li').click(function() {
  $(this).append('!');
});