Событийная модель в html

События

События - это такой механизм, при котором система генерирует сигнал, после чего срабатывает определенный код.

События запускаются внутри браузера и как правило прикрепляются к определенному элементу.

Код, который выполняется при наступлении события объявлен в обработчике.

Обработчик события - это функция, вызываемая при возникновении события.

Обработчики события могут быть заданы для многих объектов, они работают как слушатели события, не фиксирующие события для объекта для которого они указаны.

Обработчик события состоит из:

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

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

Может показаться, что тема событий относится исключительно к javascript, это заблуждение, она тесно связана с html.

Это обзорная статья, где описываются только базовые возможности

Цель события Event Target - это объект, который может событие получить и отреагировать на него.

Каждый объект Event Target для которого указан один или несколько обработчиков имеет карту обработчиков событий.

Карта обработчика события должна быть инициализирована так, чтобы она содержала запись для каждого обработчика, для которого этот объект является целевым.

Порядок записей в карте обработчика события может быть произвольным, и не может быть как-то воспроизведен.

Базовые определения

• Событие (Event) - Действие, которое произошло на странице.
• Обработчик события (Event Handler) - Это функция, вызываемая при возникновении события, когда событие произошло.
• Объект События (Event Object) - Специальный объект который передается в функцию обработчика, и содержит полезную информацию о событии.
• Слушатель события (Event Listener) - Функция, которая ожидает наступление события, на конкретном элементе.
• Цель события (Event Target): Элемент, на котором произошло событие (например, кнопка при клике).
• Карта обработчика событий Это javaScript объект, который выступает в роли “справочника” или “списка инструкций” для целевого элемента.

Какие события могут происходить

• Клик мышью на определенный элемент.
• Навести курсор на определенный элемент.
• Изменение размера окна браузера.
• Завершение загрузки страницы.
• Отправка данных формы
• Воспроизведение видео
• ...

Их различают по типам, мы пройдемся по ним ниже в статье.

Определение обработчика события через on.

Событие можно определить через атрибут on[...], где имя атрибута совпадает с именем обработчика событий.

Большинство элементов имеют события с приставкой on

Способ задания события через on считается устаревшим и не рекомендуется к использованию

Атрибуты обработчика события должны содержать корректный javascript код.

По умолчанию все атрибуты событий c приставкой on = null и не обрабатываются.

Например

<div class="div">div</div>

<script>
  console.log(document.querySelector('.div').onclick); // null, обработчик не задан, событие не выполняется
</script>

Если задать обработчик, ситуация меняется появляться некая функция. Но ничего не происходит

<div class="div" onclick="">div</div>

<script>
  console.log(document.querySelector('.div').onclick); //function onclick(event)
</script>

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

<div class="div" onclick="console.log(123);">div</div>

<script>
  console.log(document.querySelector('.div').onclick); // 123
</script>

onclick значит, клик по элементу с выполнением указанного кода.

Для более удобного написания кода, рекомендуется создать функцию и запускать ее.

<div class="div" onclick="superClick()">div</div>

<script>
  function superClick() {
    console.log(123);
  }
  console.log(document.querySelector('.div').onclick); // 123
</script>

Обратим так же внимание как нужно присвоить функцию. Без скобок.

<div class="div">div</div>

<script>
  function superClick() {
    console.log(123);
  }
  console.log(document.querySelector('.div').onclick = superClick); // 123
</script>

Обратим внимание ONclick и onclick будут работать, но правильно указывать onclick

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

<div class="div">div</div>

  <script>
    console.log(document.querySelector('.div').onclick = function () {console.log(123);}); // 123
  </script>

Таким образом все у нас перешло в javascript.

Обработчик всегда хранится в свойстве объекта onclick, а атрибут это один из способов его инициализации.

Есть еще проблема, если попробовать задать несколько обработчиков

<div class="div">div</div>

<script>
  console.log(document.querySelector('.div').onclick = function () {console.log(123);}); // ?
  console.log(document.querySelector('.div').onclick = function () {console.log(567);}); // 567
</script>

Последний результат перезапишет первый. Даже если это сделать так

<div class="div" onclick="console.log(123)">div</div>

<script>
  console.log(document.querySelector('.div').onclick = function () {console.log(567);}); // 567
</script>

Если обрабатывать событие уже не нужно, просто присвойте null.

<div class="div">div</div>

<script>
  console.log(document.querySelector('.div').onclick = function () {console.log(567);}); // ?
  console.log(document.querySelector('.div').onclick = null); // null
</script>

Если нужно понять на каком элементе сработало событие, доступ к нему можно получить через this.

<div class="div" onclick="console.log(this)">div</div>

Или так

<div class="div">div</div>

<script>
  console.log(document.querySelector('.div').onclick = function () {console.log(this);}); // div
</script>

Если присвоим атрибут onlick через setAttribute, это сработает, но поведение такого присвоения непредсказуемо.

<div class="div">div</div>

<script>

  document.querySelector('.div').setAttribute('onclick', "console.log(678)");
  console.log(document.querySelector('.div').onclick) // 678
</script>

Главное тут помнить, что регистрация слушателя события происходит только в случае, если значение обработчика не равно null

Определение обработчика с помощью метода addEventListener()

С помощью функции addEventListener можно навесить сразу несколько обработчиков событий, в отличие от ограничения с on....

Метод addEventListener() устанавливает функцию, которая будет вызываться когда указанное событие будет достигать цели.

Метод вызывается у DOM элемента.

addEventListener является рекомендуемым способом регистрации события на элементе

В базовом использовании

<div class="div">div</div>

<script>
  document.querySelector('.div').addEventListener('click', () => {console.log(123)}); // 123
</script>

Можем навесить на один элемент сразу несколько обработчиков

<div class="div">div</div>

<script>
  let d = document.querySelector('.div');
  d.addEventListener('click', () => {console.log(123)}); // 123
  d.addEventListener('click', () => {console.log(456)}); // 456
  d.addEventListener('click', () => {console.log(789)}); // 789
</script>

В данном случае они будут вызваны последовательно.

Если провести аналогию с методом регистрации обработчика в атрибуте on, то при выполнении примера

<div class="div">div</div>

<script>
  let d = document.querySelector('.div');
  d.addEventListener('click', () => {console.log(123)}); // 123
  console.log(d.onclick); // null
</script>

Казалось бы, событие одно и тоже, но onclick обработчик равен null. Чтобы это понять рассмотрим еще пример

<div class="div">div</div>

<script>
  let d = document.querySelector('.div');
  d.addEventListener('click', () => {console.log(1)}, false); // Будет выполнен первым
  d.onclick = (e) => {console.log(2)}; // Никогда не будет выполнен
  d.addEventListener('click', () => {console.log(3)}, false); // Будет выполнен вторым
  d.addEventListener('click', () => {console.log(4)}, false); // Будет выполнен третьим
  d.onclick = null; // Удаление обработчика
  d.onclick = (e) => {console.log(5)}; // Будет выполнен четвертым
</script>

В итоге получается, что обработчик console.log(2) был удален и не будет выполнен, но если код переписать так

<div class="div">div</div>

  <script>
    let d = document.querySelector('.div');
    d.addEventListener('click', () => {console.log(1)}, false);
    d.onclick = (e) => {console.log(2)};
    d.addEventListener('click', () => {console.log(3)}, false);
    d.addEventListener('click', () => {console.log(4)}, false);
  </script>

Последовательность выполнения будет такой, какую мы ожидаем, но так лучше не делать так будет путать.

1
2
3
4

Почему так происходит. По принципу браузер выполняет обработчики событий в том порядке, в котором они были добавлены к элементу.

То есть очередь выполнения будет такой console.log(1) => console.log(2) => console.log(3) => console.log(4)

Как и в случае с on атрибутами, вызывается функция обработчик при наступлении события, внутрь функции передается специальный объект события, который содержит информацию о нем.

<div class="div">div</div>

<script>
  let d = document.querySelector('.div');
  d.addEventListener('click', (e) => {
    console.log(e.target); // Элемент на котором сработало событие
  });
</script>

Так же можно вынести функционал в отдельную функцию

<div class="div">div</div>

<script>
  let d = document.querySelector('.div');
  function target(e) {
    console.log(e.target); // div
  }
  d.addEventListener('click', target);
</script>

И назначить сразу несколько обработчиков в цикле

<div class="div">
  <p class="p">1</p>
  <p class="p">2</p>
  <p class="p">3</p>
  <p class="p">4</p>
  <p class="p">5</p>
  <p class="p">6</p>
</div>

  <script>
    let d = document.querySelectorAll('.p');

    function target(e) {
      console.log(e.target.innerHTML); // будет выведен текст элемента в зависимости на что кликнули
    }
    for (let i = 0; i < d.length; i++) {
      d[i].addEventListener('click', target);
    }
  </script>

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

<div class="div">
    div
  </div>

<script>
  let d = document.querySelector('.div');

  function target(e) {
    console.log(e.target);
  }

  d.addEventListener('click', target);
  d.removeEventListener('click', target); // Обработчик удален
</script>

Есть так же события которые например дают знать, а сформировано ли вообще DOM дерево.

document.addEventListener("DOMContentLoaded", function(e) {
    console.log(e.target);
});

Так же внутрь addEventListener можно передать объект и класс, что может упростить поддержку сложного кода.

Распространение события

Во время возникновения события, объект события сначала погружается, достигает цели, всплывает.

То есть когда мы кликнули по кнопке, событие происходит на самом элементе, родительских элементах, то есть три фазы

• Фаза погружения (Capturing Phase) Событие движется от window к целевому элементу (сверху вниз по DOM).
• Фаза цели (Target Phase) Событие достигает целевого элемента.
• Фаза всплытия (Bubbling Phase) Событие движется обратно от целевого элемента к window (снизу вверх).

Событие можно представить как некий ползунок бегающий по элементам и проверяющий подписки на событие. При этом движение происходит по родственным узлам.

Рассмотрим пример, навесим события на все вложенные элементы

<div class="div1">
    div1
    <div class="div2">
      div2
      <div class="div3">
        div3
        <div class="outher">
          <button class="button">Кнопка</button>
        </div>
      </div>
    </div>
  </div>

  <script>
    let d1 = document.querySelector('.div1');
    let d2 = document.querySelector('.div2');
    let d3 = document.querySelector('.div3');
    let d4 = document.querySelector('.outher');
    let d5 = document.querySelector('.button');

    function target(e) {
      console.log(e.currentTarget);
    }

    d1.addEventListener('click', target);
    d2.addEventListener('click', target);
    d3.addEventListener('click', target);
    d4.addEventListener('click', target);
    d5.addEventListener('click', target);
  </script>

Здесь вроде бы все очевидно, событие сработает на каждом элементе, но в первую очередь на самой кнопке.

Порядок вывода в консоль будет таким от цели до последнего элемента:

<button class="button">
<div class="outher">
<div class="div3">
<div class="div2">
<div class="div1">

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

window → document → <div> → <p> → <button> кликаем по кнопке

Фаза погружения (захвата) (Capturing Phase)

Событие идет сверху вглубь до элемента.

window → document → <html> → <body> → <div> → <p> → <button>.

Эта фаза редко используется и нужна, чтобы поменять порядок срабатывания события на высоком уровне.

Чтобы ее включить нужно передать в метод addEventListener третий параметр useCapture = true. или {capture: true}

element.addEventListener('click', handler, true)
element.addEventListener('click', handler, {capture: true})

Вернемся к примеру выше и поменяем порядок срабатывания событий в обратную строну

<div class="div1">
  div1
  <div class="div2">
    div2
    <div class="div3">
      div3
      <div class="outher">
        <button class="button">Кнопка</button>
      </div>
    </div>
  </div>
</div>

<script>
  let d1 = document.querySelector('.div1');
  let d2 = document.querySelector('.div2');
  let d3 = document.querySelector('.div3');
  let d4 = document.querySelector('.outher');
  let d5 = document.querySelector('.button');

  function target(e) {
    console.log(e.currentTarget);
  }
  
d1.addEventListener('click', target,true);
d2.addEventListener('click', target,true);
d3.addEventListener('click', target,true);
d4.addEventListener('click', target,{capture: true});
d5.addEventListener('click', target);
</script>

Теперь оно будет таким:

<div class="div1">
<div class="div2">
<div class="div3">
<div class="outher">
<button class="button">

То есть даже если мы кликнули по кнопке .button сначала оно сработает на элементе .div1 и далее по дереву ниже.

Это достигается благодаря параметру {capture: true}, что указывает как будут работать события на вложенных элементах. Режим распространения событий определяет порядок, в котором элементы получают событие.

Фаза цели (Target Phase)

Событие достигло целевого элемента и сработают все обработчики навещенные на кнопку. Например, их три.

<div class="div1">
    div1
    <div class="div2">
      div2
      <div class="div3">
        div3
        <div class="outher">
          <button class="button">Кнопка</button>
        </div>
      </div>
    </div>
  </div>

  <script>
    let d1 = document.querySelector('.div1');
    let d2 = document.querySelector('.div2');
    let d3 = document.querySelector('.div3');
    let d4 = document.querySelector('.outher');
    let d5 = document.querySelector('.button');

    function target(e) {
      console.log(e.currentTarget);
    }
    
    d5.addEventListener('click', function () {console.log('button click 1')});
    d5.addEventListener('click', function () {console.log('button click 2')});
    d5.addEventListener('click', function () {console.log('button click 3')});
  </script>

button click 1
button click 2
button click 3

Менять порядок срабатывания мы уже умеем, например так

d5.addEventListener('click', function () {console.log('button click 1')});
d5.addEventListener('click', function () {console.log('button click 2')},true);
d5.addEventListener('click', function () {console.log('button click 3')});

button click 2
button click 1
button click 3

Почему так происходит, так как обработчик с button click 2 срабатывает в фазе перехвата, что перед фазой всплытия

• button click 2 - сработает в фазе перехвата
• button click 1 - сработает по умолчанию для фазы всплытия
• button click 3 - сработает по умолчанию для фазы всплытия

Фаза всплытия (Bubbling Phase)

Это самая часто используемая фаза событий.

После того как событие достигло цели оно начинает всплывать, по той же цепочке, но в обратном порядке

<button> → <p> → <div> → <body> → <html> → document → window и срабатывают все обработчики всех элементов на своем пути.

Здесь так же важно понимать про объект Event, он всегда передается в функцию обработчик и содержит информацию, что произошло.

• event.type - тип события click
• event.target - элемент на котором произошло событие, он не меняется во всех фазах. В данном случае 5 раз он будет равен <button class="button">.
• event.currentTarget - элемент на котором в данный момент висит обработчик события, меняется по мере продвижения.
• e.stopPropagation(); - если нужно сделать так, чтобы событие дальше не поднималось
• event.preventDefault() - отменяет действие по умолчанию
• this - элемент до которого дошло событие

Всплывают почти все события.

Делегирование событий

Идея такая, у нас есть много однотипных элементов.

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

Рассмотрим пример

<ul class="ul"></ul>

  <script>
    let ul = document.querySelector('ul');

    for (i = 0; i < 1000; i++) {
      let li = document.createElement('li')
      li.innerHTML = i;
      li.setAttribute('data-id', i);
      ul.appendChild(li);
    }

    document.body.appendChild(ul);

    ul.addEventListener('click', function (e) {
      console.log(e.target);
    })
  </script>

В данном случае мы сформировали 1000 элементов li. Но обработчик события мы навесили на ul. Использую механизм всплытия событий можем контролировать этот процесс.

Типы событий

• UIEvent - события связанные с пользовательским интерфейсом
• MouseEvent - события мыши
• KeyboardEvent - события клавиатуры
• WheelEvent - колесико мыши
• InputEvent - пользовательский ввод

Виды событий

Теперь перечислим какие события бывают

События, связанные с окном браузера и печатью

onafterprint (для <body>)

Что значит: Срабатывает после того, как документ был отправлен на печать (или после того, как пользователь закрыл диалоговое окно печати, не печатая). Пример использования: Часто используется для возврата страницы к её исходному виду, если перед печатью с помощью onbeforeprint применялись специальные стили (например, для скрытия меню или изменения шрифтов).

onbeforeprint (для <body>)

Что значит: Срабатывает перед тем, как пользователь инициирует печать документа (например, через Ctrl+P или меню браузера). Пример использования: Идеально подходит для применения специальных стилей для печати, таких как скрытие навигационных панелей, рекламных блоков и изменение цветовой схемы для экономии чернил.

onbeforeunload (для <body>)

Что значит: Срабатывает, когда пользователь собирается покинуть страницу (закрыть вкладку, перейти по другой ссылке). Позволяет показать пользователю диалоговое окно с подтверждением. Пример использования: Используется для предупреждения о потере несохраненных данных в формах или онлайн-редакторах. Например: “Вы уверены, что хотите уйти? Все несохраненные изменения будут потеряны”.

onhashchange (для <body>)

Что значит: Срабатывает, когда изменяется “якорная” часть URL (все, что идет после символа #). Пример использования: Основа для создания одностраничных приложений (SPA). Позволяет отслеживать переходы между разделами сайта без перезагрузки всей страницы и обновлять контент динамически.

onlanguagechange (для <body>)

Что значит: Срабатывает, когда пользователь меняет предпочитаемый язык в настройках браузера. Пример использования: Может использоваться для автоматического обновления интерфейса сайта на новый язык без перезагрузки страницы.

onmessage (для <body>)

Что значит: Срабатывает, когда текущее окно получает сообщение из другого окна или фрейма (например, с помощью postMessage). Пример использования: Используется для безопасной коммуникации между окнами разных доменов или между родительским окном и <iframe>.

onmessageerror (для <body>)

Что значит: Срабатывает, когда текущее окно получает сообщение, которое не может быть обработано (например, из-за ошибки сериализации данных). Пример использования: Для обработки ошибок при межоконном взаимодействии.

onoffline / ononline (для <body>)

Что значит: onoffline срабатывает, когда браузер теряет подключение к сети. ononline - когда подключение восстанавливается. Пример использования: Позволяет создать веб-приложения, которые работают в офлайн-режиме, уведомляя пользователя о смене статуса соединения.

onpagehide / onpageshow (для <body>)

Что значит: Связаны с поведением страницы при навигации. onpageshow срабатывает каждый раз, когда страница загружается (в том числе из кэша браузера). onpagehide - когда пользователь уходит со страницы (в том числе при ее сохранении в кэш). Пример использования: onpageshow можно использовать для инициализации состояния страницы каждый раз, когда она становится видимой. onpagehide - для сохранения данных перед уходом.

onpagereveal / onpageswap (для <body>)

Что значит: Новые события для API переходов между страницами. onpageswap срабатывает перед уходом со старой страницы, а onpagereveal - после полной загрузки и отображения новой страницы в том же вкладке. Пример использования: Позволяют создавать плавные анимированные переходы между разными документами, улучшая пользовательский опыт.

onpopstate (для <body>)

Что значит: Срабатывает, когда активная запись истории браузера изменяется (например, при нажатии кнопок “Назад” или “Вперед”). Пример использования: Как и onhashchange, это ключевое событие для SPA, позволяющее синхронизировать состояние приложения с историей навигации браузера.

onrejectionhandled / onunhandledrejection (для <body>)

Что значит: Связаны с обработкой ошибок в промисах (Promises). onunhandledrejection срабатывает, когда промис был отклонен (rejected), но для ошибки не был предоставлен обработчик .catch(). onrejectionhandled - когда обработчик для такой ошибки все-таки находится позже. Пример использования: Глобальная обработка необработанных ошибок в асинхронном коде, что полезно для логирования и отладки.

onstorage (для <body>)

Что значит: Срабатывает, когда хранилище (localStorage или sessionStorage) было изменено из другого документа (другой вкладки или окна того же домена). Пример использования: Для синхронизации состояния между несколькими открытыми вкладками вашего приложения. Например, если пользователь вошел в систему в одной вкладке, он автоматически войдет и в других.

onunload (для <body>)

Что значит: Срабатывает, когда страница выгружается (пользователь уходит с нее). Пример использования: Раньше использовался для очистки данных перед уходом, но сейчас onbeforeunload является более надежным для предупреждения о потере данных, так как onunload может не сработать, если страница закрывается принудительно.

События мыши

onclick

Что значит: Срабатывает при однократном нажатии левой кнопкой мыши на элемент.

ondblclick

Что значит: Срабатывает при двойном нажатии левой кнопкой мыши на элемент.

onmousedown

Что значит: Срабатывает в момент, когда пользователь нажал кнопку мыши, но еще не отпустил ее.

onmouseup

Что значит: Срабатывает в момент, когда пользователь отпустил ранее нажатую кнопку мыши.

onmouseover

Что значит: Срабатывает, когда курсор мыши заходит на пределы элемента или его дочерних элементов.

onmouseout

Что значит: Срабатывает, когда курсор мыши уходит с пределов элемента или его дочерних элементов.

onmouseenter

Что значит: Похоже на onmouseover, но срабатывает только когда курсор заходит именно на этот элемент, а не на его дочерние. Не “всплывает”.

onmouseleave

Что значит: Похоже на onmouseout, но срабатывает только когда курсор уходит именно с этого элемента, а не на его дочерние. Не “всплывает”.

onmousemove

Что значит: Срабатывает постоянно, пока курсор мыши перемещается в пределах элемента.

onwheel

Что значит: Срабатывает при прокрутке колесика мыши над элементом.

onauxclick

Что значит: Срабатывает при нажатии любой вспомогательной кнопки мыши (обычно это средняя кнопка или правая кнопка, если она не перехвачена событием oncontextmenu).

oncontextmenu

Что значит: Срабатывает при нажатии правой кнопки мыши, перед тем как появится контекстное меню. Позволяет отменить стандартное меню и показать свое собственное.

События клавиатуры

onkeydown

Что значит: Срабатывает в момент, когда пользователь нажал клавишу на клавиатуре.

onkeyup

Что значит: Срабатывает в момент, когда пользователь отпустил ранее нажатую клавишу.

onkeypress

Что значит: Срабатывает, когда нажатая клавиша генерирует символ (т.е. не сработает на Ctrl, Alt, Shift). Считается устаревшим, рекомендуется использовать onkeydown.

События форм и ввода данных

oninput

Что значит: Срабатывает немедленно каждый раз, когда значение элемента изменяется (например, при вводе текста в <input> или <textarea>). Пример использования: Для валидации данных в реальном времени или для реализации полей с автодополнением.

onchange

Что значит: Срабатывает, когда значение элемента было изменено и элемент потерял фокус (например, пользователь ввел текст в поле и кликнул в другом месте). Пример использования: Классическое событие для полей форм, чтобы обработать введенные данные после завершения ввода.

onbeforeinput

Что значит: Срабатывает перед тем, как значение элемента будет изменено (например, перед тем, как введенный символ появится в поле). Пример использования: Позволяет перехватить и, при необходимости, изменить или отменить вводимый символ до его отображения.

onfocus

Что значит: Срабатывает, когда элемент получает фокус (например, когда пользователь кликает на поле ввода или переходит на него с помощью клавиши Tab).

onblur

Что значит: Срабатывает, когда элемент теряет фокус.

onsubmit

Что значит: Срабатывает при попытке отправить форму. Пример использования: Для финальной валидации всех полей формы перед отправкой на сервер. Если обработчик вернет false, отправка будет отменена.

onreset

Что значит: Срабатывает, когда форма сбрасывается к начальному состоянию (например, по нажатию на кнопку <input type="reset">).

oninvalid

Что значит: Срабатывает, если поле формы не проходит валидацию (например, обязательное поле (required) пустое или введен email в неверном формате) при попытке отправки формы.

onformdata

Что значит: Срабатывает перед отправкой формы, представляя данные формы в виде объекта FormData. Пример использования: Позволяет легко перехватить и модифицировать данные формы перед отправкой через fetch API.

onselect

Что значит: Срабатывает, когда пользователь выделяет текст внутри элемента (<input>, <textarea>).

События drag-and-drop (перетаскивания)

ondragstart

Что значит: Начало перетаскивания элемента.

ondrag

Что значит: Срабатывает постоянно, пока элемент перетаскивается.

ondragend

Что значит: Завершение перетаскивания (как успешного, так и отмененного).

ondragenter

Что значит: Перетаскиваемый элемент заходит на пределы элемента-цели.

ondragover

Что значит: Перетаскиваемый элемент движется над элементом-целью. Событие срабатывает очень часто. Чтобы разрешить “бросок” (drop), нужно отменить стандартное действие этого события (event.preventDefault()).

ondragleave

Что значит: Перетаскиваемый элемент уходит с пределов элемента-цели.

ondrop

Что значит: Перетаскиваемый элемент “брошен” на элемент-цель.

События буфера обмена

oncopy

Что значит: Срабатывает, когда пользователь инициирует копирование содержимого элемента (Ctrl+C, через меню).

oncut

Что значит: Срабатывает при вырезании содержимого (Ctrl+X).

onpaste

Что значит: Срабатывает при вставке содержимого (Ctrl+V).

Медиа-события (для <audio> и <video>)

• onloadstart: Начало загрузки медиа.
• ondurationchange: Длительность медиа была определена или изменилась.
• onloadedmetadata: Метаданные (длительность, размеры) загружены.
• onloadeddata: Первый кадр медиа загружен.
• oncanplay: Медиа может быть воспроизведено, но, возможно, с остановками для буферизации.
• oncanplaythrough: Медиа может быть воспроизведено до конца без остановок.
• onplay: Воспроизведение начато.
• onplaying: Воспроизведение началось после паузы или буферизации.
• onpause: Воспроизведение приостановлено.
• onended: Воспроизведение завершено.
• onseeking: Начало перемещения по временной шкале (seek).
• onseeked: Перемещение по временной шкале завершено.
• ontimeupdate: Текущее время воспроизведения изменилось (срабатывает регулярно во время проигрывания).
• onratechange: Скорость воспроизведения изменилась.
• onvolumechange: Громкость или статус muted (выкл. звука) изменились.
• onwaiting: Воспроизведение остановлено из-за временной нехватки данных (буферизации).
• onstalled: Попытка загрузить данные не удалась.
• onsuspend: Загрузка данных намеренно приостановлена.
• onemptied: Сетевая ошибка привела к внезапной опустошенности медиа-ресурса.
• onerror: Произошла ошибка при загрузке медиа.
• onabort: Загрузка медиа была прервана.
• onprogress: Браузер загружает данные медиа.

Прочие события

onload

Что значит: Срабатывает, когда элемент (например, изображение, скрипт) или вся страница полностью загружены.

onresize

Что значит: Срабатывает, когда размер окна браузера или элемента изменяется.

onscroll

Что значит: Срабатывает, когда прокручивается полоса прокрутки элемента или страницы.

onscrollend

Что значит: Срабатывает, когда операция прокрутки полностью завершена.

ontoggle

Что значит: Срабатывает, когда элемент <details> (аккордеон) открывается или закрывается.

onbeforetoggle

Что значит: Срабатывает перед тем, как элемент <details> изменит свое состояние (откроется/закроется).

oncancel

Что значит: Срабатывает для <dialog>, когда пользователь отменяет его (например, нажатием Esc).

onclose

Что значит: Срабатывает для <dialog>, когда он закрывается (как программно, так и пользователем).

onerror

Что значит: Срабатывает, когда ресурс (например, <img> или <script>) не может быть загружен.

onsecuritypolicyviolation

Что значит: Срабатывает, когда контент нарушает правила Content Security Policy (CSP).

onbeforematch

Что значит: Срабатывает перед тем, как браузер прокрутит страницу к найденному фрагменту текста (через функцию “Найти на странице”).

oncuechange

Что значит: Срабатывает, когда меняется активный текстовый трек (субтитры) в <video> или <audio>.

oncommand

Что значит: Срабатывает, когда пользователь активирует команду (например, через контекстное меню или кнопку на панели инструментов).

oncontextlost / oncontextrestored

Что значит: Связаны с <canvas>. Срабатывают, когда браузер теряет доступ к графическому контексту canvas (например, из-за нехватки памяти) и когда восстанавливает его.

onslotchange

Что значит: Связано с Web Components. Срабатывает, когда элемент, вставленный в <slot>, изменяется.

Ссылки

• Список событий