События javascript – Справочник JavaScript событий | JavaScript события

JavaScript — Виды событий | ИТ Шеф

29.06.2015(обновлено: 01.07.2015) Александр Мальцев

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

Все события JavaScript можно разделить на следующие категории: события мыши (Mouse Events), события клавиатуры (Keyboard Events), события объектов и фреймов (Frame/Object Events), события формы и элементов управления (Form Events), события перетаскивания (Drag Events), события анимации (Animation Events), события буфера обмена (Clipboard Events), события мультимедиа (Media Events), события трансформации (Transition Events), события, посылаемые сервером (Server-Sent Events), события касания (Touch Events), события печати (Print Events), разные события (Misc Events).

Внимание: все события в JavaScript пишутся строчными (маленькими) буквами.

• mousedown — событие происходит, когда кнопка мыши нажата над некоторым элементом, но ещё не отпущена.
• mouseup — событие происходит, когда кнопка мыши над некоторым элементом перешла из состояния нажатия, в состояние отпущена.
• click — событие происходит, когда пользователь кликнул мышью на элементе. Порядок возникновения событий, связанных с click (для левой и средней кнопки мыши): mousedown -> mouseup -> click.
• contextmenu — событие происходит, когда пользователь кликнул правой кнопкой мышью на элементе. Порядок возникновения событий, связанных с contextmenu (для правой кнопки мыши):
  mousedown -> mouseup -> contextmenu.
• dblclick — событие происходит, когда пользователь выполнил двойной клик на элементе. Порядок возникновения событий, связанных с dblclick: mousedown -> mouseup -> click -> mousedown -> mouseup -> click -> dblclick.
• mouseover — событие происходит, когда курсор мыши входит в область, принадлежащей элементу или одному из его детей.
• mouseout — событие происходит, когда курсор мыши уходит из области, принадлежащей элементу или одному из его детей.
• mousemove — событие происходит, когда курсор мыши перемещается внутри области, принадлежащей элементу.
• mouseenter — событие возникает, когда указатель мыши входит в область, принадлежащую элементу. Это событие часто используется вместе с событием mouseleave , которое происходит, когда указатель мыши уходит из области, принадлежащей элементу. Событие mouseenter подобно событию mouseover и отличается от него только тем, что событие mouseenter не всплывает (с понятием всплытия события мы познакомимся немного позже).
• mouseleave — событие происходит, когда указатель мыши уходит из области, принадлежащей элементу. Событие mouseleave подобно событию mouseout и отличается от него только тем, что событие mouseleave не всплывает (с понятием всплытия события мы познакомимся немного позже).

Порядок возникновения событий: keydown -> keypress -> keyup.

• keydown — событие происходит, когда нажата клавиша на клавиатуре над элементом, но ещё не отпущена.
• keyup — событие происходит, когда нажатая клавиша на клавиатуре над элементом перешла в состояние отпущено.
• keypress — событие происходит, когда пользователь нажал клавишу на клавиатуре над элементом.

• beforeunload — событие происходит, перед тем как документ будет выгружен. Это событие позволяет отображать дополнительное сообщение в диалоговом окне подтверждения «Вы действительно хотите покинуть эту страницу?». Стандартное сообщение, которое появляется при закрытии документа, может отличаться в разных браузерах. Но его Вы не можете изменить или удалить, Вы можете только с помощью этого метода добавить к нему собственное сообщение, которое будет отображаться вместе с сообщением по умолчанию.
• error — событие срабатывает при возникновении ошибки, которая происходит при загрузке внешнего файла (например, документа или изображения).
• hashchange — событие происходит при изменении якорной части (начинается с символа ‘#’) текущего URL.
• load — событие происходит, когда загрузка объекта завершена. Событие load наиболее часто используется для элемента body, чтобы выполнить сценарий сразу же после того как веб-страница полностью загрузится.
• unload — событие происходит при выгрузке страницы (например, при закрытии вкладки (окна) браузера).
• pageshow — событие происходит, когда пользователь переходит на веб-страницу, т.е. после того как страница становится доступна пользователю. Событие pageshow похоже на событие load, за исключением того, что оно срабатывает каждый раз при загрузке страницы, даже если она загружается из кэша. При первой загрузке страницы событие pageshow срабатывает сразу после события load.
• pagehide — событие происходит, когда пользователь уходит со страницы (событие pagehide происходит до события unload). Кроме этого данное событие, в отличие от события unload не препятствует кэшированию страницы.
• resize — событие происходит при изменении размеров окна браузера.
• scroll — событие происходит, когда вы прокручиваете содержимое элемента, имеющего полосу прокрутки.

• focus — событие происходит, когда элемент получает фокус. Данное событие не всплывает.
• blur — событие происходит, когда объект теряет фокус. Данное событие не всплывает.
• focusin — событие происходит, когда элемент получает фокус. Событие focusin подобно событию focus, но отличается от него тем, что оно всплывает. Поэтому его можно использовать, когда Вам необходимо выяснить, кто теряет фокус: элемент или его ребёнок?
• focusout — событие происходит, когда элемент собирается потерять фокус. Событие focusout подобно событию blur, но отличается от него тем, что оно всплывает. Поэтому его можно использовать, когда Вам необходимо выяснить, кто теряет фокус: элемент или его ребёнок?
• change — событие происходит при изменении значения элемента, но уже после того как элемент потерял фокус. Кроме события
  change в JavaScript есть также похожее событие input, которое отличается от события change тем, что происходит сразу же после изменения значения элемента. Событие сhange в отличие от события input также работает с элементами keygen и select. Для радиокнопок (radiobuttons) и флажков (checkboxes) событие change происходит при изменении состояния этих элементов.
• input — событие происходит после того как изменяется значение элемента input или элемента textarea.
• invalid — событие происходит, когда элемент input, данные которого необходимо отправить вместе с другими данными формы на сервер, содержит недопустимые данные.
• reset — событие происходит перед очисткой формы, которая осуществляется элементом
  input с type="reset".
• search — событие возникает после того как пользователь нажимает на клавишу Enter или нажимает кнопку «x» (отмена) в элементе input с type="search".
• select — событие происходит после того как Вы выбрали некоторый текст в элементе. Событие select в основном используется для элемента input с type="text" или textarea.
• submit — событие происходит перед отправкой формы на сервер.

События, связанные с перетаскиваемым объектом (draggable target, исходный объект):

• dragstart – событие происходит, когда пользователь начал перетаскивать элемент;
• drag – событие происходит, когда пользователь перетаскивает элемент;
• dragend – событие происходит, когда пользователь закончил перетаскивания элемента, т.е. когда отпустил курсор мыши.

События, связанные с объектом (drop target), который принимает перетаскиваемый объект (draggable target):

• dragenter – событие происходит, когда перетаскиваемый объект (draggable target) вошёл в область элемента (drop target), который может принять перетаскиваемый объект (draggable target).
• ragleave – событие происходит, когда перетаскиваемый объект (draggable target) покидает пределы элемента (drop target), который может его принять.
• dragover — событие происходит, когда перетаскиваемый объект (draggable target) перемещается в области элемента (drop target), который может его принять.
• drop — событие происходит, когда пользователь отпускает перетаскиваемый объект (draggable target) в область элемента (drop target), который может его принять.

Три события, которые могут произойти, во время выполнения CSS анимации:

• animationstart — возникает, когда анимация CSS началась.
• animationiteration — возникает, когда анимация CSS выполняется повторно.
• animationend — возникает, когда CSS анимация закончилась.

• сopy — событие происходит, когда пользователь копирует содержимое элемента. Событие copy также происходит, когда пользователь копирует элемент (например, изображения, созданные с помощью элемента img). Событие copy используется в основном для элементов input с type="text".
• сut — событие происходит, когда пользователь вырезает содержимое элемента.
• paste — событие происходит, когда пользователь вставляет некоторое содержимое в элемент.

• afterprint — событие происходит, когда страница начинает печататься (т.е. после нажатия кнопки «Печать» в диалоговом окне) или если диалоговое окно «Печать» было закрыто.
• beforeprint — событие возникает перед печатью страницы, т.е. до открытия диалогового окна «Печать».

• transitionend — событие возникает, когда CSS-переход завершен. Примечание: если переход удален до завершения, (например, если свойство CSS transition-property удалено), то событие transitionend не сработает.

• error — событие возникает при возникновении ошибки с источником события. Ошибка обычно возникает, когда связь нарушается. Если это произойдет, то объект EventSource будет автоматически пытаться подключиться к серверу.
• open — событие возникает, когда соединение с источником события открыто.
• message — событие возникает, когда сообщение получено через источник события.
  Объект event события message поддерживает следующие свойства:
  • data — содержит сообщение.
  • origin — URL документа, который вызвал событие.
  • lastEventId — идентификатор (id) последнего полученного сообщения.

В процессе загрузки аудио/видео события происходят в следующем порядке: loadstart -> durationchange -> loadedmetadata -> loadeddata -> progress -> canplay -> canplaythrough.

• abort — событие возникает, когда прерывается загрузка аудио/видео. Это событие возникает именно когда загрузка медиа данных была прервана (отменена), а не, потому что возникла ошибка.
• error — событие возникает, когда произошла ошибка при загрузке аудио/видео.
• stalled — событие возникает, когда браузер пытается получить медиа данные, но данные недоступны.
• suspend — событие возникает, когда браузер не может получить медиа данные, т.е. загрузка медиа останавливается по какой-то причине.
• loadstart — событие происходит, когда браузер начинает искать указанное аудио/видео, т.е. когда начинается процесс загрузки.
• durationchange — событие возникает, когда изменяется длительность аудио/видео. Если аудио/видео загружается, то длительность будет меняться от значения «NaN» до фактической длительности аудио/видео.
• loadedmetadata — событие возникает, когда метаданные для указанного аудио/видео загружены. Метаданные аудио/видео состоят из: длительности, размера (только видео) и текстовой дорожки.
• loadeddata — событие возникает, после того как первый кадр медиа загрузился.
• progress — событие происходит, когда браузер загружает указанное аудио/видео.
• canplay — событие возникает, когда браузер может начать воспроизведение указанного аудио/видео (т.е. когда буферизация потока аудио/видео достаточна для того чтобы браузер мог начать его воспроизводить).
• canplaythrough — событие возникает в тот момент времени, когда браузер может проигрывать указанное медиа без остановки на буферизацию.
• ended — событие происходит, когда воспроизведение аудио/видео завершилось (достигло конца). Это событие может использоваться для вывода сообщений типа «Спасибо за внимание», «Спасибо за просмотр» и др.
• pause — событие происходит, когда воспроизведение аудио/видео приостановлено пользователем или с помощью кода (программно).
• play — событие происходит, когда начинается воспроизведение аудио/видео. Оно также происходит, когда аудио/видео было снято с паузы и начинает воспроизводиться.
• playing — событие происходит, когда аудио/видео воспроизводится после того как оно было поставлено на паузу или остановилось для буферизации.
• ratechange — событие происходит, когда изменяется скорость воспроизведения аудио/видео.
• seeking — событие происходит, когда пользователь начинает перемещение ползунка (переход) к новой временной позиции проигрываемого аудио/видео.
• seeked — событие происходит, когда пользователь закончил перемещение ползунка (переход) в новую временную позицию проигрываемого аудио/видео. Событие seeked противоположно событию seeking. Для того чтобы получить текущую позицию воспроизведения, используйте свойство currentTime объекта Audio/Video.
• timeupdate — событие происходит при изменении временной позиции воспроизводимого аудио/видео.
  Это событие происходит:
  • при воспроизведении потока аудио/видео.
  • при перемещении ползунка в новую временную позицию воспроизводимого аудио/видео.
  Событие timeupdate часто используется вместе со свойством объекта Audio/Video currentTime, которое возвращает текущую временную позицию воспроизводимого аудио/видео в секундах.
• volumechange – событие происходит каждый раз при изменении громкости воспроизводимого потока видео/аудио.
  Это событие происходит, при:
  • увеличении или уменьшении громкости;
  • отключении или включении звука.
• waiting — событие происходит, когда видео останавливается для буферизации.

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

1. Является ли событие «Нажатие клавиши на клавиатуре (onkeypress)» сложным? И если является, то в результате, каких простых событий оно возникает?
2. Например, у Вас есть 2 элемента р и пользователь перемещает мышку с области, принадлежащей одному элементу р, на область, принадлежащую другому элементу р. То, какие в этом случае возникают события, и какие элементы их генерируют?

itchief.ru

Список родных событий Javascript

Событие	Обработчик события	Поддерживающие 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-элементы	Прокрутка окна или области

oddler.ru

JavaScript События

---

---

События 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-главы дом.

---

---

schoolsw3.com

Виды событий в JavaScript | HTML+

События мыши

События мыши (Mouse Events)

Событие	Описание	Уровень DOM
onclick	Наступает при клике пользователя на элементе	2
oncontextmenu	Наступает, когда пользователь делает клик правой кнопкой мыши на элементе, чтобы открыть контекстное меню	3
ondblclick	Наступает при двойном клике пользователя на элементе	2
onmousedown	Наступает при нажатии левой кнопки мыши на элементе	2
onmouseup	Происходит, когда пользователь отпускает кнопку мыши над элементом	2
onmouseenter	Наступает, когда  указатель мыши перемещается на элемент	2
onmouseleave	Событие происходит, когда указатель перемещается за пределы элемента	2
onmousemove	Происходит, когда указатель мыши двигается над элементом	2
onmouseover	Происходит, когда указатель мыши перемещается на элемент или на один из его дочерних элементов	2
onmouseout	Событие происходит, когда пользователь убирает указатель мыши с элемента или с одного из его дочерних элементов	2

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

События клавиатуры (Keyboard Events)

Событие	Описание	Уровень DOM
onkeydown	Событие происходит, когда пользователь нажимает клавишу	2
onkeypress	Наступает, когда пользователь жмет на клавишу	2
onkeyup	происходит, когда пользователь отпускает клавишу	2

Примечание: Событие onkeypress не срабатывает для всех клавиш (например, клавиши Alt, Ctrl, Shift, Esc) во всех браузерах. Чтобы определить, нажал ли пользователь соответствующую клавишу, необходимо использовать событие onkeydown вместо onkeypress, поскольку оно работает для всех клавиш.
Также нужно учитывать, что обработка этого события поддерживается для всех HTML-тегов, кроме: <base>, <bdo>, <br>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style>, and <title>

События окон/фреймов/объектов

События окон/фреймов/объектов (Frame/Object Events)

Событие	Описание	Уровень DOM
onabort	Наступает, когда загрузка ресурса была прервана	2
onbeforeunload	Происходит до того, как документ будет выгружен	2
onerror	Наступает, когда во время загрузки внешнего файла происходит ошибка (например, неверно указан путь к файлу изображения)	2
onhashchange	Событие происходит, когда произошли изменения в якорной части URL-адреса (http://somesite.com#about-us)	3
onload	Происходит, когда объект загрузился. Обрабатывается для таких html-элементов, как <body>, <frame>, <iframe>, <img>, <input type=»image»>, <link>, <script>, <style>	2
onunload	Событие происходит, когда страница выгружается (для элемента <body>)	2
onpageshow	Событие происходит, когда пользователь переходит на веб-страницу	3
onpagehide	Происходит, когда пользователь покидает веб-страницу	3
onresize	Происходит, когда размер видимой части документа изменяется (при изменении размеров окна браузера)	2
onscroll	Событие происходит, когда элемент прокручивается (для элементов, у которых задана высота и ширина и overflow: auto или scroll, а также для body, iframe, textarea)	2

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

События форм и элементов форм (Form Events)

Событие	Описание	Уровень DOM
onfocus	Наступает, когда элемент получает фокус, т.е. в него помещается курсор или выполнен переход клавишей Tab	2
onfocusin	Событие происходит, когда элемент собирается получить фокус. Похоже на событие onfocus, которое не всплывает. Поэтому, если вы хотите узнать, получает ли фокус элемент или его ребенок, вы должны использовать событие onfocusout.Не поддерживается в FireFox.	2
onfocusout	Происходит, когда элемент собирается терять фокус. Похоже на событие onblur, но onblur событие не всплывает. Поэтому, если вы хотите узнать, теряет ли фокус элемент или его ребенок, вы должны использовать событие onfocusout. Не поддерживается в FireFox.	2
onblur	Событие возникает, когда элемент теряет фокус, т.е. курсор покидает этот элемент.	2
onchange	Событие происходит, когда содержимое элемента формы, выделения или выбора изменяется (для элементов <input>, <select>, and <textarea>)	2
oninput	Событие происходит, когда происходит ввод текста в элемент	3
oninvalid	Происходит, когда элемент заполнен неверно	3
onreset	Событие происходит при сбросе формы (аналогично нажатию на кнопку типа reset)	2
onsearch	Событие происходит, когда пользователь набирает что-либо в поле поиска (для <input type=»search»>)	3
onselect	Наступает, когда пользователь выделяет текст (или его часть) в поле (для элементов <input> and <textarea>)	2
onsubmit	Событие возникает при отправке формы и должно обрабатываться для <form>	2

События перетаскивания

События перетаскивания (Drag Events)

Событие	Описание	Уровень DOM
ondrag	Событие возникает, когда элемент перетаскивается	3
ondragstart	Событие возникает, когда пользователь начинает перетаскивать элемент	3
ondragend	Событие происходит, когда пользователь закончил перетаскивание элемента	3
ondragenter	Происходит, когда элемент перетаскивания входит в целевую точку другого элемента.	3
ondragleave	Событие происходит, когда элемент перетаскивания оставляет цель удаления.	3
ondragover	Событие происходит, когда элемент перетаскивания находится над целевой точкой	3
ondrop	Событие происходит, когда элемент перетаскивания удаляется по целевой точке	3

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

Для того чтобы события приводили к каким-то изменениям на html-странице, в JavaScript записываются обработчики событий в виде функций. Вы можете прочитать подробней об этом в статье «Обработка событий в JavaScript».

На основе статьи W3CScholls

html-plus.in.ua

События в Javascript

В этом видео мы с вами рассмотрим события (по английски евенты) в javascript. И мы с вами на самом деле их уже использовали, когда писали onсlick на DOM елементе. То есть мы с вами добавляли евент клик на DOM елемент.

Зачем нам нужны евенты вообще? Когда мы хотим выполнить какой-то код при клике на елемент, либо при наведении мыши, либо при фокусе, то нам нужны евенты. То есть мы вешаем евент на DOM елемент и он там висит. И ждет, когда же мы сделаем такой евент. Например когда мы кликнем по елементу. И тогда он выполняет эту функцию.

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

Давайте уберем атрибут onclick с нашей кнопки, и добавим ей класс change

<button>Change</button>

Теперь в начале выполнения нашего javascript файла мы хотим повесить слушателя (по английски listener) этого евента на нашу кнопку.

Но сейчас мы столкнемся с одним нюансом. Давайте попробуем в нашем файле найти кнопку и законсолить ее

console.log(document.querySelector('.change'))

Если мы посмотрим в браузер, то нам вывелось null. И вполне справедливо, так как браузер исполняет код сверху вниз, и на момент, когда у нас отрабатывает javascript, DOM у нас еще не загружен. Пофиксить это очень просто. Давайте переставим script javascript в конец body. Это абсолютно нормальная практика.

<body>
  <button>Change</button>
  <script src='code.js'></script>
</body>

Теперь если мы посмотрим в браузер, то наш елемент вывелся и мы можем с ним работать. Давайте повесим listener клика на нашу кнопку.

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

var changeButton = document.querySelector('.change')

changeButton.addEventListener('click', function () {
  console.log('we clicked!')
})

Если мы посмотрим в браузер, то при клике у нас вывелся наш console.log.

И таким образом можно навешивать сколько угодно обработчиков. Наприме давайте добавим еще один listener.

var changeButton = document.querySelector('.change')

changeButton.addEventListener('click', function () {
  console.log('we clicked!')
})

changeButton.addEventListener('click', function () {
  console.log('we clicked2!')
})

Давайте теперь напишем небольшой пример. Мы хотим создать 2 елемента и при наведении на первый, мы хотим показывать второй елемент.

Давайте добавим 2 елемента на страницу и добавим им классы. Второй елемент скроем написав inline display: none. Конечно, лучше было бы написал стили в отдельном css файле, но для маленького примера можно и так.

<div>
  First element
</div>
<div>
  Second element
</div>

Теперь давайте найдем эти два елемента в нашем javascript

var firstElement = document.querySelector('.firstElement')
var secondElement = document.querySelector('.secondElement')

И навесим на первый елемент 2 события: mouseover и mouseout. То есть первое будет происходить при наведении на елемент, а второе когда курсор уходит с елемента.

var firstElement = document.querySelector('.firstElement')
var secondElement = document.querySelector('.secondElement')

firstElement.addEventListener('mouseover', function () {
  console.log('mouse in')
})

firstElement.addEventListener('mouseout', function () {
  console.log('mouse out')
})

Если мы посмотрим в браузер, то при наведении и выведении курсора выводится console.log.

Давайте теперь при наведении добавим второму елементу display: block, а при уведении курсора display: none

var firstElement = document.querySelector('.firstElement')
var secondElement = document.querySelector('.secondElement')

firstElement.addEventListener('mouseover', function () {
  secondElement.style.display = 'block'
})

firstElement.addEventListener('mouseout', function () {
  secondElement.style.display = 'none'
})

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

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

monsterlessons.com

JavaScript События

HTML события имели место на HTML-элементов вещей.

При использовании JavaScript в HTML-страницы, JavaScript может вызвать эти события.

---

HTML событие

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

Ниже приведены примеры HTML события:

• HTML страницы завершения загрузки
• Когда HTML изменения поля ввода
• Кнопка HTML нажата

Как правило, когда происходит событие, вы можете сделать что-то.

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

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

Одинарные кавычки:

<Some-HTML-элемента ино- событие = ‘некоторые JavaScript’>

Двойные кавычки:

<Some-HTML-элемента ино- событие = «некоторые JavaScript»>

В следующем примере, кнопка элемент добавлен атрибут OnClick (плюс код):

примеров

<Кнопка OnClick = ‘getElementById ( «демо»). InnerHTML = Date ()’> Время ?? </ кнопка>

Попробуйте »

В приведенном выше примере, JavaScript содержание кода ID = элемент «демо».

В следующем примере, код будет изменять содержимое самого элемента ( с помощью этого .innerHTML):

	JavaScript-код, как правило, несколько строк кода. Чаще вызывается свойствами событий:

---

Общие события HTML

Вот список некоторых общих событие HTML:

событие	описание
OnChange	Изменения элементов HTML
OnClick	Пользователь нажимает на HTML элемент
OnMouseOver	Пользователь перемещает курсор мыши на элемент HTML
onmouseout	Пользователи переместить мышь из элемента HTML
OnKeyDown	Пользователь нажимает клавишу
OnLoad	Браузер завершил загрузку страницы

Подробнее Список событий: Код JavaScript Reference — HTML DOM событие .

---

JavaScript Что можно сделать?

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

• Событие срабатывает при загрузке страницы
• Событие срабатывает, когда страница Закрыть
• Пользователь нажимает на кнопку, чтобы выполнить действие
• Проверить достоверность пользовательского ввода
• И так далее …

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

• Атрибуты событий HTML могут выполнять код JavaScript напрямую
• Атрибуты событий HTML может вызвать функцию JavaScript
• Вы можете задать свой собственный обработчик событий для элементов HTML
• Вы можете предотвратить возникновение события.
• И так далее …

	В HTML DOM главе вы узнаете больше о событии и знания обработчика событий.

www.w3big.com