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

Нажми меня нежно.

А здесь нет обработчиков.

var button = document.querySelector("button");

button.addEventListener("click", function() {

console.log("Кнопка нажата.");

});

Пример назначает обработчик на DOM-узел кнопки. Нажатия на кнопку запускают обработчик, а нажатия на другие части документа – не запускают.

Присвоение узлу атрибута onclickработает похоже. Но у узла есть только один атрибут onclick, значит таким способом вы можете зарегистрировать только один обработчик. Метод addEventListenerпозволяет добавлять любое количество обработчиков, так что вы не замените случайно уже назначенный ранее обработчик.

Метод removeEventListener, вызванный с такими же аргументами, как addEventListener, удаляет обработчик.

Act-once button

var button = document.querySelector("button");

function once() {

console.log("Done.");

button.removeEventListener("click", once);

}

button.addEventListener("click", once);

Чтобы это провернуть, мы даём функции имя (в данном случае, once), чтобы её можно было передать и в addEventListener, и в removeEventListener.

В примерах мы проигнорировали тот факт, что функциям-обработчикам передаётся аргумент – объект события. В нём хранится дополнительная информация о событии. К примеру, если надо узнать, какая кнопка мыши была нажата, мы можем обратиться к свойству whichэтого объекта.

Жми меня, чем хочешь!

var button = document.querySelector("button");

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

if (event.which == 1)

console.log("Левая");

else if (event.which == 2)

console.log("Средняя");

else if (event.which == 3)

console.log("Правая");

});

Хранящаяся в объекте информация – разная для каждого типа событий. Мы обсудим эти типы позже. Свойство объекта typeвсегда содержит строку, описывающую событие (например, "click"или "mousedown").

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

Если и у параграфа и у кнопки есть обработчики, то первым запустится более конкретный – то есть, обработчик кнопки. Событие как бы распространяется наружу, от узла, где оно случилось, до его родительского и далее до корня документа. После отработки всех обработчиков всех промежуточных узлов, очередь среагировать на событие доходит и до самого окна.

В любой момент обработчик может вызвать метод stopPropagationобъекта события, чтобы «высшие» узлы не получили его. Это может быть полезным, когда у вас есть кнопка внутри другого кликабельного элемента, и вы не хотите, чтобы клики по кнопке активировали поведение внешнего элемента.

Следующий пример регистрирует обработчики "mousedown"как на кнопке, так и на окружающем параграфе. При щелчке правой кнопкой обработчик кнопки вызывает stopPropagation, который предотвращает запуск обработчика параграфа. При клике другой кнопкой запускаются оба обработчика.

Параграф с кнопкой .

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

var button = document.querySelector("button");

para.addEventListener("mousedown", function() {

console.log("Обработчик параграфа.");

});

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

console.log("Обработчик кнопки.");

if (event.which == 3)

event.stopPropagation();

});

У большинства объектов событий есть свойство target, ссылающееся на узел, который запустил обработку. Его можно использовать для проверки того, что вы не обрабатываете что-то, пришедшее с ненужного вам узла.

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

A

B

C

document.body.addEventListener("click", function(event) {

if (event.target.nodeName == "BUTTON")

console.log("Clicked", event.target.textContent);

});

У многих событий есть действия по умолчанию. При клике на ссылку вы перейдёте по ней. При нажатии на стрелку вниз браузер прокрутит страницу вниз. По правому клику мыши вы увидите контекстное меню. И так далее.

Для большинства типов событий обработчики событий вызываются до того, как сработает действие по умолчанию. Если обработчик не хочет, чтобы это действие происходило (часто потому, что он уже обработал его), он может вызвать метод preventDefaultобъекта события.

Это можно использовать для создания своих горячих клавиш или контекстного меню. Также это можно использовать для слома привычного пользователю интерфейса. К примеру, вот ссылка, по которой нельзя пройти.

MDN

var link = document.querySelector("a");

link.addEventListener("click", function(event) {

console.log("Фигушки.");

event.preventDefault();

});

Не делайте так – если у вас нет очень серьёзной причины! Пользователям вашей страницы будет очень неудобно, когда они столкнутся с неожиданными результатами своих действий. В зависимости от браузера, некоторые события перехватить нельзя. В Chrome нельзя обрабатывать горячие клавиши закрытия текущей закладки (Ctrl-W или Command-W).

При нажатии кнопки на клавиатуре браузер запускает событие "keydown". Когда она отпускается, происходит событие "keyup".

Страница по нажатию V офиолетивает.

addEventListener("keydown", function(event) {

if (event.keyCode == 86)

document.body.style.background = "violet";

});

addEventListener("keyup", function(event) {

if (event.keyCode == 86)

document.body.style.background = "";

});

Несмотря на название, "keydown"происходит не только тогда, когда на кнопку нажимают. Если нажать и удерживать кнопку, событие будет происходить каждый раз по приходу повторного сигнала от клавиши (key repeat). Если вам, к примеру, надо увеличивать скорость игрового персонажа, когда нажата кнопка со стрелкой, и уменьшать её, когда она отпущена – надо быть осторожным, чтобы не увеличить скорость каждый раз при повторе сигнала от кнопки, иначе скорость возрастёт очень сильно.

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

Для цифр и букв код будет кодом символа Unicode, связанного с прописным символом, изображённым на кнопке. Метод строки charCodeAtдаёт нам этот код.

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