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

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