События jQuery

Практически каждому событию JavaScript соответствует свой метод jQuery. К примеру, клик по элементам можно отловить так:

$(селектор).click(функция)

Список методов jQuery, которые можно использовать для привязки событий:

• click
• blur
• focus
• focusin
• focusout
• load
• resize
• scroll
• unload
• click
• dblclick
• mousedown
• mouseup
• mousemove
• mouseover
• mouseout
• mouseenter
• mouseleave
• change
• select
• submit
• keydown
• keypress
• keyup
• error

Давайте сделаем так, чтобы по клику на любую li алертом выводился восклицательный знак:

<ul>
    <li>пункт 1</li>
    <li>пункт 2</li>
    <li>пункт 3</li>
</ul>

<script>
$('li').click(function() {
	alert('!');
});
</script>

Внутри привязанной функции доступен this, ссылающийся на тот элемент, в котором произошло событие, в нашем случае на li, по которому был клик. this можно использовать в стиле JavaScript, например так this.innerHTML или в стиле jQuery — для этого this следует обернуть в $:

$(this)

Давайте сделаем так, чтобы по клику на li ей в конец добавлялся восклицательный знак:

<ul>
    <li>пункт 1</li>
    <li>пункт 2</li>
    <li>пункт 3</li>
</ul>

<script>
$('li').click(function() {
	$(this).append('!');
});
</script>

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

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

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

Несколько событий одновременно

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

$('li').on('click mousemove', function func() {
	какой-то код;
});

Делегирование событий

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