Händelsebindning i jQuery

Nästan varje JavaScript-händelse har en motsvarande metod i jQuery. Till exempel kan ett klick på element fångas upp så här: $(selector).click(function).

Låt oss titta på följande HTML-kod:

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

För den har följande CSS definierat:

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

Låt oss göra så att när man klickar på något li så visas ett utropstecken. Klicka på listpunkterna:

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

Inuti den bundna funktionen finns this tillgänglig, som refererar till det element där händelsen inträffade (i vårt fall li som klickades på). Denna this kan användas i JavaScript-stil, till exempel this.innerHTML eller i jQuery-stil - för att göra detta bör denna this lindas in i $, så här: $(this).

Låt oss ta HTML-koden:

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

Följande CSS-stilar är definierade för denna kod:

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

Låt oss göra så att när man klickar på li så läggs ett '!' till i slutet av den. För att testa funktionen, klicka på listpunkterna:

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