События в JavaScript краткий обзор управления

5 (100%) 2 vote[s]

В JavaScript нет ввода или вывода. Мы рассматриваем  события,  вызванные действиями пользователя, как входные данные, а также манипулируем структурой DOM как выходными данными. Обычно в приложении JavaScript мы получаем такую ​​информацию, как нажатия клавиш, щелчки кнопок мыши и положение мыши, и мы будем ссылаться на эти переменные при определении того, какое действие необходимо выполнить. В любом случае события называются событиями DOM, и мы используем API DOM для создания обработчиков событий .

Как слушать события

Существует три способа управления событиями в структуре DOM. Вы можете прикрепить событие в своем HTML-коде так:

Способ 1: объявить обработчик события в коде HTML

<div id = "someDiv" onclick = " alert (  «щелкнул!» ) " >  содержимое div  </ div>

Этот метод очень прост в использовании, но это не рекомендуемый способ обработки событий. Действительно, хотя в настоящее время это работает, оно  устарело  (вероятно, будет отменено в будущем). Смешивание «визуального слоя» (HTML) и «логического слоя» (JavaScript) в одном месте — это действительно плохая практика и создает массу проблем во время разработки.

«Смешивать» визуальный уровень (HTML) и «логический уровень» (JavaScript) — это плохая практика, и это аналогично отражается во многих стилевых функциях, которые устарели в HTML5 и перешли в CSS3. Действующая здесь философия управления называется «разделением интересов». Более подробно — в Separation of concerns — Wikipedia.

Способ 2: присоединить обработчик события к элементу HTML в JavaScript

document.getElementById('someDiv').onclick = function() {
   alert('clicked!');
}

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

Способ 3: зарегистрируйте обратный вызов для прослушивателя событий с помощью метода addEventListener (предпочтительный метод)

document.getElementById('someDiv').addEventListener('click', function() {
   alert('clicked!');
}, false);

Обратите внимание, что третий параметр описывает,   должен ли быть вызван обратный вызов во время захваченной фазы. На данный момент это не важно, просто установите для него значение false или проигнорируйте его (вы даже можете передать только два параметра в  вызов  функции addEventListener и вообще не устанавливать этот логический параметр).

Подробная информация о событии DOM передается функции прослушивателя событий

При создании слушателя событий и прикреплении его к элементу, слушатель будет создавать в событии объект , чтобы описать то , что произошло. Этот объект предоставляется в качестве параметра функции обратного вызова :

element.addEventListener('click', function(event) {
   // теперь вы можете использовать объект события внутри обратного вызова
}, false);

В зависимости от типа события, которое вы слушаете, вы будете обращаться к различным свойствам   объекта события , чтобы получить информацию, например: «какие клавиши нажаты?», «Каково расположение курсора мыши?», «какая кнопка мыши была нажата?» и т. д.

Справочные таблицы для событий и свойств/методов

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

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

Наиболее полезные общие свойства:

      • type. Возвращает название события.
      • target. Возвращает элемент, вызвавший событие.

Наиболее полезные распространенные методы:

      • preventDefault(). Отменяет событие, если его можно отменить, что означает, что действие по умолчанию, относящееся к событию, не произойдет.
      • stopPropagation(). Предотвращает дальнейшее распространение события во время потока событий

Страница

События, связанные с жизненным циклом страницы:

      • load. Это событие происходит, когда объект загружен (включая все его ресурсы: изображения и т. д.) Это событие очень полезно, когда вы хотите запустить код JS и быть уверенным, что DOM готов (другими словами, убедитесь, что документ). getElementById (…) или document.querySelector (…) не вызовут ошибку, поскольку документ не был загружен, а искомые элементы не готовы.
      • resize. Событие происходит при изменении размера представления документа. Обычно мы получаем новый размер окна внутри слушателя событий, используя var w = window.innerWidth; и 
        var h = window.innerHeight;
      • scroll. Событие происходит, когда полоса прокрутки элемента прокручивается. Обычно в приемнике событий прокрутки мы используем такие вещи, как: 
          var max = document.body.scrollHeight — innerHeight
        var percent = (pageYOffset / max);
        … чтобы узнать процент прокрутки на странице.

Примеры реализации см. в «События жизненного цикла страницы load, resize, scroll«.

Клавиатура

Типы событий, связанные с клавиатурой:

      • keydown. Событие происходит, когда пользователь нажимает клавишу.
      • keyup. Событие происходит, когда пользователь отпускает клавишу.
      • keypress. Событие происходит, когда пользователь нажимает клавишу.

Свойства keyboardEvent

      • keyCode. Возвращает код символа Unicode ключа, который вызвал события onkeypress, onkeydown или onkeyup.
      • shiftKey. Возвращает, была ли нажата клавиша «Shift», когда было вызвано событие клавиши.
      • ctrlKey. Возвращает, была ли нажата клавиша ctrl, когда было вызвано событие клавиши.
      • altKey. Возвращает, была ли нажата клавиша «alt», когда было вызвано событие клавиши.

Мышь

Типы событий, связанные с мышью

      • click. Событие происходит, когда пользователь нажимает на элемент (нажимает кнопку и отпускает ее).
      • dblclick. Событие происходит, когда пользователь дважды щелкает элемент.
      • mousedown. Событие происходит, когда пользователь нажимает клавишу (вверх и отпустить).
      • mouseup. Событие происходит, когда пользователь отпускает кнопку мыши над элементом.
      • mousemove. Событие происходит, когда указатель движется, когда он находится над элементом.
      • mouseenter. Событие происходит, когда указатель перемещается на элемент.
      • mouseleave. Событие происходит, когда указатель перемещается из элемента.
      • mouseover. Событие происходит, когда указатель перемещается на элемент или на один из его дочерних элементов.
      • contextmenu. Событие происходит, когда пользователь щелкает правой кнопкой мыши элемент, чтобы открыть контекстное меню.

Свойства MouseEvent

      • button. Возвращает, какая кнопка мыши была нажата, когда было вызвано событие мыши.
      • clientX and clientY. Возвращает координаты указателя мыши относительно системы координат элемента, которая вызвала событие.
      • pageX and pageY. Возвращает координаты указателя мыши относительно документа, когда было вызвано событие мыши.
      • screenX and screenY. Возвращает координаты указателя мыши относительно экрана, когда событие было вызвано.
      • altKey, ctrlKey, shiftKey. Возвращает, была ли нажата клавиша «alt, ctrl и shift» при запуске события.
      • detail. Возвращает число, которое указывает, сколько раз была нажата мышь.

Формы

События, связанные с формами

      • input. Событие происходит, когда элемент получает пользовательский ввод (например, клавиша вводится в поле ввода, ползунок перемещается и т. д.)
      • change. Событие происходит, когда содержимое элемента формы, выбор или проверенное состояние изменились (для <input>, <select> и <textarea>). Слушатель события изменения на слайдере будет генерировать событие, когда перетаскивание / перемещение закончится, в то время как входные события будут полезны для выполнения каких-либо действий при перемещении слайдера.
      • focus. Событие происходит, когда элемент получает фокус (например, пользователь щелкает в поле ввода).
      • blur. Событие происходит, когда элемент теряет фокус (например, пользователь нажимает на другой элемент).
      • select. Событие происходит после выбора пользователем текста (для <input> и <textarea>).
      • submit. Событие происходит при отправке формы.

Свойства FormEvent

Обычно в прослушивателе событий формы мы проверяем содержимое различных полей ввода, используя их свойство value. Больше примеров реализации смотрите в «JavaScript: добавление интерактивности в документы HTML «.

Читайте больше по теме:

Подписаться
Уведомление о
guest
0 комментариев
Inline Feedbacks
View all comments
Просмотры: 223

Популярные записи