События js: Введение в браузерные события
| Событие | Обработчик события | Поддерживающие HTML-элементы | Описание |
События мыши | |||
| click | onClick | * Практически все HTML-элементы | Одинарный щелчок (нажата и отпущена кнопка мыши) |
| dblclick | onDblClick | * Практически все HTML-элементы | Двойной щелчок |
| contextmenu | onContextmenu | * Практически все HTML-элементы | Щелчок правой кнопкой мыши на элементе |
| selectstart | onselectstart | * Практически все HTML-элементы | Начало выделения контента. Изменение выделения скриптом. |
| mousewheel | onMousewheel | * Практически все HTML-элементы | Нажата кнопка мыши в пределах текущего элемента |
| mousemove | onMouseMove | * Практически все HTML-элементы | Перемещение курсора мыши в пределах текущего элемента |
| mouseout | onMouseOut | * Практически все HTML-элементы | Курсор мыши выведен за пределы текущего элемента |
| mouseover | onMouseOver | * Практически все HTML-элементы | Курсор мыши наведен на текущий элемент |
| mouseup | onMouseUp | * Практически все HTML-элементы | Отпущена кнопка мыши в пределах текущего элемента |
| mousedown | onMouseDown | * Практически все HTML-элементы | Нажата кнопка мыши в пределах текущего элемента |
События клавиатуры | |||
| keydown | onKeyDown | * Практически все HTML-элементы | Нажата клавиша на клавиатуре |
| keypress | onKeyPress | * Практически все HTML-элементы | Нажата и отпущена клавиша на клавиатуре |
| keyup | onKeyUp | * Практически все HTML-элементы | Отпущена клавиша на клавиатуре |
| |||
| focus | onFocus | A, AREA, BUTTON, INPUT, LABEL, SELECT, TEXTAREA | Получение элементом фокуса (щелчок мышью на элементе или очередное нажатие клавиши табуляции) |
| blur | onBlur | A, AREA, BUTTON, INPUT, LABEL, SELECT, TEXTAREA | Потеря текущим элементом фокуса, т.е. переход к другому элементу. Возникает при щелчке мышью вне элемента либо нажатии клавиши табуляции |
| change | onChange | INPUT, SELECT, TEXTAREA | Изменение значений элементов формы. Возникает после потерей элементом фокуса, т.е. после события blur |
| reset | onReset | FORM | Сброс данных формы ( щелчок по кнопке <input type=»reset»> ) |
| select | onSelect | INPUT, TEXTAREA | Выделение текста в текущем элементе |
| submit | onSubmit | FORM | Отправка данных формы ( щелчок по кнопке <input type=»submit»> ) |
| abort | onAbort | IMG, input type=»img» | Прерывание загрузки изображения |
| |||
| load | onLoad | BODY, FRAMESET | Закончена загрузка документа |
| unload | onUnload | BODY, FRAMESET | Попытка закрытия окна браузера и выгрузки документа |
| error | onError | IMG, WINDOW | Возникновение ошибки выполнения сценария |
| move | onMove | WINDOW | Перемещение окна |
| resize | onResize | WINDOW | Изменение размеров окна |
| scroll | onScroll | * Практически все HTML-элементы | Прокрутка окна или области |
error | Не удалось загрузить ресурс. |
abort | Загрузка ресурса была прервана. |
load | браузер загрузил HTML и внешние ресурсы (картинки, стили и т.д.). |
DOMContentLoaded | когда HTML загружен и обработан, DOM документа полностью построен и доступен. |
beforeunload | пользователь покидает страницу. Мы можем проверить, сохранил ли он изменения и спросить, на самом ли деле он хочет уйти. |
unload | пользователь почти ушёл, но мы всё ещё можем запустить некоторые операции, например, отправить статистику. |
resize | Событие запускается когда размер документа был изменён. |
orientationchange | Событие запускается когда изменилась ориентация устройства. |
scroll | Событие прокрутки, позволяет реагировать на прокрутку страницы или элемента. |
| |
| События мыши | |
click | Событие происходит когда кликнули на элемент левой кнопкой мыши (на устройствах с сенсорными экранами оно происходит при касании). |
dblclick | Событие возникает когда пользователь дважды нажимает на элемент. Он срабатывает после двух событий click. |
contextmenu | Событие происходит происходит, когда кликнули на элемент правой кнопкой мыши. |
mouseover | Событие происходит когда мышь наводится на элемент. |
mouseout | Событие происходит когда мышь покидает элемент. |
mousedown | Событие происходит когда нажали кнопку мыши на элементе. |
mouseup | Событие происходит когда отжали кнопку мыши на элементе. |
mousemove | Событие происходит при движении мыши. |
| |
| События клавиатуры | |
keydown | Событие происходит когда пользователь нажимает клавишу. |
keyup | Событие происходит когда пользователь отпускает клавишу. |
keypress | Устаревшая. Эта функция больше не рекомендуется. |
| События формы | |
change | когда значение элемента изменилось. |
input | срабатывает каждый раз при изменении значения. В отличие от событий клавиатуры, оно работает при любых изменениях значений, даже если они не связаны с клавиатурными действиями: вставка с помощью мыши или распознавание речи при диктовке текста. |
focus | срабатывает в момент получения элементом фокуса. |
blur | срабатывает когда элемент теряет фокус. |
submit | пользователь отправил форму <form> |
invalid | если элемент не прошел валидацию, только для тега <input>. |
| |
storage | Событие возникает когда область хранения была изменена в контексте другого документа. |
| |
beforeprint | Событие вызывается когда соответствующий документ готов для печати или предварительного просмотра для печати. |
afterprint | |
| События анимации | |
animationend | конец анимации |
transitionend | Событие transitionend срабатывает, когда CSS transition закончил свое выполнение |
| События буфера обмена | |
copy | возникает, когда пользователь копирует контент элемента. Для всех элементов. |
cut | возникает, когда пользователь вырезает контент элемента. Для всех элементов. |
paste | возникает, когда пользователь вставляет контент в элемент. Для всех элементов. |
| События Drag-and-Drop | |
drag | |
dragend | |
dragenter | перетаскиваемый объект перетаскивается над dropArea, делая dropArea целью события drop, если пользователь перетащит его туда. |
dragexit | |
dragleave | перетаскиваемый объект перетащили за пределы dropArea на другой элемент, делая его целью события drop вместо dropArea. |
dragover | |
dragstart | |
drop | пользователь отпустил кнопку мыши, перетаскиваемый объект перетащили на dropArea. |
События в Javascript
HTML события это такая «вещь», которая временами происходит с HTML элементами.
HTML событие может быть неким действием, которое делает браузер или пользователь.
При использовании на HTML странице скрипта JavaScript он может реагировать на эти события.
Вот несколько примеров HTML событий:
- HTML страница закончила загружаться
- Поле ввода было изменено
- Пользователь нажал на HTML кнопку
Часто, при возникновении HTML события необходимо что-то сделать. JavaScript позволяет при обнаружении нужного события выполнить необходимый код. Для этого у HTML элементов есть специальные атрибуты обработчики событий, в которые и можно добавить JavaScript код:
С одинарными кавычками:
элемент событие=’код JavaScript‘>
С двойными кавычками:
<элемент событие=»код JavaScript«>
В следующем примере элементу button добавлен атрибут onclick с JavaScript кодом:
<button>
Какая сейчас дата и время?
</button>
В приведенном примере при нажатии пользователем на кнопку код JavaScript изменит содержимое элемента с id=»demo» и выведет в него текущую дату и время.
В следующем примере JavaScript код изменит содержимое самого элемента (используется команда this.innerHTML):
<button>
Какая сейчас дата и время?
</button>
Однако, очень редко можно увидеть код JavaScript, состоящий из одного выражения. Поэтому обычно в атрибут события записывают вызов JavaScript функции:
<button>
Какая сейчас дата и время?
</button>
Часто используемые HTML события
Ниже приводится список некоторых часто используемых HTML событий:
| Событие | Описание |
|---|---|
| onchange | HTML элемент был изменен |
| onclick | Пользователь кликнул мышкой на HTML элемент |
| onmouseover | Пользователь навел мышку на HTML элемент |
| onmouseout | Пользователь вывел мышку за пределы HTML элемента |
| onkeydown | Пользователь нажал на клавишу клавиатуры |
| onload | Браузер закончил загружать страницу |
Конечно, список событий гораздо длиннее. Смотрите раздел События HTML DOM и HTML атрибуты-события.
Что мож
JavaScript События | Schoolsw3.com
События HTML — «действие», которые происходят с элементами HTML.
При использовании JavaScript на страницах HTML «взаимодействует» на события.
События HTML
Событие HTML может быть чем-то, что делает браузер или чем-то, что делает пользователь.
Вот несколько примеров событий HTML:
- Закончилась загрузка страницы HTML
- Изменено поле ввода HTML
- Была нажата кнопка HTML
Часто, когда события происходят, вы возможно захотите что-то сделать.
Язык JavaScript позволяет выполнять код при обнаружении события.
HTML разрешает атрибуты обработчика событий, в коде JavaScript, добавляется в элемент HTML.
С одиночными кавычками:
<элемент событие=’некоторые JavaScript‘>
С двойными кавычками:
<элемент событие=»некоторые JavaScript«>
В следующем примере атрибут onclick (с кодом), добавляется в элемент button:
В приведенном выше примере код JavaScript изменяет содержимое элемента с помощью id="demo".
В следующем примере код изменяет содержимое собственного элемента с помощью this.innerHTML:
Код JavaScript часто имеет наеменьшее количество строк. Это более распространенный вид вызова функций атрибутов событий:
Общие события HTML
Ниже приведен список некоторых распространенных событий HTML:
| Событие | Описание |
|---|---|
| onchange | Элемент HTML был изменен |
| onclick | Пользователь щелкает элемент HTML |
| onmouseover | Пользователь наводит курсор мыши на элемент HTML |
| onmouseout | Пользователь перемещает указатель мыши от элемента HTML |
| onkeydown | Пользователь нажимает клавишу клавиатуры |
| onload | Браузер закончил загрузку страницы |
Намного больше узнаете на странице: SchoolsW3 JavaScript для обозначения событий DOM в HTML.
Что может сделать JavaScript?
Обработчики событий могут использоваться для обработки и проверки вводимых пользователем данных, действий пользователя и действий браузера:
- Действие, которые должны выполняться каждый раз при загрузке страницы
- Действие, которые должны быть сделаны при закрытии страницы
- Действие, которое должно выполняться при нажатии пользователем кнопки
- Содержимое, которое должно проверяться при вводе пользователем данных
- И многое другое …
Многие различные методы могут использоваться, чтобы позволить JavaScript для работы с событиями:
- Атрибуты событий HTML могут выполнять код JavaScript напрямую
- Атрибуты событий HTML могут вызывать функции JavaScript
- Можно назначить собственные функции обработчика событий элементам HTML
- Можно предотвратить события отправлять или обрабатывать
- И многое другое …
Вы узнаете намного больше о события и обработчики событий в HTML-главы дом.
событий JavaScript
HTML-события — это «вещей» , которые происходят с элементами HTML.
Когда JavaScript используется на HTML-страницах, JavaScript может
«реагировать» на
эти события.
HTML-события
Событие HTML может быть чем-то, что делает браузер или пользователем.
Вот несколько примеров событий HTML:
- Веб-страница HTML завершила загрузку
- Поле ввода HTML было изменено
- Была нажата кнопка HTML
Часто, когда случаются события, вы можете захотеть что-то сделать.
JavaScript позволяет выполнять код при обнаружении событий.
HTML позволяет добавлять атрибуты обработчика событий, с кодом JavaScript , в элементы HTML.
В одинарных кавычках:
< элемент
событие = ‘ некоторый JavaScript ‘ >
С двойными кавычками:
< элемент
событие = « некоторый JavaScript » >
В следующем примере атрибут onclick (с кодом) добавляется к
элемент:
Пример
Попробуй сам »
В приведенном выше примере код JavaScript изменяет содержимое
элемент с.
В следующем примере код изменяет содержимое
собственный элемент (используя , этот .innerHTML ):
Пример
Попробуй сам »
Код JavaScript
часто состоит из нескольких строк. Чаще всего можно увидеть функции вызова атрибутов событий:
Общие события HTML
Вот список некоторых распространенных событий HTML:
| Событие | Описание |
|---|---|
| на замену | Изменен элемент HTML |
| onclick | Пользователь щелкает элемент HTML |
| на мышке над | Пользователь наводит указатель мыши на элемент HTML |
| onmouseout | Пользователь отводит указатель мыши от элемента HTML |
| onkeydown | Пользователь нажимает клавишу на клавиатуре |
| загрузка | Браузер завершил загрузку страницы |
Список намного длиннее: W3Schools Справочник по JavaScript События HTML DOM.
Что умеет JavaScript?
Обработчики событий
могут использоваться для обработки и проверки пользовательского ввода, действий пользователя,
и действий браузера:
- Что нужно делать каждый раз при загрузке страницы
- Что делать, когда страница закрыта
- Действие, которое должно выполняться, когда пользователь нажимает кнопку
- Контент, который следует проверять, когда пользователь вводит данные
- И многое другое …
Для работы JavaScript с событиями можно использовать множество различных методов:
- Атрибуты событий HTML могут выполнять код JavaScript напрямую
- Атрибуты событий HTML могут вызывать функции JavaScript
- Вы можете назначить свои собственные функции обработчика событий элементам HTML
- Вы можете запретить отправку или обработку событий
- И многое другое…
Вы узнаете намного больше о событиях и их обработчиках в главах HTML DOM.
.
событий JavaScript
Следующий список для всех обработчиков событий JavaScript содержит событий Window , событий Form , событий клавиатуры , событий мыши и событий Media . Эти события JavaScript поддерживаются в тегах HTML5.
Глобальные атрибуты событий JavaScript, которые добавляются к элементам HTML для определения события и выполнения при возникновении определенного действия.
Атрибуты событий окна JavaScript
JavaScript Окно событий, запускаемых для объекта окна и применяемых в теге
| Атрибуты | Значение | Описание | В HTML5? |
|---|---|---|---|
| после печати | js_script | Скрипт запускается после печати документа | НОВЫЙ |
| до отпечатка | js_script | Скрипт запускается перед печатью документа | НОВЫЙ |
| до выгрузки | js_script | Скрипт запускается перед выгрузкой документа | НОВЫЙ |
| ошибка | js_script | Скрипт запускается при возникновении ошибки | НОВЫЙ |
| в обмен на | js_script | Скрипт запускается при изменении документа | НОВЫЙ |
| загрузка | js_script | Событие срабатывает после завершения загрузки страницы | |
| в сообщении | js_script | Сценарий запускается, когда документ переходит в автономный режим | НОВЫЙ |
| в сети | js_script | Сценарий запускается, когда документ появляется в сети | НОВЫЙ |
| на странице скрыть | js_script | Скрипт запускается, когда окно документа скрыто | НОВЫЙ |
| onpageshow | js_script | Скрипт запускается, когда окно документа становится видимым | НОВЫЙ |
| onpopstate | js_script | Скрипт запускается при изменении истории окна документа | НОВЫЙ |
| дальше | js_script | Скрипт запускается при выполнении документа повторно | НОВЫЙ |
| по размеру | js_script | Событие возникает при изменении размера окна браузера | НОВЫЙ |
| на складе | js_script | Скрипт запускается при обновлении области веб-хранилища | НОВЫЙ |
| onundo | js_script | Скрипт запускается, когда документ выполняет отмену | НОВЫЙ |
| под нагрузкой | js_script | Событие возникает при закрытии окна браузера |
События формы JavaScript
JavaScript Форма событий, вызванных выполнением некоторого действия внутри элементов HTML-формы.
| Атрибуты | Значение | Описание | В HTML5? |
|---|---|---|---|
| onblur | js_script | Событие срабатывает, когда элемент теряет фокус | |
| на замену | js_script | Событие возникает при изменении значения элемента | |
| контекстное меню | js_script | Событие срабатывает при срабатывании контекстного меню | НОВЫЙ |
| onfocus | js_script | Событие срабатывает, когда элемент получает фокус | |
| onformchange | js_script | Событие срабатывает при изменении формы | НОВЫЙ |
| onforminput | js_script | Событие возникает, когда форма получает поле ввода | |
| на входе | js_script | Событие возникает, когда элемент получает поле ввода | НОВЫЙ |
| недействительно | js_script | Событие возникает при недопустимом элементе | НОВЫЙ |
| сброшено | js_script | Событие срабатывает при нажатии на кнопку сброса формы | УДАЛИТЬ |
| при выборе | js_script | Событие срабатывает после разрешения выделения текста в элементе | |
| при подаче | js_script | Событие пожар при отправке формы |
События клавиатуры JavaScript
| Атрибуты | Значение | Описание | В HTML5? |
|---|---|---|---|
| нажатие клавиши | js_script | Событие срабатывает при нажатии клавиши | |
| onkeypress | js_script | Событие срабатывает при нажатии клавиши | |
| onkeyup | js_script | Событие срабатывает при отпускании клавиши |
События мыши JavaScript
JavaScript Мышь событий, запускаемых действием мыши.
| Атрибуты | Значение | Описание | В HTML5? |
|---|---|---|---|
| onclick | js_script | Событие срабатывает при щелчке мышью по элементу | |
| ondblclick | js_script | Событие срабатывает при двойном щелчке мышью по элементу | |
| ондраг | js_script | Скрипт запускается при перетаскивании элемента | НОВЫЙ |
| драгенд | js_script | Скрипт запускается в конце операции перетаскивания | НОВЫЙ |
| ондрагентер | js_script | Сценарий запускается, когда элемент перетаскивается на допустимую цель для перетаскивания | НОВЫЙ |
| ondragleave | js_script | Сценарий запускается, когда элемент покидает допустимую цель перетаскивания | НОВЫЙ |
| вперед | js_script | Сценарий запускается, когда элемент перетаскивается на допустимую цель перетаскивания | НОВЫЙ |
| ondragstart | js_script | Скрипт запускается при запуске операции перетаскивания | НОВЫЙ |
| капля | js_script | Скрипт запускается при отбрасывании перетаскиваемого элемента | НОВЫЙ |
| onmousedown | js_script | Событие срабатывает при нажатии кнопки мыши на элементе | |
| onmousemove | js_script | Событие возникает при наведении указателя мыши на элемент | |
| на мышке | js_script | Событие возникает, когда указатель мыши перемещает элемент | |
| на мышке над | js_script | Событие возникает при наведении указателя мыши на элемент | |
| onmouseup | js_script | Событие срабатывает при отпускании кнопки мыши над элементом | |
| колесо мыши | js_script | Событие срабатывает при вращении колеса мыши | НОВЫЙ |
| прокрутка | js_script | Событие возникает при прокрутке полосы прокрутки элемента | НОВЫЙ |
Медиа-события JavaScript
JavaScript Медиа События, запускаемые общими медиа-элементами, такими как ,
| Атрибуты | Значение | Описание | В HTML5? |
|---|---|---|---|
| onabort | js_script | Скрипт запускается при прерывании элемента | |
| oncanplay | js_script | Скрипт запускается, когда файл готов к воспроизведению | НОВЫЙ |
| может пройти через | js_script | Скрипт запускается, когда файл воспроизводится полностью без паузы для буферизации | НОВЫЙ |
| на срок замены | js_script | Скрипт запускается при изменении длины носителя | НОВЫЙ |
| пусто | js_script | Скрипт запускается, когда что-то недоступно / отключается | НОВЫЙ |
| завершено | js_script | Сценарий запускается, когда носитель достигает конечной позиции | НОВЫЙ |
| ошибка | js_script | Скрипт запускается при возникновении ошибки время загрузки файла | НОВЫЙ |
| загруженные данные | js_script | Скрипт запускается при загрузке носителя | НОВЫЙ |
| загруженные метаданные | js_script | Скрипт запускается при загрузке метаданных | НОВЫЙ |
| onloadstart | js_script | Скрипт запускается при загрузке файла | НОВЫЙ |
| на паузу | js_script | Скрипт запускается, когда мультимедиа приостановлена | НОВЫЙ |
| в игре | js_script | Сценарий запускается, когда носитель готов начать воспроизведение | НОВЫЙ |
| на игре | js_script | Скрипт запускается, когда медиа действительно запускается для воспроизведения | НОВЫЙ |
| в процессе | js_script | Скрипт запускается, когда браузер получает медиаданные | НОВЫЙ |
| на скорости изменения | js_script | Скрипт запускается при изменении скорости воспроизведения | НОВЫЙ |
| onreadystatechange | js_script | Скрипт запускается при каждом изменении состояния готовности | НОВЫЙ |
| востребовано | js_script | Сценарий запускается при поиске значения атрибута, установленного в false, что означает, что поиск завершен. | НОВЫЙ |
| в поиске | js_script | Сценарий запускается при поиске значения атрибута, установленного на true, что означает, что поиск активен. | НОВЫЙ |
| установлен | js_script | Сценарий запускается, когда браузер не может получить мультимедийные данные по какой-либо причине | НОВЫЙ |
| включен | js_script | Сценарий запускается, когда выборка мультимедийных данных останавливается до полной загрузки по какой-либо причине | НОВЫЙ |
| ontimeupdate | js_script | Скрипт запускается при изменении игровой позиции | НОВЫЙ |
| по объему изменить | js_script | Скрипт запускается каждый раз при изменении громкости | НОВЫЙ |
| ожидает | js_script | Сценарий запускается, когда носитель приостановлен (для буферизации дополнительных данных) | НОВЫЙ |
.
событий JavaScript DOM
HTML DOM позволяет JavaScript реагировать на события HTML:
Реагирование на события
JavaScript может выполняться при возникновении события, например, когда пользователь щелкает элемент HTML.
Чтобы выполнить код, когда пользователь щелкает элемент, добавьте код JavaScript в атрибут события HTML:
Примеры событий HTML:
- Когда пользователь щелкает мышью
- Когда веб-страница загружена
- Когда изображение загружено
- При наведении курсора мыши на элемент
- При изменении поля ввода
- При отправке HTML-формы
- Когда пользователь нажимает клавишу
В этом примере содержимое элемента