В JavaScript события - это действия, которые происходят в приложении. Они запускаются различными вещами, такими как ввод данных, отправка форм и изменения в элементе, например изменение размера, или ошибки, возникающие при запуске приложения и т. Д. Мы можем назначить обработчик событий для обработки этих событий. События, происходящие с элементами DOM, можно обрабатывать путем назначения обработчика событий свойствам объекта DOM для соответствующих событий. В этой статье мы рассмотрим обработчики событий onfocus, oncancel и oncanplay.

onfocus

Свойство onfocus объекта document позволяет нам установить обработчик событий для события focus, которое противоположно событию blur. Событие focus запускается, когда пользователь устанавливает фокус на элементе HTML. Если мы хотим, чтобы событие focus срабатывало для не входных элементов, мы должны добавить к нему атрибут tabindex. Что добавлено в этот атрибут, мы можем сосредоточиться на нем с помощью клавиши Tab на нашем компьютере. Например, мы можем прикрепить обработчик событий onfocus к объекту document, написав:

document.onfocus = () => {
  console.log('focus');
}

Мы также можем получить объект Event, который инициировал событие фокуса, добавив параметр event в функцию обработчика событий, как в следующем коде:

document.onfocus = (event) => {
  console.log(event);
}

Затем, когда мы нажимаем на страницу и выходим из нее, мы получаем что-то вроде следующего вывода из приведенного выше кода:

bubbles: false
​cancelBubble: false
​cancelable: false
​composed: true
​currentTarget: null
​defaultPrevented: false
​detail: 0
​eventPhase: 0
​explicitOriginalTarget: <html>
​isTrusted: true
​layerX: 0
​layerY: 0
​originalTarget: HTMLDocument https://fiddle.jshell.net/_display/
​rangeOffset: 0
​rangeParent: null
​relatedTarget: null
​returnValue: true
​srcElement: HTMLDocument https://fiddle.jshell.net/_display/
​target: HTMLDocument https://fiddle.jshell.net/_display/
​timeStamp: 1463
​type: "focus"
​view: Window https://fiddle.jshell.net/_display/
​which: 0

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

oncancel

Чтобы справиться с ситуацией, когда элемент dialog закрыт, мы можем использовать обработчик событий oncancel, поскольку событие cancel запускается, когда он закрывается. Обработка события с помощью обработчика событий oncancel предотвращает его восходящую цепочку, поэтому родительские обработчики не уведомляются о событии. Одновременно объекту может быть назначен только один oncancel обработчик. Однако, если мы используем addEventListener для присоединения функции обработчика событий к нашему элементу, то мы сможем обойти это ограничение. Например, мы можем использовать это как в следующем коде:

const dialog = document.getElementById('dialog');
const openButton = document.getElementById('open-button');
openButton.onclick = () => {
  dialog.showModal();
};
dialog.oncancel = (event) => {
  console.log('cancel');
  console.log(event);
}

Затем мы должны добавить элемент dialog в наш HTML-код:

<button id='open-button'>
  Open Dialog
</button>
<dialog id="dialog">
  <form method="dialog">
    <p>
      Dialog
    </p>
    <menu>
      <button id="cancel-button" value="cancel">Cancel</button>
      <button id="confirmBtn" value="default">Confirm</button>
    </menu>
  </form>
</dialog>

В приведенном выше коде мы добавили элемент dialog в HTML и получили элемент DOM для элемента HTML dialog с помощью метода getElementById, который дает нам следующие методы:

  • close() - метод экземпляра диалога для закрытия элемента dialog. Необязательная строка может быть передана в качестве аргумента, который обновляет returnValue dialog, что полезно для указания, какую кнопку использовал пользователь, чтобы закрыть его.
  • show() - метод экземпляра диалога для немодального отображения диалога, что означает, что мы по-прежнему разрешаем взаимодействие извне. Никаких аргументов.
  • showModal() - метод экземпляра диалога для отображения диалога как модального поверх всего остального. Он отображается на верхнем слое вместе с псевдоэлементом :: backdrop. Взаимодействие с элементами вне диалогового окна заблокировано, и с внешним контентом невозможно взаимодействовать.

dialog Элементы DOM также имеют следующие свойства значений:

  • open - логическое свойство, отражающее атрибут open HTML, который указывает, открыт ли диалог для взаимодействия.
  • returnValue - строковое свойство, которое устанавливает и возвращает возвращаемое значение для диалога. Мы можем присвоить ему значение напрямую или передать аргумент методу close, чтобы установить это свойство.

Нам не нужно было вызывать метод close(), чтобы закрыть диалоговое окно. Достаточно иметь кнопку. Кроме того, нам не нужно нажимать кнопку, чтобы закрыть диалоговое окно, мы также можем нажать клавишу Esc на клавиатуре, чтобы сделать это.

Обратите внимание, что элемент dialog не включен по умолчанию в Firefox. Чтобы использовать его в Firefox, мы должны установить dom.dialog_element.enabled на true на странице about:config. В Chrome эта функция включена по умолчанию. Затем, если мы нажмем только что созданную кнопку «Открыть диалог», мы увидим диалоговое окно собственного браузера. Затем, если мы нажмем клавишу Esc, чтобы закрыть диалоговое окно, будет запущено событие cancel и будет запущена функция обработчика событий, которую мы назначили для dialog.oncancel. Параметр event функции обработчика событий получит объект Event, который содержит информацию об источнике события cancel, которое является нашим элементом dialog. Таким образом, в нашем console.log выводе мы получили бы что-то вроде следующего:

bubbles: false
cancelBubble: false
cancelable: true
composed: false
currentTarget: null
defaultPrevented: false
eventPhase: 0
isTrusted: true
path: (5) [dialog#dialog, body, html, document, Window]
returnValue: true
srcElement: dialog#dialog
target: dialog#dialog
timeStamp: 1102.240000385791
type: "cancel"

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

oncanplay

Мы можем назначить функцию обработчика события свойству oncanplay, когда мы хотим обработать событие canplay. Событие canplay запускается, когда пользовательский агент может воспроизводить мультимедиа, но оценивает, что было загружено недостаточно данных для воспроизведения мультимедиа до конца без необходимости останавливаться для дальнейшей буферизации контента. Например, мы можем использовать его для видео, чтобы увидеть, загружено ли достаточно частей видео для воспроизведения до конца, мы можем сначала добавить элемент видео в HTML-код:

<video width="320" height="240" controls id='video'>
  <source src="https://sample-videos.com/video123/mp4/240/big_buck_bunny_240p_30mb.mp4" type="video/mp4">
</video>

Затем в наш код JavaScript мы можем добавить следующий код, чтобы проверить, достаточно ли загружено видео для воспроизведения:

const video = document.getElementById('video');
video.oncanplay = (event) => {
  console.log(event);
}

Мы также можем прикрепить прослушиватель событий canplay, используя метод addEventListener на узле видео DOM, как в следующем коде:

const video = document.getElementById('video');
video.addEventListener('canplay', (event) => {
  console.log(event);
});

В любом случае, мы можем проверить, было ли загружено достаточное количество частей мультимедиа для его завершения, используя свойство readyState элемента мультимедиа, которое включает элементы видео и аудио. readyState может иметь одно из следующих возможных значений:

  • Константа HAVE_NOTHING или число 0 - информации о медиаресурсе нет
  • Константа HAVE_METADATA или число 1 - загружено достаточно частей медиаресурса, чтобы инициализировать атрибуты метаданных. Поиск не вызовет исключения в этом состоянии или за его пределами.
  • Константа HAVE_CURRENT_DATA или число 2 - для текущей позиции воспроизведения доступно достаточно данных, но недостаточно для фактического воспроизведения более одного кадра.
  • Константа HAVE_FUTURE_DATA или число 3 - загружается достаточно данных для текущей позиции воспроизведения, а также достаточно данных для воспроизведения хотя бы немного в будущем, что означает как минимум 2 кадра видео.
  • Константа HAVE_ENOUGH_DATA или число 4 - данных достаточно и скорость загрузки достаточно высока, чтобы мультимедиа можно было воспроизводить до конца без перерывов.

Мы можем получить свойство readyState нашего видеоэлемента, написав следующий код:

const video = document.getElementById('video');
video.oncanplay = (event) => {
  console.log(event.target.readyState);
}

Если наше видео можно воспроизводить полностью, у нас должно быть 4 входа в console.log вывод.

Свойство onfocus объекта document позволяет нам установить обработчик события для focus события. Мы можем использовать его, чтобы проверить, находится ли наш элемент в фокусе или нет. Чтобы сфокусировать не входные элементы, мы можем добавить к нему атрибут tabindex. Чтобы справиться с ситуацией, когда элемент dialog закрыт, мы можем использовать обработчик события oncancel. Соответствующее событие, которое является событием cancel, запускается при нажатии клавиши Esc на клавиатуре. Мы можем назначить функцию обработчика событий свойству oncanplay, когда мы хотим обработать событие canplay, которое является событием, которое запускается, когда пользовательский агент может воспроизводить мультимедиа, но оценивает, что было загружено недостаточно данных для воспроизведения мультимедиа до его конец без необходимости останавливаться для дополнительной буферизации содержимого. Мы можем проверить, достаточно ли загружено носителем данных для полного воспроизведения, проверив readyState в элементе мультимедиа.