Δέσμευση γεγονότων στο jQuery

Σχεδόν κάθε γεγονός JavaScript αντιστοιχεί σε μια δική του μέθοδο jQuery. Για παράδειγμα, το κλικ σε στοιχεία μπορεί να ανιχνευθεί ως εξής: $(selector).click(function).

Ας εξετάσουμε τον ακόλουθο κώδικα HTML:

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

Για αυτόν έχει οριστεί CSS:

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

Ας κάνουμε έτσι ώστε με κλικ σε οποιοδήποτε li να εμφανίζεται ένα θαυμαστικό. Κάντε κλικ στα στοιχεία της λίστας:

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

Μέσα στη δεσμευμένη συνάρτηση είναι διαθέσιμο το this, που αναφέρεται στο στοιχείο στο οποίο συνέβη το γεγονός (στην περίπτωσή μας, στο li στο οποίο έγινε το κλικ). Αυτό το this μπορεί να χρησιμοποιηθεί με στυλ JavaScript, για παράδειγμα, this.innerHTML ή με στυλ jQuery - για αυτό αυτό το this πρέπει να τυλιχτεί σε $, ως εξής: $(this).

Ας πάρουμε τον κώδικα HTML:

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

Σε αυτόν τον κώδικα έχουν οριστεί τα ακόλουθα στυλ CSS:

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

Ας κάνουμε έτσι ώστε με κλικ στο li να προστίθεται στο τέλος της '!'. Για να ελέγξετε τη λειτουργία, κάντε κλικ στα στοιχεία της λίστας:

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