Пост

Html. Глобальные атрибуты тегов

Посмотрим какие бывают атрибуты и их предназначение

Опубликовано
Html. Глобальные атрибуты тегов
Html. Глобальные атрибуты тегов
Автор alex
24 мин. чтения
Html. Глобальные атрибуты тегов

Понятие Атрибута

Атрибуты тегов - это специальные слова которые размещаются внутри открывающего тега и используются для настройки или корректировки поведения элемента.

Атрибуты могут быть у большинства элементов html, например таким образом <html lang="ru"></html>

Существуют разные типы атрибутов у разных элементов:

  • Атрибуты всех элементов
  • Глобальные атрибуты - они есть у большинства элементов
  • Атрибуты событий - это специальные атрибуты при возникновении определенных событий будет исполняться javascript код.
  • Атрибуты определенных элементов - разные атрибуты у разных элементов

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

Атрибуты зашиты в api браузера.

Атрибуты всех элементов

Это такие атрибуты которые можно использовать в любом элементе.

class

Атрибут class используется для указания одного или нескольких классов для html элемента.

Преимущественно класс используется для применения css стилей и для манипуляции с элементами через javascript.

С помощью javascript по имени класса удобно искать элементы.

Например, элементу можно назначить несколько классов <div class="c1 c2 c3 c4 c5"></div>.

Особенности имен классов:

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

Примеры правильных названий классов

  • red
  • main-color
  • main_second_color
  • my__custom-super
  • second-title

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

Атрибут id не рекомендуют использовать для стилизации, используйте класс, он для этого и создан.

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

id

Атрибут id определяет уникальный идентификатор для html элемента в рамках всей страницы.

Он используется для:

  • Стилизации через css
  • Доступа к элементу через javascript
  • Используется для создания якоря для ссылок внутри страницы

Элемент может иметь только один id в рамках всего документа.

slot

Атрибут slot используется в контексте Web Components для использования кастомных тегов, но это тема отдельной статьи.

Пример:

1
2
3

<my-component>
  <span slot="my-slot">Этот текст будет вставлен в слот с именем "my-slot"</span>
</my-component>

Глобальные атрибуты

Эти атрибуты позволяют настроить элемент вне зависимости от его типа, они есть у большинства html элементов.

title

Атрибут представляет собой рекомендательную информацию для элемента во всплывающей подсказке.

Основное назначение атрибута title - предоставить дополнительную информацию об элементе при наведении курсора мыши

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

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

1

<p title="Текст с дополнительной информацией."></p>

accesskey

Атрибут accesskey в Html используется для назначения клавиши быстрого доступа к элементу. Это позволяет пользователям активировать или фокусироваться на элементе с помощью сочетания клавиш.

1
2
3

<button accesskey="s">Сохранить</button>
<a href="https://example.com" accesskey="g">Перейти на Example.com</a>
<input type="text" accesskey="e" />

При нажатии alt + s,alt + g,alt + e будет фокусировка на элементе.

Тут нужно учитывать, что значения accesskey должны быть уникальными в рамках одной страницы, и так же нужно понимать, поддержка в разных браузерах и разных операционных системах могут разниться.

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

autocapitalize

Управляет автоматической сменой регистра вводимого текста и, если да, то каким образом.

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

Используется в полях формы.

Основные значения атрибута

  • off или none - атрибут выключен
  • on - включает автоматическое приведение к верхнему регистру. Браузер автоматически преобразует первый символ каждого предложения в верхний регистр.
  • sentences - автоматически приводит к верхнему регистру первую букву каждого предложения.
  • words - автоматически приводит к верхнему регистру первую букву каждого слова.
  • characters - автоматически приводит к верхнему регистру все символы.

Проверять поддержку браузерами этого атрибута.

Атрибут autocapitalize не влияет на поведение браузера при наборе текста на физической клавиатуре.

Результат будет заметен при наборе текста на виртуальной клавиатуре мобильных устройств или голосовом вводе.

При этом происходит изменение регистра букв на самой клавиатуре, а не преобразование введённого текста.

autocorrect

Управляет автоматической коррекцией текста на предмет орфографических ошибок. Это можно применить к элементам, которые имеют редактируемый текст, за исключением элементов <input> с атрибутом type="password", type="email" или type="url".

autofocus

атрибут autofocus позволяет автоматически фокусировать элемент управления при загрузке страницы.

Атрибут поддерживается большинством браузеров, но важно учесть нюансы:

  • Не стоит использовать атрибут на нескольких элементах.
  • На мобильных устройствах атрибут autofocus может не работать.
  • Использование autofocus может быть проблематичным для пользователей, использующих программы чтения с экрана. Убедитесь, что автоматическая фокусировка не мешает навигации по странице.

В любом случае тестируйте работу атрибута на разных устройствах и системах.

1

<input type="text" id="username" name="username" autofocus>

Если атрибут не работает можно рассмотреть альтернативный подход с использованием javascript.

1
2
3

window.onload = function() {
  document.getElementById("username").focus();
};

contenteditable

Атрибут указывающий, должен ли элемент быть редактируемым пользователем. Удобно с помощью скриптов управлять интерфейсом.

Поддерживается всеми современными браузерами. По умолчанию выключен.

1
2
3

<div contenteditable="true">
  Этот текст можно редактировать.
</div>

Так же атрибутом можно управлять через javascript.

Здесь важно учитывать что изменения вводимые пользователем не сохраняются, для этого нужно подключать javascript

События тут тоже работают, но о них мы поговорим отдельно.

dir

Атрибут указывает направление текста элемента.

1
2

<p dir="rtl">Этот текст будет отображаться справа налево.</p>
<p dir="ltr">This text will be displayed from left to right.</p>

draggable

Атрибут указывает ,можно ли перетаскивать элемент с помощью Drag and Drop API. Но для управления процессом перетаскивания используют события, например

  • dragstart : Событие возникает, когда пользователь начинает перетаскивание элемента.
  • drag : Событие возникает во время перетаскивания элемента.
  • dragenter : Событие возникает, когда перетаскиваемый элемент входит в область, куда его можно сбросить.
  • dragover : Событие возникает, когда перетаскиваемый элемент находится над областью, куда его можно сбросить. Это событие необходимо отменить (preventDefault), чтобы разрешить сброс.
  • dragleave: Событие возникает, когда перетаскиваемый элемент покидает область, куда его можно сбросить.
  • drop : Событие возникает, когда пользователь отпускает перетаскиваемый элемент в области, куда его можно сбросить.
  • dragend: Событие возникает, когда процесс перетаскивания завершен.

Об этом мы поговорим отдельно.

enterkeyhint

Подсказывает, какую метку действия (или значок) отображать для клавиши Enter на виртуальных клавиатурах.

Атрибут enterkeyhint предоставляет подсказку для отображения клавиши Enter/Return на виртуальной клавиатуре, особенно на мобильных устройствах. Он позволяет указать, какое действие выполняет клавиша Enter, что может улучшить пользовательский опыт.

Значения атрибута:

  • enter : Ввод новой строки.
  • done : Завершение ввода (например, в форме).
  • go : Переход к следующему полю ввода.
  • next : Переход к следующему полю ввода.
  • previous : Переход к предыдущему полю ввода.
  • search : Запуск поиска.
  • send : Отправка формы или сообщения.

Важно понимать, что не все браузеры поддерживают этот атрибут.

hidden

Атрибут указывает, что элемент еще не или больше не актуален. Делает элемент полностью скрытым, но в разметке он присутствует.

Браузер не будет отображать такие элементы.

Атрибут поддерживает всеми актуальными браузерами.

1

<p hidden>Этот текст не будет отображаться.</p>

hidden является семантическим атрибутом, указывающим, что элемент нерелевантен. Браузер не отображает элемент, и элемент не занимает места на странице, по сути это элемент с display: none

Когда можно использовать hidden.

  • Когда нужно скрыть элемент, не нужен, но может понадобиться позже (например, элементы, которые отображаются только после выполнения определенных действий пользователя).
  • Когда нужно скрыть элемент, который не должен быть виден пользователю, но должен оставаться доступным для программного доступа (например, для JavaScript).

Использование этого атрибута является семантически правильным способом скрыть элемент.

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

inert

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

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

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

Пример:

1
2
3
4
5

<div id="modal" inert>
    <h2>Модальное окно</h2>
    <p>Содержимое модального окна</p>
    <button>Закрыть</button>
</div>

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

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

По итого атрибут inert - это простое и эффективное решение.

При показе элемента <dialog> браузеры добавляет inert его сами.

inputmode

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

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

Значения, которые может принимать элемент:

  • none : Не отображать виртуальную клавиатуру. Может использоваться, когда ввод обрабатывается скриптом.
  • text : Стандартная текстовая клавиатура. Используется по умолчанию, если атрибут не указан.
  • decimal : Клавиатура для ввода десятичных чисел, включая цифры и символы, такие как точка или запятая.
  • numeric : Клавиатура для ввода чисел.
  • tel : Клавиатура для ввода телефонных номеров.
  • search : Клавиатура, оптимизированная для ввода поисковых запросов. Часто включает кнопку "Enter" или "Search".
  • email : Клавиатура, оптимизированная для ввода адресов электронной почты. Обычно включает символы "@" и ".".
  • url: Клавиатура, оптимизированная для ввода URL-адресов. Обычно включает символы "/" и ".".

Что нужно учитывать:

  • Браузеры могут игнорировать подсказки какой тип клавиатуры использовать.
  • Рекомендуется использовать javascript а не полагаться на атрибут.

is

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

Атрибут is используется для расширения встроенных элементов с помощью пользовательских элементов (Custom Elements).

Он позволяет применить поведение и стили пользовательского элемента к стандартному элементу.

Атрибут is позволяет “наследовать” функциональность и стили от пользовательского элемента, сохраняя при этом семантику и встроенные возможности стандартного элемента.

Например, определим кнопку

1

<button is="custom-button">Нажми меня</button>

А теперь исправим ее логику и стили

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

class CustomButton extends HTMLButtonElement {
  constructor() {
    super();
    // Дополнительная логика и стили для пользовательской кнопки
    this.addEventListener('click', () => {
      alert('Кнопка нажата!');
    });
  }

  connectedCallback() {
    // Вызывается при добавлении элемента в DOM
    this.style.backgroundColor = 'lightblue';
    this.style.padding = '10px';
    this.style.border = 'none';
    this.style.borderRadius = '5px';
    this.style.cursor = 'pointer';
  }
}

customElements.define('custom-button', CustomButton, { extends: 'button' });

Теперь кнопки с этим классом всегда будут выглядеть одинаково. Что тут важно

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

microdata

Следующая группа атрибутов относиться к спецификации Microdata, которая предназначена для добавления машиночитаемых данных на веб-страницы, чтобы поисковые системы и другие приложения могли лучше понимать контент

itemid

Уникальный глобальный идентификатор элемента.

itemprop

Используется для добавления свойств к элементу.

itemref

Свойства, которые не являются потомками элемента с атрибутом itemscope, могут быть связаны с элементом с помощью itemref.

itemscope

itemscope (обычно) работает вместе с itemtype, чтобы указать, что html, содержащийся в блоке, относится к определенному элементу.

itemtype

Указывает URL-адрес словаря (например, schema.org), который описывает элемент и контекст его свойств.

lang

Указывает основной язык текстового содержимого элемента.

1

<html lang="ru"></html>

nonce

Криптографическая случайная строка, используемая для разрешения выполнения определенных встроенных

Атрибут nonce используется для повышения безопасности веб-приложений, особенно в контексте Content Security Policy (CSP). Он позволяет браузеру выполнять только те скрипты или стили, которые имеют соответствующий nonce, указанный в CSP.

1
2
3
4
5
6

<script nonce="EDNnf03nceIOfmxp3ONm">
    // Ваш JavaScript код
</script>
<style nonce="EDNnf03nceIOfmxp3ONm">
    /* Ваши стили */
</style>

popover

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

Атрибут popover используется для создания всплывающих окон (popovers) с использованием нативных средств браузера, что упрощает создание интерактивных элементов интерфейса без необходимости использовать JavaScript.

Атрибут popover может принимать несколько значений:

  • auto: (по умолчанию) Позволяет браузеру управлять отображением и скрытием popover. Popover закрывается при клике за его пределами, нажатии клавиши Esc и т.д.
  • manual : Popover отображается и скрывается только с помощью JavaScript.
  • hint : (экспериментальное значение) Указывает, что popover должен отображаться как подсказка.

spellcheck

Указывает, может ли элемент быть проверен на наличие орфографических ошибок или нет.

Используется два параметра true или false.

style

Указывает встроенную информацию о стиле для элемента. Это не рекомендуют использовать.

Атрибут style позволяет применять CSS-стили непосредственно к конкретному элементу.

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

1
2
3

<p style="color: purple; font-size: 18px;">
  Этот параграф также стилизован атрибутом style.
</p>

tabindex

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

Атрибут tabindex используется для управления порядком фокусировки элементов на веб-странице при навигации с помощью клавиши Tab.

Он определяет, может ли элемент получать фокус, и если да, то в каком порядке.

Что иметь в виду:

  • Используйте tabindex="0" для элементов, которые должны быть доступны для фокусировки, но не являются интерактивными по умолчанию.
  • Избегайте использования положительных значений tabindex, чтобы не нарушать естественный порядок навигации.
  • Используйте tabindex="-1" для элементов, которые должны быть сфокусированы только программно.
  • Проверяйте порядок фокусировки на вашем сайте, чтобы убедиться, что он логичен и удобен для пользователей, использующих клавиатуру для навигации.

По умолчанию у всех тегов в порядке навигации стоит значение 0

translate

Указывает, следует ли переводить текстовое содержимое элемента.

Атрибут translate используется для указания, должен ли текст внутри элемента быть переведен локализационными инструментами.

1
2
3

<div translate="yes">
    <p>Этот текст будет переведен.</p>
</div>

Дополнительно об элементе:

  • Атрибут translate является булевым атрибутом, поэтому его можно указывать без значения (translate), что эквивалентно translate="yes".
  • Этот атрибут полезен для управления тем, как автоматические инструменты перевода обрабатывают ваш контент.
  • Использование атрибута translate не гарантирует, что текст будет переведен, а лишь указывает предпочтение. Инструменты перевода могут игнорировать этот атрибут.

writingsuggestions

Указывает, следует ли показывать предложения по написанию.

Атрибут writingsuggestions используется для указания, должен ли браузер предлагать исправления и предложения при вводе текста в элемент, такой как <textarea> или элемент с атрибутом contenteditable.

1

<textarea writingsuggestions="true">Текст с опечатками</textarea>

Что по глобальным атрибутам

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

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

Главное их использовать с умом и в нужном контексте.

data атрибуты

Формирует класс атрибутов, для обмена данными например через javascript.

Атрибут data-* предназначен для хранения произвольных данных, специфичных для страницы или приложения, в элементах.

Все атрибуты начинаются с префикса data, за которым идет имя атрибута, например

1
2
3
4
5

data-test
data-image
data-image-id
data-test-my-super-name
data-testid

Атрибуты могут быть так же без значения.

Не рекомендуется использовать любые кастомные атрибуты которых нет в стандарте

Атрибуты событий

Атрибуты событий — это специальные атрибуты, которые можно использовать в элементах для выполнения JavaScript-кода при возникновении определенных событий.

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

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

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

body

Сначала мы посмотрим обработчики событий у элемента body рассмотренного в статье Html. Базовые теги

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

1
2
3

function eventFunction(name) {
  console.log(name)
}

Использовать будем так

1

<body onafterprint="eventFunction('onafterprint')" onbeforeprint="eventFunction('onbeforeprint')"></body>

onbeforeprint

onbeforeprint - это обработчик события, который позволяет выполнять JavaScript-код непосредственно перед тем, как пользователь инициирует печать страницы. Это может быть полезно для внесения изменений в страницу, которые будут видны только при печати, например, для удаления ненужных элементов, изменения стилей или добавления дополнительной информации.

1

<body onbeforeprint="eventFunction('onbeforeprint')"></body>

onafterprint

1

<body onafterprint="console.log('onafterprint');"></body>

onafterprint срабатывает после завершения печати или закрытия диалогового окна печати.

onbeforeunload

onbeforeunload это обработчик события, который позволяет выполнить JavaScript-код перед тем, как пользователь покинет или перезагрузит страницу. Это может быть полезно для сохранения несохраненных данных, предупреждения пользователя о потере данных или выполнения других действий перед закрытием страницы.

1

<body onbeforeunload="return confirm('Вы уверены, что хотите покинуть страницу?');"></body>

Что нужно учитывать:

  • Сообщение, которое вы возвращаете в обработчике onbeforeunload, может быть проигнорировано браузером или заменено на стандартное сообщение. Это сделано для предотвращения злоупотреблений со стороны сайтов.
  • Не рекомендуется выполнять длительные или сложные операции в обработчике onbeforeunload, так как это может замедлить закрытие страницы.
  • Современные браузеры могут ограничивать или изменять поведение onbeforeunload для улучшения пользовательского опыта и предотвращения навязчивых предупреждений.
  • В некоторых случаях, например, при программном закрытии окна, onbeforeunload может не срабатывать.
  • Используйте onbeforeunload с осторожностью и только в тех случаях, когда это действительно необходимо для предотвращения потери данных.

onhashchange

onhashchange - это событие, которое срабатывает, когда изменяется часть URL после символа # (якорь или хеш).

Особенности:

  • Позволяет создавать одностраничные приложения (SPA), где навигация происходит без перезагрузки страницы.
  • Используется для отслеживания состояния приложения, например, текущего раздела или фильтра.
  • Позволяет пользователям делиться ссылками на конкретные состояния приложения.
1

<body onhashchange="eventFunction('onhashchange')"></body>

Если в адрес добавить хеш в конец #test, то это событие сработает.

onlanguagechange

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

1

<body onlanguagechange="eventFunction('onhashchange')"></body>

onmessage

onmessage относится к обработчику событий, который используется в контексте Web Workers и Server-Sent Events (SSE).

Он определяет функцию, которая будет вызвана, когда веб-воркер получает сообщение или когда браузер получает данные от сервера через SSE.

onmessageerror

onmessageerror — это обработчик событий, который вызывается, когда веб-воркер сталкивается с ошибкой при получении сообщения.

Это событие предоставляет информацию об ошибке, возникшей при десериализации сообщения, отправленного воркеру.

onoffline

onoffline событие, который срабатывает, когда браузер переходит в автономный режим (теряет сетевое соединение).

Это часть API Online/Offline, который позволяет веб-приложениям определять, когда они работают в режиме онлайн или офлайн, и реагировать на изменения состояния подключения.

ononline

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

Это означает, что устройство восстановило подключение к сети после того, как было в автономном режиме.

onpagehide

Событие onpagehide возникает, когда пользователь покидает текущую веб-страницу, но браузер кэширует эту страницу. Это событие полезно для выполнения задач, связанных с сохранением состояния страницы или освобождением ресурсов, когда страница переходит в кэш браузера.

onpagereveal

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

Событие onpagereveal является частью Page Visibility API, который предоставляет информацию о видимости страницы.

onpageshow

onpageshow - это атрибут события, который срабатывает, когда страница отображается, будь то при первой загрузке или при восстановлении из кеша истории (например, при нажатии кнопки “Назад” или “Вперед”).

Это событие является частью API History и API Cache браузера.

onpopstate

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

Это позволяет веб-приложениям управлять навигацией пользователя внутри сайта, не перезагружая страницу целиком.

Что такое onpopstate?

Когда пользователь нажимает кнопки “Назад” или “Вперед” в браузере, или когда JavaScript изменяет историю сеанса, возникает событие popstate.

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

onrejectionhandled

onrejectionhandled- это обработчик событий, который срабатывает, когда Promise, который был отклонен, позже обрабатывается.

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

onstorage

onstorage - это обработчик событий, который срабатывает, когда изменяется объект Storage (localStorage или sessionStorage).

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

Особенности:

  • Событие storage не возникает в том же окне, где были внесены изменения. Оно предназначено для уведомления других окон или вкладок об изменениях.
  • Событие storage содержит информацию о ключе, старом и новом значениях измененного элемента.
  • Использование onstorage позволяет создавать приложения, которые автоматически синхронизируют данные между несколькими окнами или вкладками.

onunhandledrejection

unhandledrejection - это событие, которое возникает, когда Promise в JavaScript отклоняется и не имеет обработчика отклонений.

Это позволяет обнаруживать и обрабатывать необработанные отклонения Promise глобально.

onunload

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

Это может произойти, когда пользователь:

  • Закрывает окно браузера или вкладку.
  • Переходит на другую страницу.
  • Обновляет страницу.
  • Переходит назад или вперед в истории браузера.

Однако, важно отметить, что onunload считается устаревшим и не рекомендуется к использованию.

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

1

<body onunload="eventFunction('onunload')"></body>

Глобальные события

Теперь посмотрим на глобальные события. Для удобства разобьем их на группы.

Клики мышью, и другие операции

onauxclick

onauxclick - это обработчик событий, который срабатывает, когда пользователь нажимает кнопку мыши, отличную от основной (обычно левой) кнопки.

Чаще всего это относится к средней кнопке мыши (колесику) или правой кнопке мыши.

1

<button onauxclick="eventFunction('onauxclick')">onauxclick</button>
onclick

Событие onclick возникает, когда пользователь нажимает на элемент.

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

1

<button onclick="eventFunction('onclick')">Клик</button>
oncontextmenu

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

1

<div oncontextmenu="eventFunction('oncontextmenu')">Контекстное меню браузера</div>
oncopy

Событие oncopy возникает, когда пользователь копирует содержимое элемента в буфер обмена. Это может быть текст, изображение или другой контент. Вы можете использовать это событие для выполнения определенных действий, например, для отслеживания копирования контента, добавления водяных знаков или изменения скопированного текста.

1

<div oncopy="eventFunction('oncopy')">Скопируйте текст</div>
ondblclick

Событие ondblclick позволяет выполнять JavaScript-код при двойном щелчке на элементе.

1

<div ondblclick="eventFunction('ondblclick')">Двойной клик</div>
onmousedown

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

onmouseenter

Событие возникает, когда указатель мыши входит в элемент.

onmouseleave

Событие возникает, когда указатель мыши покидает элемент.

onmousemove

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

onmouseout

Событие возникает, когда указатель мыши покидает элемент.

onmouseover

Событие возникает, когда указатель мыши наводится на элемент.

onmouseup

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

onwheel

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

Элементы формы

onbeforeinput

Событие onbeforeinput срабатывает перед изменением значения элемента <input>, <textarea>

1

<input type="text" onbeforeinput="eventFunction('onbeforeinput')">

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

onchange

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

oncut

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

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

1

<input type="text" oncut="eventFunction('oncut')">
onformdata

Событие onformdata является частью API FormData и используется для перехвата данных формы перед их отправкой на сервер. Это позволяет модифицировать данные формы, добавлять новые поля или выполнять другие операции перед отправкой.

oninput

Событие oninput возникает, когда значение элемента <input>, <textarea> или <select> изменяется пользователем. В отличие от события onchange, событие oninput происходит немедленно после изменения значения элемента, а не когда элемент теряет фокус.

oninvalid

Событие oninvalid возникает, когда элемент <input> или <textarea> не проходит валидацию. Это позволяет вам настроить обработку ошибок валидации, например, отображать собственные сообщения об ошибках.

onkeydown

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

onkeypress

Событие onkeypress считается устаревшим и не рекомендуется к использованию. Вместо него рекомендуется использовать события oninput или onkeydown/onkeyup.

onkeyup

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

onpaste

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

onreset

Событие возникает при сбросе формы.

onselect

Событие onselect возникает, когда пользователь выделяет текст в текстовом поле (<input type="text">, <textarea>) или в элементе, для которого разрешено выделение текста.

onsubmit

Событие возникает при отправке формы.

1
2
3
4

<form onsubmit="eventFunction('submit')">
    <input type="text" onfocus="eventFunction('onfocus')">
    <input type="submit" value="Отправить">
</form>

Фокус

onblur

Событие onblur возникает, когда элемент теряет фокус. Это событие широко поддерживается всеми основными браузерами.

onfocus

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

Открытие/Закрытие/Потеря/Ошибка/Другие

oncancel

Событие oncancel используется для элемента <dialog>, и возникает, когда пользователь закрывает диалоговое окно с помощью атрибута cancel.

onclose

Событие onclose используется для определения функции, которая будет вызвана при закрытии соединения WebSocket.

oncontextlost

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

oncontextrestored

Событие oncontextrestored является частью WebGL API и указывает на то, что контекст WebGL был восстановлен после потери. Это может произойти, например, когда система перезагружает графический драйвер или когда браузер переводит вкладку в фоновый режим и затем возвращает ее обратно.

onerror

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

onsecuritypolicyviolation

Событие возникает при нарушении политики безопасности контента.

onslotchange

Событие возникает при изменении слота в Shadow DOM.

onsuspend

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

ontoggle

Событие возникает при изменении состояния элемента <details>.

Медиа

oncanplay

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

oncanplaythrough

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

oncuechange

Событие oncuechange используется в JavaScript для отслеживания изменений в текстовых дорожках (например, субтитров) в медиа-элементах (<video> или <audio>). Это событие возникает, когда текущая текстовая дорожка изменяется или когда изменяются активные текстовые элементы (cues) в текущей дорожке.

ondurationchange

Событие ondurationchange возникает, когда изменяется атрибут duration элемента <audio> или <video>. Это может произойти, когда медиафайл загружается, или когда пользователь перематывает видео.

onemptied

Событие onemptied возникает, когда браузер неожиданно перестает получать данные от медиа-ресурса (например, видео или аудио). Это может произойти из-за проблем с сетью, ошибок на сервере или других причин.

onended

Событие onended в HTML DOM API возникает, когда воспроизведение аудио/видео достигает конца.

onloadeddata

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

onloadedmetadata

Событие onloadedmetadata возникает, когда браузер загрузил метаданные для указанного медиа-элемента (например, <video> или <audio>). Метаданные включают в себя такие вещи, как продолжительность, размеры (для видео) и кодеки.

onloadstart

Событие onloadstart возникает, когда браузер начинает загрузку медиа-файла (например, видео или аудио). Это первое событие, которое срабатывает в процессе загрузки медиа.

onpause

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

onplay

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

onplaying

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

onprogress

Событие возникает во время загрузки мультимедиа.

onratechange

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

onseeked

Событие возникает по окончании операции перемещения по мультимедиа.

onseeking

Событие возникает в начале операции перемещения по мультимедиа.

onstalled

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

ontimeupdate

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

onvolumechange

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

onwaiting

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

Перетаскивание

ondrag

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

ondragend

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

ondragenter

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

ondragleave

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

ondragover

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

ondragstart

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

ondrop

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

Загрузка страницы

onload

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

1

<body onload="eventFunction('onload')"></body>

Окно или документ

onresize

Событие возникает при изменении размера окна браузера.

onscroll

Событие возникает при прокрутке страницы.

onscrollend

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

Html
Авторский пост защищен лицензией CC BY 4.0 .

Хотите оптимизировать свой бизнес, нужен сервис, сайт или интеграция.

Бесплатно расчитаю время разработки, предложу решение вашей задачи.