Polytech-soft.com

ПК журнал
0 просмотров
Рейтинг статьи
1 звезда2 звезды3 звезды4 звезды5 звезд
Загрузка...

Html обработка событий

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

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

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

Чтобы узнать больше о программировании событий, пожалуйста, посетите наш Учебник по JavaScript.

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

= Новые атрибуты событий в HTML5.

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

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

АтрибутЗначениеОписание
onafterprintscriptСценарий, запускаемый после печати документа
onbeforeprintscriptВыполнение сценария перед печатью документа
onbeforeunloadscriptСценарий, запускаемый при выгрузке документа
onerrorscriptСценарий, запускаемый при возникновении ошибки
onhashchangescriptСценарий, который должен быть запущен, когда были внесены изменения в якорную часть URL-адреса
onloadscriptСрабатывает после завершения загрузки страницы
onmessagescriptСценарий, запускаемый при срабатывании сообщения
onofflinescriptСкрипт, запускаемый при запуске браузера для работы в автономном режиме
ononlinescriptСценарий, запускаемый при запуске браузера для работы в Интернете
onpagehidescriptСценарий для запуска, когда пользователь переходит от страницы
onpageshowscriptСценарий, запускаемый при переходе пользователя на страницу
onpopstatescriptСценарий, запускаемый при изменении истории окна
onresizescriptСрабатывает при изменении размера окна обозревателя
onstoragescriptСценарий, запускаемый при обновлении области веб-хранилища
onunloadscriptСрабатывает после того, как страница выгружена (или окно браузера закрыто)

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

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

АтрибутЗначениеОписание
onblurscriptЗапускает момент, когда элемент теряет фокус
onchangescriptЗапускает момент, когда изменяется значение элемента
oncontextmenuscriptСценарий, запускаемый при запуске контекстного меню
onfocusscriptЗапускает момент, когда элемент получает фокус
oninputscriptСценарий, запускаемый, когда элемент получает пользовательский ввод
oninvalidscriptСценарий, запускаемый при недопустимом элементе
onresetscriptСрабатывает при нажатии кнопки сброса в форме
onsearchscriptСрабатывает, когда пользователь пишет что-то в поле поиска (для )
onselectscriptСрабатывает после выбора некоторого текста в элементе
onsubmitscriptСрабатывает при отправке формы

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

АтрибутЗначениеОписание
onkeydownscriptСрабатывает, когда пользователь нажимает клавишу
onkeypressscriptСрабатывает, когда пользователь нажимает клавишу
onkeyupscriptСрабатывает, когда пользователь освобождает ключ

События мыши

АтрибутЗначениеОписание
onclickscriptСрабатывает при щелчке мышью по элементу
ondblclickscriptСрабатывает при двойном щелчке мышью по элементу
onmousedownscriptСрабатывает при нажатии кнопки мыши на элементе
onmousemovescriptСрабатывает, когда указатель мыши движется, находясь над элементом
onmouseoutscriptСрабатывает, когда указатель мыши перемещается из элемента
onmouseoverscriptСрабатывает, когда указатель мыши перемещается над элементом
onmouseupscriptСрабатывает при отпускании кнопки мыши над элементом
onmousewheelscriptУстаревшие. Используйте onwheel вместо атрибута
onwheelscriptСрабатывает, когда колесо мыши катится вверх или вниз над элементом

Перетаскивание событий

АтрибутЗначениеОписание
ondragscriptСценарий, запускаемый при перетаскивании элемента
ondragendscriptСценарий, запускаемый в конце операции перетаскивания
ondragenterscriptСценарий, запускаемый при перетаскивании элемента в допустимый целевой объект перетаскивания
ondragleavescriptСценарий, запускаемый, когда элемент оставляет допустимый целевой объект перетаскивания
ondragoverscriptСценарий, запускаемый при перетаскивании элемента над допустимым целевым объектом перетаскивания
ondragstartscriptСценарий, запускаемый в начале операции перетаскивания
ondropscriptСценарий, запускаемый при удалении перетаскивания элемента
onscrollscriptСценарий, запускаемый при прокрутке полосы прокрутки элемента

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

АтрибутЗначениеОписание
oncopyscriptСрабатывает, когда пользователь копирует содержимое элемента
oncutscriptСрабатывает, когда пользователь режет содержимое элемента
onpastescriptСрабатывает, когда пользователь вставляет некоторое содержимое в элемент

Медиа-события

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

Совет: Посмотрите на нашу HTML аудио и видео DOM ссылка для получения дополнительной информации.

Введение в браузерные события

Событие – это сигнал от браузера о том, что что-то произошло. Все DOM-узлы подают такие сигналы (хотя события бывают и не только в DOM).

Вот список самых часто используемых DOM-событий, пока просто для ознакомления:

События мыши:

  • click – происходит, когда кликнули на элемент левой кнопкой мыши (на устройствах с сенсорными экранами оно происходит при касании).
  • contextmenu – происходит, когда кликнули на элемент правой кнопкой мыши.
  • mouseover / mouseout – когда мышь наводится на / покидает элемент.
  • mousedown / mouseup – когда нажали / отжали кнопку мыши на элементе.
  • mousemove – при движении мыши.

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

  • submit – пользователь отправил форму .
  • focus – пользователь фокусируется на элементе, например нажимает на .

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

  • keydown и keyup – когда пользователь нажимает / отпускает клавишу.

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

  • DOMContentLoaded – когда HTML загружен и обработан, DOM документа полностью построен и доступен.

CSS events:

  • transitionend – когда CSS-анимация завершена.

Существует множество других событий. Мы подробно разберём их в последующих главах.

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

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

Именно благодаря обработчикам JavaScript-код может реагировать на действия пользователя.

Есть несколько способов назначить событию обработчик. Сейчас мы их рассмотрим, начиная с самого простого.

Использование атрибута HTML

Обработчик может быть назначен прямо в разметке, в атрибуте, который называется on .

Например, чтобы назначить обработчик события click на элементе input , можно использовать атрибут onclick , вот так:

Читать еще:  Задания html css

При клике мышкой на кнопке выполнится код, указанный в атрибуте onclick .

Обратите внимание, для содержимого атрибута onclick используются одинарные кавычки, так как сам атрибут находится в двойных. Если мы забудем об этом и поставим двойные кавычки внутри атрибута, вот так: onclick=»alert(«Click!»)» , код не будет работать.

Атрибут HTML-тега – не самое удобное место для написания большого количества кода, поэтому лучше создать отдельную JavaScript-функцию и вызвать её там.

Следующий пример по клику запускает функцию countRabbits() :

Как мы помним, атрибут HTML-тега не чувствителен к регистру, поэтому ONCLICK будет работать так же, как onClick и onCLICK … Но, как правило, атрибуты пишут в нижнем регистре: onclick .

Использование свойства DOM-объекта

Можно назначать обработчик, используя свойство DOM-элемента on .

К примеру, elem.onclick :

Если обработчик задан через атрибут, то браузер читает HTML-разметку, создаёт новую функцию из содержимого атрибута и записывает в свойство.

Этот способ, по сути, аналогичен предыдущему.

Обработчик всегда хранится в свойстве DOM-объекта, а атрибут – лишь один из способов его инициализации.

Эти два примера кода работают одинаково:

Так как у элемента DOM может быть только одно свойство с именем onclick , то назначить более одного обработчика так нельзя.

В примере ниже назначение через JavaScript перезапишет обработчик из атрибута:

Кстати, обработчиком можно назначить и уже существующую функцию:

Убрать обработчик можно назначением elem.onclick = null .

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

Внутри обработчика события this ссылается на текущий элемент, то есть на тот, на котором, как говорят, «висит» (т.е. назначен) обработчик.

В коде ниже button выводит своё содержимое, используя this.innerHTML :

Частые ошибки

Если вы только начинаете работать с событиями, обратите внимание на следующие моменты.

Функция должна быть присвоена как sayThanks , а не sayThanks() .

Если добавить скобки, то sayThanks() – это уже вызов функции, результат которого (равный undefined , так как функция ничего не возвращает) будет присвоен onclick . Так что это не будет работать.

…А вот в разметке, в отличие от свойства, скобки нужны:

Это различие просто объяснить. При создании обработчика браузером из атрибута, он автоматически создаёт функцию с телом из значения атрибута: sayThanks() .

Так что разметка генерирует такое свойство:

Используйте именно функции, а не строки.

Назначение обработчика строкой elem.onclick = «alert(1)» также сработает. Это сделано из соображений совместимости, но делать так не рекомендуется.

Не используйте setAttribute для обработчиков.

Такой вызов работать не будет:

Регистр DOM-свойства имеет значение.

Используйте elem.onclick , а не elem.ONCLICK , потому что DOM-свойства чувствительны к регистру.

addEventListener

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

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

Мы хотим назначить два обработчика для этого. Но новое DOM-свойство перезапишет предыдущее:

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

Синтаксис добавления обработчика:

Для удаления обработчика следует использовать removeEventListener :

Для удаления нужно передать именно ту функцию-обработчик которая была назначена.

Вот так не сработает:

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

Вот так правильно:

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

Метод addEventListener позволяет добавлять несколько обработчиков на одно событие одного элемента, например:

Как видно из примера выше, можно одновременно назначать обработчики и через DOM-свойство и через addEventListener . Однако, во избежание путаницы, рекомендуется выбрать один способ.

Существуют события, которые нельзя назначить через DOM-свойство, но можно через addEventListener .

Например, таково событие DOMContentLoaded , которое срабатывает, когда завершена загрузка и построение DOM документа.

Так что addEventListener более универсален. Хотя заметим, что таких событий меньшинство, это скорее исключение, чем правило.

Объект события

Чтобы хорошо обработать событие, могут понадобиться детали того, что произошло. Не просто «клик» или «нажатие клавиши», а также – какие координаты указателя мыши, какая клавиша нажата и так далее.

Когда происходит событие, браузер создаёт объект события, записывает в него детали и передаёт его в качестве аргумента функции-обработчику.

Пример ниже демонстрирует получение координат мыши из объекта события:

Некоторые свойства объекта event :

event.type Тип события, в данном случае «click» . event.currentTarget Элемент, на котором сработал обработчик. Значение – обычно такое же, как и у this , но если обработчик является функцией-стрелкой или при помощи bind привязан другой объект в качестве this , то мы можем получить элемент из event.currentTarget . event.clientX / event.clientY Координаты курсора в момент клика относительно окна, для событий мыши.

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

При назначении обработчика в HTML, тоже можно использовать объект event , вот так:

Это возможно потому, что когда браузер из атрибута создаёт функцию-обработчик, то она выглядит так: function(event) < alert(event.type) >. То есть, её первый аргумент называется «event» , а тело взято из атрибута.

Объект-обработчик: handleEvent

Мы можем назначить обработчиком не только функцию, но и объект при помощи addEventListener . В этом случае, когда происходит событие, вызывается метод объекта handleEvent .

Читать еще:  Логическое форматирование html

Как видим, если addEventListener получает объект в качестве обработчика, он вызывает object.handleEvent(event) , когда происходит событие.

Мы также можем использовать класс для этого:

Здесь один и тот же объект обрабатывает оба события. Обратите внимание, мы должны явно назначить оба обработчика через addEventListener . Тогда объект menu будет получать события mousedown и mouseup , но не другие (не назначенные) типы событий.

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

Теперь обработка событий разделена по методам, что упрощает поддержку кода.

Итого

Есть три способа назначения обработчиков событий:

  1. Атрибут HTML: onclick=». » .
  2. DOM-свойство: elem.onclick = function .
  3. Специальные методы: elem.addEventListener(event, handler[, phase]) для добавления, removeEventListener для удаления.

HTML-атрибуты используются редко потому, что JavaScript в HTML-теге выглядит немного странно. К тому же много кода там не напишешь.

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

Последний способ самый гибкий, однако нужно писать больше всего кода. Есть несколько типов событий, которые работают только через него, к примеру transitionend и DOMContentLoaded . Также addEventListener поддерживает объекты в качестве обработчиков событий. В этом случае вызывается метод объекта handleEvent .

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

Мы изучим больше о событиях и их типах в следующих главах.

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

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

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

Значение любого атрибута события – функция JavaScript

События окна

События объекта window (применяются в элементе ):

onafterprint Возникает после распечатки документа. onbeforeprint Возникает перед распечаткой документа. onbeforeunload Возникает перед выгрузкой документа. С помощью этого события можно предупредить посетителя, желающего покинуть Web-страницу о том, что он не все данные сохранил. onerror Возникает, если при загрузке документа произошла ошибка. onhashchange Возникает при изменении hash, т.е. при изменении данных после знака «решетка» ( # ) в адресной строке браузера (в URL). onload Возникает после успешной загрузки, но до отображения страницы. Используется для вывода заставки, проверки права доступа и других однократных действий при загрузке страницы. onmessage Возникает, если получено сообщение, отправленное данному объекту windows с помощью функции postMessage();. onoffline —> Возникает, когда браузер начинает работать в автономном режиме. Почти не поддерживается. —> ononline —> Возникает, когда браузер начинает работать в Интернете. Почти не поддерживается. —> onpagehide Возникает, когда пользователь обновляет страницу, уходит со страницы назад или вперед по истории, уходит по ссылке, сохраняет данные формы и т.п. onpageshow Возникает, когда пользователь переходит на страницу. Похоже на событие onload, но в отличие от него происходит каждый раз, даже если страница загружается из кэша. Например, при переходе назад или вперед по истории. onpopstate Возникает, когда пользователь переходит на страницу путем выбора её в истории (history) браузера. onresize Возникает при изменении размера окна браузера. onstorage Возникает при изменении содержания области (Web Storage) объекта window или document. onunload Возникает после выгрузки Web-страницы или при закрытии окна браузера.

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

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

onblur Элемент потерял фокус. onchange Значение элемента формы изменено. oncontextmenu Вызвано контекстное меню для элемента. onfocus Элемент получил фокус. oninput Пользователь меняет значение элемента формы. Событие oninput не дожидается, когда измененное поле потеряет фокус (в отличие от события onchange). oninvalid Значение элемента формы введено неверно. onreset Возникает при щелчке на кнопке сброса. onsearch Пользователь что-то вводит в поле поиска (для ) onselect Пользователь выделяет некоторый текст в элементе. onsubmit Пользователь отправляет данные форму на сервер, т.е. нажимает кнопку submit.

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

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

onkeydown Пользователь нажал клавишу. onkeypress Пользователь нажал и отпустил клавишу. onkeyup Пользователь отпустил клавишу.

События мыши

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

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

Читать еще:  Организация vpn сервера

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

События медиа

Могут применяться почти во всех HTML-элементах, но наиболее часто – в медиа-элементах: , , , , .

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

DOM — Метод addEventListener

Добавим обработчик события, который срабатывает при нажатии пользователем на кнопку:

Метод addEventListener() присоединяет обработчик события к определенному элементу. При этом новый обработчик события не переписывает уже существующие обработчики событий.

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

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

Метод addEventListener() позволяет легко контролировать то, как обработчик реагирует на, так называемое, «всплывание» события.

Когда используется метод addEventListener(), JavaScript отделяется от разметки HTML, что улучшает читаемость скрипта и позволяет добавлять обработчики событий даже тогда, когда вы не можете контролировать разметку HTML.

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

Синтаксис:

элемент.addEventListener(событие, функция, useCapture);

Первый параметр — тип события (например, «click» или «mousedown»).

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

Третий параметр — логическое значение (true/false), определяющее следует ли отправить событие дальше («всплывание») или нужно закрыть это событие. Этот параметр необязателен.

Обратите внимание, что в имени события не используется префикс «on» — «click» вместо «onclick».

В следующем примере при нажатии пользователем на элемент появляется окно с сообщением «Hello World!»:

Также, можно задать и внешнюю «именованную» функцию:

Метод addEventListener() позволяет добавлять несколько обработчиков событий к одному и тому же элементу не переписывая уже существующие обработчики событий:

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

Добавление обработчика событий к объекту window

Метод addEventListener() позволяет добавлять обработчики событий к любому объекту HTML DOM — HTML элементам, HTML документу, объекту окна (объект window) и другим объектам, поддерживающим события как объект xmlHttpRequest.

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

Передача параметров

Если необходимо передать параметры, то используйте «анонимную» функцию, которая вызывает специализированную функцию с параметрами:

Всплытие или перехват события?

В HTML DOM существует два способа распространения события — всплытие и перехват.

Распространение события — это последовательность обработки события HTML элементами. Если у вас есть элемент

, вложенный в элемент

, то какой элемент должен обработать событие «click» первым?

При всплытии первым обрабатывает событие самый вложенный элемент, затем его родитель и т.д.: таким образом сначала обрабатывать событие «click» будет элемент

, а затем элемент

При перехвате все происходит наоборот — сначала событие обрабатывает самый внешний элемент, в нашем случае

Метод addEventListener() позволяет задавать тип распространения события. Это можно сделать при помощи параметра «useCapture«:

addEventListener(событие, функция, useCapture );

По умолчанию этот параметр имеет значение false, что задает всплытие события. Если задать ему значение true, то будет использоваться перехват.

Метод removeEventListener()

Метод removeEventListener() удаляет обработчик события, подключенный методом addEventListener():

Поддержка браузерами

Методы addEventListener() и removeEventListener() в настоящее время поддерживаются всеми основными браузерами.

Однако, IE 8 и более ранних версий, а также Opera 6.0 и более ранних версий не поддерживают методы addEventListener() и removeEventListener(). Тем не менее, для этих версий браузеров можно использовать метод attachEvent() для прикрепления обработчика события и метод detachEvent() для его удаления:

элемент.attachEvent(событие, функция);
элемент.detachEvent(событие, функция);

Ссылка на основную публикацию
Adblock
detector