Послание по JS № 10
Всплытие (Детали событий в JS)
Всплытие — это когда на элементе происходит событие, обработчики сначала срабатывают на нём, потом на его родителе, затем выше и так далее, вверх по цепочке предков.
Например, есть 3 вложенных элемента FORM > DIV > P с обработчиком на каждом:
<form onclick="alert('form')">FORM
<div onclick="alert('div')">DIV
<p onclick="alert('p')">P</p>
</div>
</form>
Клик по внутреннему <p> вызовет обработчик onclick:
1. Сначала на самом <p>.
2. Потом на внешнем <div>.
3. Затем на внешнем <form>.
И так далее вверх по цепочке до самого document.
Этот процесс называется «всплытием (bubbling)», потому что события «всплывают» от внутреннего элемента вверх через родителей подобно тому, как всплывает пузырёк воздуха в воде.
Всплывают не все!
Почти все события всплывают.
Ключевое слово в этой фразе – «почти».
Например, событие focus не всплывает. Однако, стоит понимать, что это скорее исключение, чем правило, всё-таки большинство событий всплывают.
Где конкретно сработало (event.target)
Всегда можно узнать, на каком конкретно элементе произошло событие.
Самый глубокий элемент, который вызывает событие, называется целевым элементом, и он доступен через event.target.
Отличия от this (=event.currentTarget):
· this – это сам элемент, на котором выполняется обработчик.
· event.target – это «целевой» элемент, на котором произошло событие.
Возможна и ситуация, когда event.target и this – один и тот же элемент, например, если клик был непосредственно на самом элементе, а не на его дочернем элементе.
Прекращение всплытия
Всплытие идёт с «целевого» элемента прямо наверх. Событие будет всплывать до элемента <html>, а затем до объекта document, а иногда даже до window, вызывая все обработчики на своём пути.
Любой промежуточный обработчик может решить, что событие полностью обработано, и остановить всплытие. Для этого нужно вызвать метод event.stopPropagation().
Например, здесь при клике на кнопку <button> обработчик body.onclick не сработает:
<body onclick="alert(`сюда всплытие не дойдёт`)">
<button onclick="event.stopPropagation()">Кликни меня</button>
</body>
Таймеры в JS
Функции setTimeout() и setInterval() позволяют зарегистрировать функцию, которая будет вызываться один или более раз через определенные интервалы времени. Это очень важные функции для клиентского JavaScript, и поэтому они были определены как методы объекта Window, несмотря на то что являются универсальными функциями, не выполняющими никаких действий с окном.
SetTimeout()
Метод setTimeout() планирует запуск функции через определенное число миллисекунд.
Он возвращает значение, которое можно передать методу clearTimeout(), чтобы отменить запланированный ранее запуск функции.
function func() {
alert('Привет');
}
setTimeout(func, 1000);
SetInterval()
Метод setInterval() похож на setTimeout(), за исключением того, что он автоматически заново планирует повторное выполнение через указанное количество миллисекунд:
setInterval(updateClock, 60000); // Вызывать updateClock() через каждые 60 сек.
Подобно setTimeout(), метод setInterval() возвращает значение, которое может быть передано методу clearInterval(), чтобы отменить запланированный запуск функции.
Дополнительно
Спецификация HTML5 (и все броузеры, кроме IE) допускает передавать методам setTimeout() и setInterval() дополнительные аргументы после первых двух. Все эти дополнительные аргументы будут передаваться функции, вызов которой планируется этими методами. Однако если требуется сохранить совместимость с IE, эту возможность использовать не следует.
Если методу setTimeout() указать величину интервала 0 миллисекунд, указанная функция будет вызвана не сразу, а «как только такая возможность появится», т. е. как только завершат работу все обработчики событий.
Отмена исполнения clearTimeout
Методы setTimeout() и setInterval() возвращает числовой идентификатор таймера timerId, который можно использовать для отмены действия.
Синтаксис:
var timerId = setTimeout(...);
clearTimeout(timerId);
В следующем примере мы ставим таймаут, а затем удаляем. В результате ничего не происходит.
var timerId = setTimeout(function() { alert(timerId) }, 1000);
clearTimeout(timerId);
alert(timerId); // всё ещё число, оно не обнуляется после отмены
Как видно из alert, в браузере идентификатор таймера является обычным числом.
Рабочий пример
Следующий код, при запуске, выводить сообщение каждые две секунды, пока не пройдёт 5 секунд:
// начать повторы с интервалом 2 сек
var timerId = setInterval(function() {
alert("тик");
}, 2000);
// через 5 сек остановить повторы
setTimeout(function() {
clearInterval(timerId);
alert('стоп');
}, 5000);
Работа с формами через JS
Элементы управления, такие как <form>, <input> и другие имеют большое количество своих важных свойств и ссылок.