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

// → 86

console.log("1".charCodeAt(0));

// → 49

У других кнопок коды менее предсказуемы. Лучший способ их выяснить – экспериментальный. Зарегистрировать обработчик, который записывает коды клавиш, и нажать нужную кнопку.

Кнопки-модификаторы типа Shift, Ctrl, Alt, и Meta (Command на Mac) создают события, как и нормальные кнопки. Но при разборе комбинаций клавиш можно выяснить, были ли нажаты модификаторы, через свойства shiftKey, ctrlKey, altKey, и metaKeyсобытий клавиатуры и мыши.

Нажмите Ctrl-Space для продолжения.

addEventListener("keydown", function(event) {

if (event.keyCode == 32 && event.ctrlKey)

console.log("Продолжаем!");

});

События "keydown"и "keyup"дают информацию о физическом нажатии кнопок. А если вам нужно узнать, какой текст вводит пользователь? Создавать его из нажатий кнопок – неудобно. Для этого существует событие "keypress", происходящее сразу после "keydown"(и повторяющееся вместе с "keydown", если клавишу продолжают удерживать), но только для тех кнопок, которые выдают символы. Свойство объекта события charCodeсодержит код, который можно интерпретировать как код Unicode. Мы можем использовать функцию String.fromCharCodeдля превращения кода в строку из одного символа.

Переведите фокус на страницу и печатайте.

addEventListener("keypress", function(event) {

console.log(String.fromCharCode(event.charCode));

});

Источником события нажатия клавиши узел становится в зависимости от того, где находился фокус ввода во время нажатия. Обычные узлы не могут получить фокус ввода (если только вы не задали им атрибут tabindex), а такие, как ссылки, кнопки и поля форм – могут. Мы вернёмся к полям ввода в главе 18. Когда ни у чего нет фокуса, в качестве целевого узла событий работает document.body.

Нажатие кнопки мыши тоже запускает несколько событий. События "mousedown"и "mouseup"похожи на "keydown"и "keyup", и запускаются, когда кнопка нажата и когда отпущена. События происходят у тех узлов DOM, над которыми находился курсор мыши.

После события "mouseup"на узле, на который пришлись и нажатие, и отпускание кнопки, запускается событие "click". Например, если я нажал кнопку над одним параграфом, потом передвинул мышь на другой параграф и отпустил кнопку, событие "click"случится у элемента, который содержал в себе оба эти параграфа.

Если два щелка происходят достаточно быстро друг за другом, запускается событие "dblclick"(double-click), сразу после второго запуска "click".

Для получения точных координат места, где произошло событие мыши, обратитесь к свойствам pageXи pageY– они содержат координаты в пикселях относительно верхнего левого угла.

В примере создана примитивная программа для рисования. Каждый раз по клику на документе он добавляет точку под вашим курсором. В главе 19 будет представлена менее примитивная программа для рисования.

body {

height: 200px;

background: beige;

}

.dot {

height: 8px; width: 8px;

border-radius: 4px; /* скруглённые углы */

background: blue;

position: absolute;

}

addEventListener("click", function(event) {

var dot = document.createElement("div");

dot.className = "dot";

dot.style.left = (event.pageX - 4) + "px";

dot.style.top = (event.pageY - 4) + "px";

document.body.appendChild(dot);

});

Свойства clientXи clientYпохожи на pageXи pageY, но дают координаты относительно части документа, которая видна сейчас (если документ был прокручен). Это удобно при сравнении координат мыши с координатами, которые возвращает getBoundingClientRect– его возврат тоже связан с относительными координатами видимой части документа.

Каждый раз при сдвиге курсора мыши запускается событие "mousemove". Его можно использовать для отслеживания позиции мыши. Обычно это нужно при создании некоей функциональности, связанной с перетаскиванием объектов мышью.

К примеру, следующая программа отображает полоску и устанавливает обработку событий так, что движение влево и вправо уменьшает или увеличивает её ширину.

Переместите мышь для увеличения ширины:

var lastX; // Последняя позиция мыши

var rect = document.querySelector("div");

rect.addEventListener("mousedown", function(event) {

if (event.which == 1) {

lastX = event.pageX;

addEventListener("mousemove", moved);

event.preventDefault(); // Запретим выделение

}

});

function moved(event) {

if (event.which != 1) {

removeEventListener("mousemove", moved);

} else {

var dist = event.pageX - lastX;

var newWidth = Math.max(10, rect.offsetWidth + dist);

rect.style.width = newWidth + "px";

lastX = event.pageX;

}

}

Обратите внимание – обработчик "mousemove"зарегистрирован у всего окна. Даже если мышь уходит за пределы полоски, нам надо обновлять её размер и прекращать это, когда кнопку отпускают.

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

К сожалению, создание такого эффекта не ограничивается запуском его при событии "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".