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

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

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

На этом уроке мы рассмотрим основные виды событий, которые Вы можете перехватывать с помощью 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Наступает, когда элемент получает фокус, т.е. в него помещается курсор или выполнен переход клавишей Tab2
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

Оставить комментарий

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

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