На какие категории делятся события в html
Перейти к содержимому

На какие категории делятся события в html

  • автор:

HTML атрибуты событий

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

Атрибуты событий окна

События, вызываемые на объект окна (применяются с тегом ):

Атрибут Описание
onafterprint Скрипт запустится после того, как документ будет распечатан.
onbeforeprint Скрипт запустится прежде, чем документ будет распечатан.
onbeforeonload Скрипт запустится до загрузки документа.
onblur Скрипт запустится, когда окно потеряет фокус.
onerror Скрипт запустится, если произойдет ошибка.
onfocus Скрипт запустится, когда окно получит фокус.
onhaschange Скрипт запустится, после изменения документа.
onload Код события будет выполнен после полной загрузки страницы, т.е. когда всё содержимое веб-страницы полностью загружено, включая изображения, внешние таблицы стилей и внешние скрипты.
onmessage Скрипт запустится при срабатывании сообщения.
onoffline Скрипт запустится, когда документ перейдет в автономный режим.
ononline Скрипт запустится, когда документ войдет в сеть.
onpagehide Скрипт запустится, когда окно будет скрыто.
onpageshow Скрипт запустится, когда окно станет видимым.
onpopstate Скрипт запустится при изменении окна истории.
onredo Скрипт запустится, когда документ начнет выполнять повтор.
onresize Скрипт запустится при изменении размеров окна.
onstorage Скрипт запустится при загрузке документа.
onundo Скрипт запустится при выполнении команды отменить в документе.
onunload Скрипт запустится при выходе пользователя из документа.

События формы

События срабатывают на действия внутри HTML формы (могут применяться ко всем элементам HTML, но чаще всего применяются к элементам формы):

Атрибут Описание
onblur Скрипт запустится, когда элемент потеряет фокус.
onchange Скрипт запустится при изменении элемента.
oncontextmenu Скрипт запустится при вызове контекстного меню.
onfocus Скрипт запустится, когда элемент получит фокус.
onformchange Скрипт запустится при изменении формы.
onforminput Скрипт запустится, когда пользователь будет вводить данные в форму.
oninput Скрипт запустится, когда элемент станет получать пользовательский ввод.
oninvalid Скрипт запустится, когда элемент станет недействителен.
onselect Скрипт запустится при выборе элемента.
onsubmit Скрипт запустится при отправке формы.

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

События, вызываемые клавиатурой (могут применяться ко всем элементам HTML):

Атрибут Описание
onkeydown Скрипт запустится, когда будет нажата клавиша.
onkeypress Скрипт запустится после того, как клавиша была нажата и отпущена.
onkeyup Скрипт запустится при отпускании клавиши.

События мыши

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

Атрибут Описание
onclick Код события будет выполнен по клику левой кнопкой мыши на элементе.
ondblclick Скрипт запустится после двойного клика мыши.
ondrag Скрипт запустится при перетаскивании элемента.
ondragend Скрипт запустится после операции перетаскивания.
ondragenter Скрипт запустится, когда элемент будет перенесен на допустимую зону падения.
ondragleave Скрипт запустится, когда элемент отпустят в действующий зоне падения.
ondragover Скрипт запустится, если элемент тащат за допустимую зону падения.
ondragstart Скрипт запустится в начале операции перетаскивания элемента.
ondrop Скрипт запустится после перетаскивания элемента при падении.
onmousedown Скрипт запустится при нажатии кнопки мыши.
onmousemove Скрипт запустится, когда указатель мыши начнет перемещаться.
onmouseout Скрипт запустится, когда указатель мыши будет перемещаться из элемента.
onmouseover Скрипт запустится, когда указатель мыши будет перемещаться над элементом.
onmouseup Скрипт запустится при отпускании кнопки мыши.
onmousewheel Скрипт запустится при нажатии на колесо мыши.
onscroll Скрипт запустится во время прокручивания полосы прокрутки элемента.

События медиа-файлов

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

Атрибут Описание
onabort Скрипт запустится при прерывании.
oncanplay Скрипт запустится, когда файл будет готов, чтобы начать проигрывание (когда будет достаточно буферизирован).
oncanplaythrough Скрипт запустится, когда файл может быть воспроизведен полностью (от начала до конца), не останавливаясь для буферизации.
ondurationchange Скрипт запустится при изменении длины продолжительности медиа файла.
onemptied Скрипт запустится, когда произошла какая-то неполадка и файл стал недоступен (например при разрыве связи с интернетом).
onended Скрипт запустится, когда аудио/видео файл дойдет до конца (например для вывода сообщения: спасибо за прослушивание/просмотр).
onerror Скрипт запустится, если возникнет ошибка при загрузке файла.
onloadeddata Скрипт запустится при загрузке данных медиа файла.
onloadedmetadata Скрипт запустится, когда загружены мета-данные (например размер и продолжительность).
onloadstart Скрипт запустится при загрузке файла прежде, чем начнет загружаться на самом деле.
onpause Скрипт запустится, если воспроизведение файла приостановлено (нажали паузу) пользователем или программно.
onplay Скрипт запустится, когда файл готов начать воспроизводиться.
onplaying Скрипт запустится при воспроизведении файла.
onprogress Скрипт запускается, когда браузер находится в процессе получения данных медиа файла.
onratechange Скрипт запускается, каждый раз, при изменении режима воспроизведения (например, когда пользователь переключается на медленное воспроизведение или режим быстрой перемотки).
onreadystatechange Скрипт запускается, каждый раз, при изменении состояния готовности (состояние готовности отслеживает состояние данных файла).
onseeked Скрипт запускается, когда атрибут seeked у тегов audio или video имеет значение «false», т.е.текущая позиция воспроизведения найдена.
onseeking Скрипт запускается, когда атрибут seeking у тегов audio или video имеет значение «true», т.е. текущая позиция воспроизведения перемещается.
onstalled Скрипт запускается, когда браузер не может получить данные медиа файла по любой причине.
onsuspend Скрипт запускается, когда получение данных медиа файла прекращается, до окончания полной загрузки по любой причине.
ontimeupdate Скрипт запускается, когда позиция воспроизведения изменилась (например, когда пользователь выбрал точку воспроизведения на много дальше от текущей).
onvolumechange Скрипт запускается каждый раз при изменении значения громкости звука (включая полное отключение звука).
onwaiting Скрипт запускается, когда медиа файл остановлен, но ожидается возобновление запуска (например, когда файл делает паузу для буферизации оставшихся данных).

Копирование материалов с данного сайта возможно только с разрешения администрации сайта
и при указании прямой активной ссылки на источник.
2011 – 2024 © puzzleweb.ru | razumnikum.ru

Что такое браузерные события

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

Браузерные события — это события, которые происходящие во время взаимодействия пользователя с веб-страницей. Они дают компьютеру возможность отслеживания действия и реагировать на них. Например:

  1. Изменение размера окна браузера — текст сжимается по ширине окна
  2. Клик на кнопку оплатить — открывается страница оплаты
  3. Нажатие на Esc — закрытие всплывающей рекламы.

Существует несколько категорий браузерных событий

  1. События мыши
  2. События клавиатуры
  3. События на элементах управления
  4. События документа
  5. События CSS.

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

События мыши

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

Эмуляция — воспроизведение программными средствами работы других устройств, например: моделирование событий мыши на сенсорном экране планшета или телефона, в частности — нажатие на кнопку «КУПИТЬ» с помощью компьютерной мыши и нажатие пальцем или стилусом на телефоне приведет к одинаковому результату .

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

  1. mousedown — происходит, когда кнопка мыши находится в нажатом состоянии на элементе, где стоит указатель мыши
  2. mouseup — возникает во время отпускания кнопки мыши с элемента, на котором установлен курсор
  3. mouseover — ловит появление мыши над элементом
  4. mouseout — реагирует в тот момент, когда указатель мыши покидает элемент
  5. mousemove — отслеживает каждое движение мыши над элементом
  6. wheel — происходит, когда колесо мыши прокручивается.

Комплексные события

  1. click — регистрируется, когда на элементе произошел и mousedown, и mouseup
  2. dblclick — возникает при двойном клике на элементе
  3. contextmenu — реагирует на клик правой кнопки мыши.

Клавиатурные события

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

  1. keydown — нажатие клавиши
  2. keyup — отпускание клавиши
  3. keypress — возникает сразу после события keydown, если нажата символьная клавиша.

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

  1. Браузер проверяет какая клавиша была нажата, чтобы определить, какое именно событие произошло. Например, нажатие клавиши Enter может вызвать событие «submit», а нажатие клавиши Esc — «cancel».
  2. Браузер проверяет какой элемент на странице был выбран пользователем перед тем, как начать вводить текст с клавиатуры.

События формы и элементов управления

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

Браузер определяет, какое событие произошло, и какой элемент формы был выбран пользователем. Например, когда пользователь вводит текст в поле ввода, браузер генерирует событие «input» — оно сообщает об изменении значения поля ввода.

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

К событиям, связанным с действиями над формой или отдельными элементами управления веб-страницей относятся:

  1. submit — отправление формы пользователем
  2. focus, focusin — фокусировка на элементе
  3. blur, focusout — возникает, когда элемент теряет фокус
  4. input — происходит при изменении значения элемента в input или textarea
  5. invalid — срабатывает при некорректном заполнении формы после события submit
  6. reset — возникает при нажатии на элемент, только если у input задан type = «reset»
  7. select — используется при работе с выделенным текстом в элементе
  8. change — случается когда изменяется значение элемента после того как он потерял фокус.

События документа

События документа — это события, которые происходят, когда документ загружается или изменяется, например:

  1. resize — совершается, когда изменяется размер окна браузера
  2. load — случается, когда все ресурсы загружены, включая картинки и скрипты
  3. unload — происходит, когда документ выгружен из браузера, например, когда пользователь закрывает вкладку или переходит на другую страницу
  4. beforeunload — срабатывает перед выгрузкой документа из браузера, обычно используется для предупреждения о потере несохраненных данных
  5. DOMContentLoaded — происходит, когда DOM-дерево полностью построено
  6. scroll — осуществляется, когда пользователь прокручивает страницу
  7. error — включается, когда возникает ошибка в загрузке документа или его компонентов.

События CSS

События CSS — это события, связанные с изменением стилей элемента. Когда браузер загружает веб-страницу, он создает объект Document Object Model (DOM), который представляет структуру HTML-документа. Далее браузер обрабатывает CSS-стили, он создает еще один объект, называемый CSS Object Model (CSSOM), который представляет структуру CSS-стилей.

Когда происходит событие CSS, браузер определяет, какой элемент на веб-странице был изменен, и какой CSS-стиль был изменен. Затем он записывает событие CSS с информацией об изменении стиля и передает его событие обработчику событий. Последний выполняет действия в ответ на событие.

События CSS делятся на два вида:

События анимации

  1. animationstart — запускается, когда анимация начинается
  2. animationiteration — возникает, когда анимация доходит до конца и начинается заново
  3. animationend — происходит, когда анимация заканчивается.

События перехода

  1. transitionrun — срабатывает в момент создания перехода в начале задержки
  2. transitionstart — срабатывает в начале анимации, то есть в конце задержки
  3. transitioncancel — случается, когда переход не может быть завершен, например, если элемент был скрыт до завершения перехода
  4. transitionend — происходит, когда завершается анимация перехода между двумя значениями CSS.

Обработчики событий

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

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

Обработчики событий могут быть определены как:

  1. Атрибуты HTML-элементов

2. Свойства DOM-объектов

  

Функцию можно записывать напрямую в свойство элемента, а можно вешать на слушатель событий:

a. Свойство элемента

let buttonEl = document.querySelector("button"); buttonEl.onclick = function() < // инструкция >

б. Слушатель событий

const buttonEl = document.getElementById("myButton"); buttonEl.addEventListener("click", function() < // инструкция >); 

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

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

элемент.removeEventListener(«удаляемое событие», функция);

Доступ к элементу через this

Для доступа к элементу, на котором произошло событие, используется ключевое слово `this`. Оно ссылается на текущий элемент, на котором было вызвано событие, например:

let buttonEl = document.querySelector("button"); buttonEl.onclick = function()

Катрин Алимова

Катрин Алимова

Вам может также понравиться.

Синтаксис JavaScript: основные концепции

Синтаксис JavaScript: основные концепции

Литералы в JavaScript

14 февр. 2024 г.

Литералы в JavaScript

Ключевые слова Javascript

13 февр. 2024 г.

Атрибуты HTML

Описание видов HTML атрибутов по категориям.

Атрибуты
Атрибуты HTML тегов

Атрибут — это свойство HTML тега. У атрибутов HTML имеются значения.

Схема HTML-тега с атрибутом и значением, выглядит следующим образом:

Схема парного тега:

<имяТега атрибут="значение"> 

Схема одиночного тега:

атрибут="значение">

Вместо слова атрибут , можно говорить свойство .

Виды (категории) атрибутов HTML-тегов

Атрибуты HTML делятся на несколько видов . Я их разделил на семь категорий , в других учебниках количество категорий может различаться:

  1. Глобальные атрибуты,
  2. Атрибуты событий,
  3. Сокращенные атрибуты,
  4. Атрибуты форматирования,
  5. Атрибуты указания пути (адрес),
  6. Атрибуты селекторы,
  7. Атрибут стиля.

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

Глобальные атрибуты — это атрибуты, которые можно вставить в любой тег HTML-документа.

Вот небольшой список глобальных атрибутов:
title=» » — даёт описание элементу,
hidden=» » — делает элемент невидимым,
id=» » — присваивает элементу уникальный идентификатор.

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

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

Вот небольшой список атрибутов событий:
onclick=» » — событие возникает при щелчке левой кнопки мыши на элементе,
onmouseover=» » — событие возникает при наведении курсора мыши на элемент,
onload=» » — событие возникает при загрузке HTML-документа в браузер.

Сокращенные атрибуты

Сокращенные атрибуты — это атрибуты которые можно записать в сокращенной форме.

Вот небольшой список сокращенных атрибутов:
checked=»checked» — в сокращённой форме можно записать как checked ,
readonly=»readonly» — в сокращённой форме можно записать как readonly ,
controls=»controls» — в сокращённой форме можно записать как controls .

Атрибуты форматирования

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

Вот небольшой список атрибутов форматирования:
color=» » — влияет на цвет,
align=» » — влияет на выравнивание,
size=» » — влияет на размер шрифта.

В современном сайтостроении, атрибуты форматирования НЕ используют, вместо них работайте с CSS-свойствами.

Атрибуты указания пути

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

Атрибутов указания пути всего два:
href=» » — может указывать на адрес страницы в теге ссылки a ,
src=»https://gabdrahimov.ru/html-atributy» — может указывать на адрес фотографии в теге изображения img

Атрибуты селекторы

Атрибуты селекторы — это атрибуты которые предназначены для создания выборки элементов (используются в CSS и JavaScript).

Атрибутов селекторов всего два:
class=»имяКласса» — атрибут селектора класса ,
id=»имяУникальногоИдентификатора» — атрибут селектора уникального идентификатора .

Более подробно о селекторах вы можете прочитать в статье Селекторы в CSS

Атрибут стиля

Атрибут стиля — это атрибут, который размещает CSS-код непосредственно в HTML-тег.

Атрибут стиля:
style=» «

Пример внедрения атрибута style=» » в HTML-тег:

style="font-size:12px; width:400px;"> Абзац

В заключение

1. Один и тот же атрибут может принадлежать к разным категориям. Например атрибут id=» » это одновременно и атрибут селектора и глобальный атрибут .

2. К HTML-тегу, можно применить сразу несколько атрибутов, например:

 

Абзац

HTML-теги

Описание видов HTML-тегов по категориям.

HTML-теги
Категории и виды HTML-тегов

Теги HTML — являются основной частью языка HTML.

Схема HTML-тега, выглядит следующим образом:

Схема парного тега:

Схема одиночного тега:

Иногда в HTML тегах устанавливают атрибуты со значениями:

<имяТега атрибут="значение"> <имяТега атрибут="значение">

Где имяТега — это h1 , p , b , img , a , table и др.

Виды (категории) HTML-тегов

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

  1. Парные теги,
  2. Одиночные теги,
  3. Блочные теги,
  4. Строчные теги,
  5. Новые теги HTML5,
  6. Устаревшие теги,
  7. Нестандартные теги,
  8. Теги верхнего уровня (html, head и body),
  9. Теги головы HTML-документа,
  10. Семантические теги.

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

Рассмотрим каждый вид по отдельности.

Парные теги

Парные теги имеют открывающий и закрывающий тег, перед именем закрывающего тега ставят знак слэш (косая черта) /

Вот небольшой список парных тегов:
— заголовок,
— абзац,
— жирный шрифт.

Одиночные теги

Одиночные теги не имеют закрывающего тега.

Вот небольшой список одиночных тегов:
— изображение,

— перенос строки,
— элемент формы.

Блочные теги

Блочные теги — это теги в начале и в конце которых
автоматически ставится перенос строки, также они занимают всю ширину родительского элемента.

Вот небольшой список блочных тегов:
— заголовок первого уровня,
— абзац,
— таблица.

Строчные теги

Строчные теги — это теги в начале и в конце которых НЕ ставится перенос строки.

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

Новые теги HTML5

Новые теги HTML5 — это теги, которые появились в спецификации языка HTML5.

Вот небольшой список новых тегов:
— основной контент страницы,
— замена флеш-технологии,
— видео-файл.

Устаревшие теги

Устаревшие теги — это теги использовать которые с точки зрения спецификации языка HTML5, не рекомендуется. Однако при создании сайтов, вы можете использовать устаревшие теги, браузеры всё равно их поймут.

Вот небольшой список устаревших тегов:
— увеличивает размер шрифта на единицу,
— форматирует текст,
— поисковая строка.

Нестандартные теги

Нестандартные теги — это теги, которые не поддерживаются ни одной спецификацией HTML, но некоторые браузеры их понимают.

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

Теги верхнего уровня

Теги верхнего уровня — это теги отвечающие за создание HTML-документа, их всего три:

— начало и конец HTML-документа,

Теги головы HTML-документа

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

Вот небольшой список тегов головы HTML-документа:
— подключает внешние файлы .css, .xml, .ico,
— мета-теги,
— название страницы,
— внедряет CSS-код в страницу,
— загружает внешний JavaScript-файл .js, также между этими тегами может размещаться JavaScript-код.

Семантические теги

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

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

Также следует отметить, что нынешняя политика HTML стремится сделать почти все теги, семантическими.

По каким категориям еще можно разделять HTML-теги?

К десяти категориям выше, можно также добавить еще несколько, это:
— Текстовые теги,
— Теги форматирования,
— и т.д. список будет пополняться.

Также, теги можно разделить по специализации:
— Теги таблиц,
— Теги форм,
— Теги списков,
— Теги фреймов,
— Мета-теги,
— и т.д.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *