События в js объект событие

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

Более новая информация по этой теме находится на странице https://learn.javascript.ru/introduction-browser-events.

Чтобы хорошо обработать событие, недостаточно знать о том, что это – «клик» или «нажатие клавиши». Могут понадобиться детали: координаты курсора, введённый символ и другие, в зависимости от события.

Детали произошедшего браузер записывает в «объект события», который передаётся первым аргументом в обработчик.

Свойства объекта события

Пример ниже демонстрирует использование объекта события:

Свойства объекта event :

event.type Тип события, в данном случае click event.currentTarget Элемент, на котором сработал обработчик. Значение – в точности такое же, как и у this , но бывают ситуации, когда обработчик является методом объекта и его this при помощи bind привязан к этому объекту, тогда мы можем использовать event.currentTarget . event.clientX / event.clientY Координаты курсора в момент клика (относительно окна)

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

При назначении обработчика в HTML, тоже можно использовать переменную event , это будет работать кросс-браузерно:

Это возможно потому, что когда браузер из атрибута создаёт функцию-обработчик, то она выглядит так: function(event) < alert(event.type) >. То есть, её первый аргумент называется "event" .

Особенности IE8-

IE8- вместо передачи параметра обработчику создаёт глобальный объект window.event . Обработчик может обратиться к нему.

Работает это так:

Кроссбраузерное решение

Универсальное решение для получения объекта события:

Строка (*) , в случае, если функция не получила event (IE8-), использует window.event .-событие event .

Можно написать и иначе, если мы сами не используем переменную event в замыкании:

Итого

  • Объект события содержит ценную информацию о деталях события.
  • Он передаётся первым аргументом event в обработчик для всех браузеров, кроме IE8-, в которых используется глобальная переменная window.event .

Кросс-браузерно для JavaScript-обработчика получаем объект события так:

Учебник JavaScript

Практика

Работа с DOM

Практика

Некоторые продвинутые вещи

Рекомендованное ES6

Некоторые видео могут забегать вперед, тк к этому месту учебника мы прошли еще не весь ES6. Просто пропускайте такие видео, посмотрите потом.

Регулярки

Разное

Работа с канвасом

Практика

  • урок исключен (мало материала), по аяксу скоро будет отдельный учебник (много материала)
    Работа с
    AJAX в JavaScript –>
    Работа с
    AJAX + PHP –>
Читайте также:  16 Valve что это значит

Контекст

Drag-and-Drop

  • Урок №
    Введение
    в ООП в стиле ES6
  • Урок №
    Основы
    работы с ООП
  • Урок №
    Наследование
    классов в JavaScript
    Продвинутая работа
    с классами на JavaScript –>
  • Урок №
    Применение
    ООП при работе с DOM
  • Урок №
    Практика
    по ООП в JavaScript
  • Тут скоро будут еще уроки
    по функциональному и прототипному
    стилю ООП.

Практика по ООП

Ваша задача: посмотрите, попробуйте повторить.

Практика

Promise ES6

Библиотека jQuery

Тк. jQuery устаревает, объявляю эти уроки не обязательными и выношу в конец учебника (так по уровню уроки середины учебника, если что). В перспективе переедет в отдельный учебник по jq.

Объект Event (объект Событие) содержит в себе информацию о произошедшем событии. К примеру, если по элементу был сделан клик, мы можем узнать координаты этого клика, была ли нажата клавиша Ctrl, Alt или Shift в момент клика и так далее.

Как получить объект Event

Пусть у нас есть элемент, по клику на который выполнится функция func:

Внутри привязанной функции уже есть объект Event – мы просто пока еще не знаем, как его получить. Получается он следующем образом: нужно при объявлении нашей функции func передать в нее параметром любую переменную (например, event – но название может быть любым) и в эту переменную браузер автоматически положит объект Event:

Это работает только для функций, привязанных к какому-либо событию.

Еще раз: если при привязывании функции к событию этой функции задать параметр – в этот параметр браузер автоматически положит объект Event. Название этого параметра будет любым – как назовете, так и будете к нему обращаться.

Координаты клика

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

Пусть в переменной event лежит объект Event. В этом случае координаты клика относительно окна браузера можно найти так: event.clientX для координаты по горизонтали и event.clientY для координаты по вертикали.

Рассмотрим пример: привяжем блоку событие onmousemove (срабатывает при движении мышкой по элементу), и будем показывать координаты курсора при движении мыши:

Поводите мышкой по элементу – вы увидите, как меняются координаты:

Кроме свойств clientX и clientY существуют также свойства pageX и pageY. Давайте посмотрим разницу между ними.

Как работают clientX и clientY: если у вас есть окно 1000 на 1000 пикселей, и мышь находится в центре, то clientX и clientY будут оба равны 500. Если вы затем прокрутите страницу по горизонтали или вертикали, не двигая курсор, то значения clientX и clientY не изменятся, так как отсчитываются относительно окна, а не документа.

Как работают pageX и pageY: если у вас есть окно 1000 на 1000 пикселей, и курсор находится в центре, то pageX и pageY будут равны 500. Если вы затем прокрутите страницу на 250 пикселей вниз, то pageY станет равным 750.

Читайте также:  Corsair vengeance ddr3 8gb 1600mhz

Таким образом pageX и pageY содержат координаты события с учетом прокрутки.

Тип события

Объект Event также содержит в себе тип события, к примеру для события onclick это click, для onmouseover это mouseover и так далее. Доступ к типу события можно получить так – event.type:

Элемент события

С помощью event.target можно получить элемент, в котором произошло событие. Зачем это нужно, если этот элемент содержится в this? Ответ на этот вопрос даст пример ниже.

Пусть у нас есть div, а внутри него абзац. Привяжем событие к диву, но кликнем по абзацу – в этом случае event.target будет содержать конечный тег, в котором случилось событие – то есть абзац, а не див. Убедимся в этом с помощью tagName:

Нажатые клавиши

Давайте теперь будем получать нажатые клавиши. Это актуально для тех событий, в которых происходит работа с клавиатурой, например, в onkeypress, onkeydown, onkeyup.

Для получение нажатых клавиш следует использовать свойство event.keyCode. Оно, однако, возвращает не саму клавишу, а ее код. Этот код можно преобразовать в символ с помощью метода String.fromCharCode.

Рассмотрим пример: вводите текст в инпут и по мере ввода вы будете видеть код нажатой клавиши и саму клавишу:

Введите текст в инпут:

Ctrl, Alt, Shift

Можно узнать, были ли нажаты в момент события клавиши Ctrl, Alt и Shift. Это делается с помощью свойств event.ctrlKey, event.altKey и event.shiftKey – они имеют значение true или false в зависимости от того, была ли нажата эта клавиша в момент события или нет.

В следующем примере при клике на кнопку будем выводить сообщение о том, была ли нажата одна из клавиш Ctrl, Alt или Shift:

Нажмите на кнопку, зажав при этом Ctrl, Alt или Shift:

Отмена действия

Иногда с помощью JavaScript требуется отменить действие тега по умолчанию. К примеру, по нажатию на ссылку должно произойти некоторое действие, при этом перехода по ссылке не должно произойти. Сделать это можно двумя способами – все зависит от того, как привязать событие: через атрибут, типа onclick или через JavaScript.

Если событие привязывается через атрибут – отменить действие по умолчанию можно, если в конце атрибута написать return: false, вот так: onclick="какой-то код; return: false;".

Рассмотрим их действие на следующем примере: попробуйте перейти по ссылке или что-нибудь ввести в поле – у вас ничего не получится:

Результат выполнения кода:

До return false может быть любой JavaScript код – он выполнится, но действие пользователя будет отменено.

Читайте также:  Asus k52j технические характеристики

А вот если событие привязывается через JavaScript – то его действие можно отменить с помощью объекта Event, вот так: event.preventDefault().

Давайте сделаем так, чтобы по клику на ссылку не происходило перехода на другую страницу:

Результат выполнения кода:

Что вам делать дальше:

Приступайте к решению задач по следующей ссылке: задачи к уроку.

Когда все решите – переходите к изучению новой темы.

Описание интерфейса

Интерфейс Event представляет собой любое событие, которое происходит в объектной модели документа ( DOM). Некоторые события создаются непосредственно пользователем (например, события мыши, или клавиатуры), а другие генерируются программным интерфейсом приложения (API), например, такие события как завершение анимации, или приостановка видео.

Когда вызывается какой-либо обработчик события, то в этом случае ему передается объект Event , свойства этого объекта содержат дополнительную информацию о событии, например, такую как тип события и объект, который отправил событие. С помощью методов объекта Event можно управлять распространением события по дереву DOM.

Синтаксис объекта Event

Для того, чтобы создать событие, сначала необходимо создать объект события, для этого необходимо воспользоваться конструктором события Event() , он позволяет создать новое событие, со следующими аргументами:

Значение параметров

Параметр Описание
typeArg Строковое значение, представляющее тип события (значение чувствительно к регистру). Обязательный параметр.
eventInit Это словарь EventInit , имеющий следующие поля (является необязательным параметром):

  • bubbles – логическое значение, которое указывает на то, является ли данное событие всплывающим внутри DOM. Значение по умолчанию false – событие не всплывает.
  • cancelable – логическое значение, которое указывает на то можно ли отменить событие, или нет. Значение по умолчанию false – событие не может быть отменено.
  • composed – логическое значение, которое указывает, будет ли событие распространяться через границу между теневой модели DOM (shadow DOM) в стандартную модель DOM. Значение по умолчанию false – событие не переходит из теневого DOM в стандартный DOM.

Создание искусственного события

Ниже представлен пример создания нового искусственного события и инициирование этого события с использованием метода dispatchEvent() объекта EventTarget , который позволяет отправить искусственно созданное событие элементу:

Передача пользовательских данных

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

Вызов встроенных событий

Обращаю Ваше внимание на то, что вы можете создавать не только пользовательские события, но и встроенные события – FocusEvent , MouseEvent , WheelEvent , KeyboardEvent и тому подобное, например:

Полный перечень свойств и методов объекта Event представлен ниже:

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *