События

Установка обработчиков событий

$('#block').on('click', function(event){
    alert('Test');
});

Проблема с this в обработчике

Когда у нас сработала функция обработчик, даже если она была установлена через jQuery this будет указывать на DOM-объект. Чтобы начать работать с ним(объектом) через jQuery нужно обернуть его в $,то есть вот так $(this)

Аналогичное можно сделать с event.target

Стандартные события

$('.class').click(function(){
    //что-то делаем
})

Работа с события в общем случае

// создаем обработчик
$('.class').bind('click', function(){
    // что-то делаем
});

//или

// создаем обработчик
$('.class').on('click', function(){
    // что-то делаем
});



// вызываем обработчик
$('.class').trigger('click');

// удаляем все обработчики для данной коллекции объектов
$('.class').unbind('click');

Можно создать свое событие

var body = document.body;

$(body).bind("abracadabra",function() {
    alert('Hi');
});

$(body).trigger("abracadabra"); //вызовет обработчик с Hi

Практика:

1. Кликаем на блок - выводится alert

2. Есть два блока. При клике на блок он меняет цвет. Если оба блока поменяли цвет - выводим сообщение

3. Есть галерея картинок. При клике на картинку она увеличивается.

4. Есть блоки и есть кнопка. При клике на любой блок, он меняет цвет. При клике на кнопку, все блоки восстанавливают свой исходный цвет.

5. Есть блоки, есть круги. Если активировано три блока или два круга, то выводим сообщение

6. Есть список тематик. Пользователю нужно выбрать 3 из 10. При выборе тематики блок с ней меняет цвет. Когда выбрано 3 блока из 10 дальнейших выбор блокируется, все блоки "сереют".