Обработчики событий JavaScript - события клавиатуры и загрузки

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

События, происходящие с элементами DOM, можно обрабатывать, назначая обработчик свойствам объекта DOM для соответствующих событий. В этой статье мы рассмотрим, как использовать свойства onkeydown и onkeypress редактируемого элемента ввода, а также свойство onload для любого элемента DOM. Мы также рассмотрим свойство onloadeddata для таких мультимедийных элементов, как audio и video.

`onkeydown`

Мы можем установить функцию обработчика событий для свойства onkeydown входного элемента DOM для обработки события keydown. Событие keydown запускается при нажатии любой клавиши независимо от того, создают ли они символьное значение. Событие keydown предоставляет код, указывающий, какая клавиша нажата, а событие keypress предоставляет вводимый символ. Например, буква «a» в нижнем регистре будет сообщаться как код клавиши 65 с keydown, а код символа 97 будет сообщаться с помощью keypress. keypress устарел, поэтому его нельзя использовать в производственном коде.

В Firefox, начиная с версии 65, событие keydown также запускается во время композиции IME, чтобы улучшить кроссбраузерность для китайских, японских и корейских пользователей. Мы можем игнорировать событие keydown во время композиции IME, мы можем проверить свойство isComposing объекта event, предоставленного обработчиком события keydown. Например, мы можем написать:

const input = document.querySelector('input');
input.onkeydown =  event => { 
  if (event.isComposing || event.keyCode === 229) {
    return;
  }
};

Каждый раз, когда мы вводим китайский, японский или корейский язык, свойство isComposing будет иметь значение true, а свойство keyCode будет иметь значение 229.

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

<input type="text" id="input" required>
<p id="log"></p>

Затем в соответствующем коде JavaScript мы можем написать следующий код для присоединения функции обработчика событий для события keydown, установив свойство onkeydown нашего элемента input. Функция обработчика событий регистрирует код клавиши, которая была нажата.

const input = document.querySelector('input');
const log = document.getElementById('log');
input.onkeydown =  e => { 
 log.textContent += ` ${e.code}`;
};

У нас должно получиться что-то вроде:

KeyE KeyR KeyF KeyG KeyT KeyG KeyT KeyG KeyH KeyH KeyF KeyV KeyG KeyB KeyG KeyB

в элементе с ID log.

onkeyup

Свойство onkeyup элемента ввода позволяет нам присоединить функцию обработчика событий для обработки события keyup. Событие keyup запускается, когда пользователь отпускает ранее нажатую клавишу.

Событие keyup предоставляет код, указывающий, какая клавиша нажата, в то время как событие keypress предоставляет вводимый символ. Например, буква «a» в нижнем регистре будет отображаться как код клавиши 65 с keyup, а код символа 97 будет сообщаться с помощью keypress.

В Firefox, начиная с версии 65, событие keyup также запускается во время композиции IME, чтобы улучшить кроссбраузерность для пользователей из Китая, Японии и Кореи. Мы можем игнорировать событие keyup во время создания IME, мы можем проверить свойство isComposing объекта event, предоставленного обработчиком событий keyup. Например, мы можем написать:

const input = document.querySelector('input');
input.onkeyup =  event => { 
  if (event.isComposing || event.keyCode === 229) {
    return;
  }
};

<input type="text" id="input" required>
<p id="log"></p>

const input = document.querySelector('input');
const log = document.getElementById('log');
input.onkeyup =  e => { 
 log.textContent += ` ${e.code}`;
};

У нас должно получиться что-то вроде:

KeyD KeyF KeyG KeyT KeyH KeyG KeyT

в процессе

Свойство onload элемента DOM позволяет нам установить для него функцию обработчика событий для обработки события load, которое запускается при загрузке любого элемента. Он запускается в конце процесса загрузки документа. Все объекты в документах должны находиться в DOM при запуске события load, включая все изображения, сценарии, ссылки и подкадры.

Также есть DOMContentLoaded и DOMFrameContentLoaded, которые запускаются после загрузки DOM страницы, но не дожидаются завершения загрузки других ресурсов.

Например, мы можем использовать его для запуска некоторого кода после загрузки элемента window или img, сначала написав HTML-код:

<!DOCTYPE html>
<html>
  <head>
    <title>Onload</title>
  </head>
  <body>
    <div>Text</div>
    <img
      src="https://images.unsplash.com/photo-1503066211613-c17ebc9daef0?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1500&q=80"
    />
    <script src="main.js"></script>
  </body>
</html>

Затем мы можем написать соответствующий код JavaScript:

const img = document.querySelector("img");
img.onload = () => {
  console.log("img loaded");
};
window.onload = () => {
  console.log("window loaded");
};

Тогда мы должны увидеть:

img loaded
window loaded

Когда мы загружаем страницу.

onloadeddata

Событие loadeddata запускается, когда завершается загрузка первого кадра мультимедиа. Это применимо к мультимедийным элементам, таким как audio и video. Чтобы обработать это событие, мы можем установить свойство onloadeddata медиа-элемента для запуска функции обработчика событий, когда это событие запускается.

Например, мы также можем установить свойство onloadeddata в следующем коде. Сначала мы добавляем HTML-код для элемента video:

<video src='https://sample-videos.com/video123/mp4/240/big_buck_bunny_240p_30mb.mp4'></video>

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

const video = document.querySelector('video');
video.onloadeddata = () => {
 console.log('video loaded');
}

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

const video = document.querySelector('video');
video.onloadeddata = (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, мы можем посмотреть предыдущие статьи.

Мы можем установить функцию обработчика событий для свойства onkeydown входного элемента DOM для обработки события keydown. Событие keydown запускается при нажатии любой клавиши, независимо от того, создают ли они символьное значение. Событие keydown предоставляет код, указывающий, какая клавиша нажата. Свойство onkeyup элемента ввода позволяет нам присоединить функцию обработчика событий для обработки события keyup. Событие keyup запускается, когда пользователь отпускает ранее нажатую клавишу. Объект event предоставляет ту же информацию, что и обработчик событий keydown.

Событие loadeddata запускается, когда завершается загрузка первого кадра мультимедиа, такого как audio и video. Чтобы обработать это событие, мы можем установить свойство onloadeddata медиа-элемента для запуска функции обработчика событий, когда это событие запускается.

Обработчики событий JavaScript - события клавиатуры и загрузки

onkeydown

onkeyup

в процессе

onloadeddata

Вопросы по теме

`onkeydown`