26. Работа с событиями экрана, клавиатуры, мыши в js. Добавление метода в html dom addEventListener().

Добавление метода HTML DOM addEventListener()

elem.addEventListener(event, listener, capture)

Параметры:

elem - элемент, чьи события будем перехватывать

event - строка, наименование события (без префикса 'on')

listener - функция, которой будет передаваться событие

capture - булевое значение, если true, то осуществляется capture, если false - bubling (если не в курсе, что это означает – пишите false;

Функция addEventListener регистрирует свой второй аргумент как функцию, которая вызывается, когда описанное в первом аргументе событие случается.

Метод removeEventListener удаляет обработчик

Объекты событий

Если надо узнать, какая кнопка мыши была нажата, мы можем обратиться к свойству which.

<button>Жми меня, чем хочешь! </button>

<script>

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("Правая");

}); </script>

Действия по умолчанию.

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

События от кнопок клавиатуры.

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

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

<script>

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 = ""; });

</script>

Кнопки-модификаторы типа Shift, Ctrl, Alt, создают события, как и нормальные кнопки. Можно выяснить, были ли нажаты они, через свойства shiftKey, ctrlKey, altKey.

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

<script>

addEventListener("keydown", function(event) {

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

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

}); </script>

Движение мыши

1) Каждый раз при сдвиге курсора мыши запускается событие «mousemove».

2) События «mouseover» or «mouseout» можно использовать для создания эффектов проведения мыши, показывая или меняя стиль чего-либо.

Такой эффект достижим гораздо проще через CSS под названием :hover.

Кнопки мыши

1) События «mousedown» и «mouseup» когда кнопка нажата и когда отпущена. После события «mouseup» запускается событие “click”. Если два щелка происходят достаточно быстро друг за другом, запускается событие «dblclick» (double-click).

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

События прокрутки

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

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

Событие загрузки

1) Когда заканчивается загрузка страницы, на объектах window и body запускается событие “load”. У эл-в типа картинок или тегов скрипта, которые загружают внешний файл, тоже есть событие “load”, которое показывает, что файл загружен.

2) Когда страница закрывается или с неё уходят запускается событие «beforeunload». Цель - защитить пользователя от потери данных при закрытии документа. Для этого используется возврат строки из обработчика. Строка будет использована в диалоге, который спрашивает пользователя, хочет ли он остаться на странице или покинуть её. Этот механизм гарантирует, что пользователь может покинуть страницу, даже если на ней работает зловредный скрипт, который бы хотел не отпускать пользователя, а вместо этого показывал бы ему мошенническую рекламу по снижению веса.