Hendelsesbinding i jQuery

Nesten alle JavaScript-hendelser har sin tilsvarende jQuery-metode. For eksempel kan et klikk på elementer fanges opp slik: $(selector).click(function).

La oss se på følgende HTML-kode:

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

For denne er CSS definert:

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

La oss gjøre slik at ved klikk på en hvilken som helst li vises et utropstegn. Trykk på listepunktene:

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

Inne i den bundne funksjonen er this tilgjengelig, som refererer til det elementet hvor hendelsen inntraff (i vårt tilfelle li-en som ble klikket på). Denne this kan brukes i JavaScript-stil, for eksempel this.innerHTML eller i jQuery-stil - for å gjøre dette bør denne this pakkes inn i $, slik: $(this).

La oss ta HTML-koden:

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

Følgende CSS-stiler er definert for denne koden:

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

La oss gjøre slik at ved klikk på li blir et '!' lagt til på slutten av den. For å sjekke funksjonaliteten, trykk på listepunktene:

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