Universell on-metod i jQuery

För att binda händelser kan du också använda den universella metoden on. Den tar händelsens namn som första parameter (till exempel 'click'), och som andra - funktionen som ska bindas.

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

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

CSS ser ut så här:

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

Låt oss nu skriva om koden för li, som vi skrev tidigare, med metoden on. För att testa hur det fungerar, klicka på punkterna i listan:

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

Du kan samtidigt binda en funktion till flera typer av händelser - för att göra detta måste du lista dem med mellanslag: 'click mousemove etc.'. Till exempel, så här:

javascript$('li').on('click mousemove', function func() {
  $(this).append('!');
});
Задание 1

Binda alla länkar till en händelse - när musen förs över en länk ska dess href läggas till i slutet av dess text inom runda parenteser.

Задание 2

Binda alla input-fält till en händelse - när de förlorar fokus skriver varje input-fält ut sitt value i ett stycke med id=#test.