Универсальный метод on в jQuery

Для привязывания событий также можно использовать универсальный метод on. Первым параметром он принимает название события (например, 'click'), а вторым - функцию, которую следует привязать.

Рассмотрим пример на следующем HTML коде:

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

CSS выглядит так:

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

Теперь перепишем код для li, который мы писали ранее через метод on. Для проверки работы понажимайте на пункты списка:

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

Можно одновременно привязать одну функцию на несколько типов событий - для этого их нужно перечислить их через пробел: 'click mousemove и т.д.'. Например, так:

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

Привяжите всем ссылкам событие - по наведению на ссылку в конец ее текста дописывается ее href в круглых скобках.

Привяжите всем инпутам событие - по потери фокуса каждый инпут выводит свое value в абзац с id=#test.