Event Binding i jQuery

Næsten alle JavaScript-events har deres tilsvarende jQuery-metode. For eksempel kan et klik på elementer fanges sådan her: $(selektor).click(funktion).

Lad os se på følgende HTML-kode:

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

For den er der skrevet CSS:

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

Lad os gøre sådan, at ved klik på enhver li vises et udråbstegn. Tryk på punkterne i listen:

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

Inde i den bundne funktion er this tilgængelig, som henviser til det element, hvor handlingen skete (i vores tilfælde den li, der blev klikket på). Denne this kan bruges i JavaScript-stil, for eksempel this.innerHTML eller i jQuery-stil - for at gøre dette skal denne this indpakkes i $, sådan her: $(this).

Lad os tage HTML-koden:

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

Følgende CSS-stile er skrevet til denne kode:

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

Lad os gøre sådan, at ved klik på li bliver der tilføjet et '!' til slutningen. For at teste funktionen, tryk på punkterne i listen:

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