Tapahtumien sitominen jQueryssä

Lähes jokaiselle JavaScriptin tapahtumalle on oma vastaava jQuery-metodi. Esimerkiksi, klikkausta elementeistä voidaan havaita näin: $(valitsin).click(funktio).

Tarkastellaan seuraavaa HTML-koodia:

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

Sille on määritelty CSS:

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

Tehdään niin, että minkä tahansa li:n klikkaaminen tulostaa huutomerkin. Klikkaa listan kohtia:

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

Sidotun funktion sisällä on saatavilla this, viitaten siihen elementtiin, jossa tapahtuma tapahtui (meidän tapauksessamme li:hen, jota klikattiin). Tätä this:ia voidaan käyttää JavaScript-tyylillä, esimerkiksi this.innerHTML tai jQuery-tyylillä - tätä varten tämä this tulee kääriä $:iin, näin: $(this).

Otetaan HTML-koodi:

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

Tälle koodille on määritelty seuraavat CSS-tyylit:

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

Tehdään niin, että li:n klikkaaminen lisää sen loppuun '!'. Tarkista toiminta klikkaamalla listan kohtia:

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