#C0FFEE Повторения событий

Использование циклов призвано решить задачу повторения действий, но в JavaScript действия кроме програмного кода может генерировать и пользователь.

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

<div class="block" onclick="alert('Hi!!')">
</div>

При клике на блок, у нас начнет выводиться всплывающее окно.

alert является встроенной функцией, давай попробуем создать свою

<script>
function boom() {
    alert('BOOM!');
}
</script>

<div class="block" onclick="boom()">
</div>

Можно установить обработчик другим способом

<div class="block">
</div>

<script>

var obj = document.querySelector('.block');

obj.onclick = boom;

function boom() {
    alert('BOOM!');
}
</script>

Подсчет кликов

Давайте попробуем подсчитать количество кликов

<script>
   var i = 0; 
   function count() {
    i++;
    console.log(i);
   }
</script>

<div class="block" onclick="count()">
</div>

Практика:

1. Сделайте блок. Внутри него выведите число 0. При клике на блок увеличивайте число внутри него на единицу.
2. Есть блок. Если кликнуть на него три раза, блок меняет цвет.
3. Есть блок и массив картинок. При старте выводим на фоне "нулевую" картинку. При последующих кликах меняем фоновое изображение внутри блока на последующуе фоновые картинки из массива.
4. Есть блоки двух цветов. Делаем три кнопки. При клике на первую остаются блоки только первого цвета. При клике на вторую остаются блоки только второго цвета. При клике на третью все блоки возвращаются на свои места.