Марейн Хавербеке - Выразительный JavaScript

К сожалению, создание такого эффекта не ограничивается запуском его при событии "mouseover"и завершением при событии "mouseout". При движении мыши от узла к его дочерним узлам на родительском узле происходит событие "mouseout", хотя мышь, вообще говоря, его и не покидала. Что ещё хуже, эти события распространяются как и все другие, поэтому вы всё равно получаете "mouseout"при уходе курсора с одного их дочерних узлов того узла, где вы зарегистрировали обработчик.

Для обхода проблемы можно использовать свойство relatedTargetобъекта событий. Он сообщает, на каком узле была до этого мышь при возникновении события "mouseover", и на какой элемент она переходит при событии "mouseout". Нам надо менять эффект, только когда relatedTargetнаходится вне нашего целевого узла. Только в этом случае событие на самом деле представляет собой переход на наш узел (или уход с узла).

Наведите мышь на этот параграф .

var para = document.querySelector("p");

function isInside(node, target) {

for (; node != null; node = node.parentNode)

if (node == target) return true;

}

para.addEventListener("mouseover", function(event) {

if (!isInside(event.relatedTarget, para))

para.style.color = "red";

});

para.addEventListener("mouseout", function(event) {

if (!isInside(event.relatedTarget, para))

para.style.color = "";

});

Функция isInsideперебирает всех предков узла, пока не доходит до верха документа (и тогда узел равен null), или же не находит заданного ей родителя.

Должен добавить, что такой эффект достижим гораздо проще через псевдоселектор CSS под названием :hover, как показано ниже. Но когда при наведении вам надо делать что-то более сложное, чем изменение стиля узла, придётся использовать трюк с событиями "mouseover"и "mouseout".

p:hover { color: red }

Наведите мышь на этот параграф .

Когда элемент прокручивается, запускается событие "scroll". Это используется во многих случаях, например чтобы узнать, на что сейчас пользователь смотрит (чтобы останавливать анимацию, не попавшую на экран, или отправлять секретные шпионские донесения в ваш злодейский штаб), или визуально демонстрировать прогресс (подсвечивая часть содержания или показывая номер страницы).

В примере в правом верхнем углу документа создаётся индикатор процесса, который заполняется по мере прокрутки элемента вниз.

.progress {

border: 1px solid blue;

width: 100px;

position: fixed;

top: 10px; right: 10px;

}

.progress > div {

height: 12px;

background: blue;

width: 0%;

}

body {

height: 2000px;

}

Scroll me...

var bar = document.querySelector(".progress div");

addEventListener("scroll", function() {

var max = document.body.scrollHeight - innerHeight;

var percent = (pageYOffset / max) * 100;

bar.style.width = percent + "%";

});

Позиция элемента fixedозначает почти то же, что absolute, но ещё и предотвращает прокручивание элемента вместе с остальным документом. Смысл в том, чтобы оставить наш индикатор в углу. Внутри него находится другой элемент, который изменяет размер, отражая текущий прогресс. Мы используем проценты вместо pxдля задания ширины, чтобы размер элемента изменялся относительно размера всего индикатора.

Глобальная переменная innerHeightдаёт высоту окна, которую надо вычесть из полной высоты прокручиваемого элемента – при достижении конца элемента прокрутка заканчивается. (Также в дополнение к innerHeightесть переменная innerWidth). Поделив текущую позицию прокрутки pageYOffsetна максимальную позицию прокрутки, и умножив на 100, мы получили процент для индикатора.

Вызов preventDefaultне предотвращает прокрутку. Обработчик события вызывается уже после того, как прокрутка случилась.

При получении элементом фокуса браузер запускает событие "focus". Когда он теряет фокус, запускается событие "blur".

В отличие от предыдущих событий, эти два не распространяются. Обработчик родительского узла не уведомляется о получении или утрате фокуса дочерним элементом.

Следующий пример демонстрирует текст подсказки для того текстового поля, у которого в данный момент фокус.

Имя:

Возраст:

var help = document.querySelector("#help");

var fields = document.querySelectorAll("input");

for (var i = 0; i < fields.length; i++) {

fields[i].addEventListener("focus", function(event) {

var text = event.target.getAttribute("data-help");