В 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
в элементе мультимедиа.