Naväzovanie udalostí v jQuery

Takmer každej udalosti JavaScript zodpovedá jej vlastná metóda jQuery. Napríklad, kliknutie na elementy je možné zachytiť takto: $(selektor).click(funkcia).

Pozrime sa na nasledujúci HTML kód:

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

Pre neho je napísaný CSS:

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

Urobme tak, aby po kliknutí na akúkoľvek li sa vykričník vypísal. Kliknite na položky zoznamu:

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

Vo vnútri naviazanej funkcie je dostupný this, odkazujúci na ten element, v ktorom nastala udalosť (v našom prípade na li, na ktorú bolo kliknuté). Tento this je možné použiť štýlom JavaScriptu, napríklad this.innerHTML alebo štýlom jQuery - preto je tento this potrebné obaliť do $, takto: $(this).

Zoberme si HTML kód:

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

K tomuto kódu sú napísané nasledujúce CSS štýly:

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

Urobme tak, aby po kliknutí na li sa jej na koniec pridalo '!'. Pre overenie funkčnosti kliknite na položky zoznamu:

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