Типы событий. События в javaScript События dom 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 - событие возникает, когда браузер пытается получить медиа данные, но данные недоступны.
• - событие происходит, когда браузер начинает искать указанное аудио/видео, т.е. когда начинается процесс загрузки.
• 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 - событие происходит при прокручивании колеса мыши вперёд или назад над элементом.

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

Каждое событие имеет своё название. click - это нажатие левой кнопки мыши, keydown - нажатие клавиши, focus - появление в фокусе элемента формы, Обработка события

Функция, которая выполняется при срабатывании события называется обработчик события . Для каждого типа событий есть свой обработчик. Название обработчика состоит из слова on и названия события. Например, обработчик события click называется onclick . События происходят не на странице вообще, а на конкретном элементе. Соответственно и обработчик - это не отдельная функция. Обработчик ставится на какой-то элемент страницы.

Есть разные способы назначить элементу обработчик события. Можно назначить обработчик через атрибут тэга. Код, который должен выполниться при срабатывании события, пишется в значении атрибута. Создадим страницу, добавим на неё кнопку и назначим ей обработчик события click :

JavaScript:

JavaScript:

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

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

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

Параметры:

событие - событие, которое нужно обрабатывать

функция - функция, которая становится обработчиком

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

HTML код:

JavaScript:

Метод removeEventListener() позволяет удалить обработчик.

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

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

При каждом срабатывании события формируется объект события. Объект содержит информацию о событии. У разных типов событий разные объекты. Но существуют и свойства, которые есть у любого объекта. Например, свойство type содержит тип события.

Объект события передаётся в качестве параметра в функцию, которая является обработчиком. Для доступа к объекту нужно в функции создать параметр. Через этот параметр и производится обращение к объекту. Если у функции предполагаются ещё другие параметры, то объект события должен быть первым параметром. Изменим обработчик для кнопки, у которой id равно "button". Получим доступ к объекту события. Вместо сообщения о нажатии кнопки, выведем тип события. Теперь обработчик будет выглядеть так:

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

У всех объектов события есть свойство currentTarget . Оно возвращает элемент, на котором сработало событие. Это может показаться бессмысленным. Ведь обработчик назначен конкретному элементу. Зачем ещё раз возвращать этот элемент? Но с событимяи браузера всё несколько сложнее. Чуть позже Вы узнаете, как это используется. Другие свойства мы рассмотрим при изучении конкретных событий.

От автора: после загрузки и полной готовности веб-страницы в JavaScript запускается целый каскад событий, которых становится еще больше, когда пользователь начинает взаимодействовать со страницей тем или иным образом. К событиям можно отнести загрузку страницы, ее прокрутку, клик по кнопке или даже заполнение формы. Для запуска событий в JavaScript нужен специальный код, который вы сами проектируете и прописываете, тем самым выстраивая более глубокое взаимодействие.

События в JS можно разделить на 4 больших группы:

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

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

События фокуса и форы. По большей части ассоциируются с формами: поле input «получает фокус», когда пользователь готов с ним взаимодействовать. Другие события отслеживают передачу формы, изменение значений полей формы и т.д.

JavaScript. Быстрый старт

События мутаций и наблюдатели. Мутирующие элементы отслеживаются при изменении структуры DOM: к примеру, когда элементы на странице вставляются или удаляются при помощи скрипта.

Специальный код, который будет срабатывать только для определенного элемента DOM, создает обработчик события. В JS есть три способа создать обработчик событий:

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

В примере выше после того, как поле получит фокус, и пользователь перейдет к заполнению следующего поля (к примеру, при помощи TAB или обычного клика), элемент вызовет функцию checkName, которая написана в JS.
Стандартные HTML обработчики событий не рекомендуют использовать в современной разработке, в основном из-за того, что функционал перемешивается с разметкой, что усложняет работу и отладку кода.

Данная техника разделяет JS и разметку, но имеет то же самое ограничение – событиям можно присвоить только одну функцию. Эквивалентной записью HTML обработчика событий в DOM будет:

var username = document.getElementbyId("username"); username.onblur = checkName;

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Как и в предыдущем примере, функция checkName запускается после того, как элемент формы теряет фокус.

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

var username = document.getElementbyId("username"); username.addEventListener("blur", checkName, false);

Булево значение в конце указывает на то, нужно ли захватить событие. Обычно задается false. В простых скриптах событие часто записывается в виде анонимной функции:

var username = document.getElementbyId("username"); username.addEventListener("blur", function() { // действия по срабатыванию события })

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

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

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

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

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

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

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

Событие это не более чем сигнал. Он сообщает, что что-то только что произошло. Этим что-то может быть нажатие кнопки мыши. Это может быть нажатие клавиши на клавиатуре. Это может быть изменение размера вашего окна. Это может быть просто только что произошедшая загрузка вашего документа.

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

Возвращаемся к нашей модели. События составляют первую половину заявления:

События определяют вещь, которая происходит. Они посылают сигнал. Вторая часть модели определяет реакцию на событие:

В конце концов, какая польза от сигнала, если на той стороне нет никого, кто ожидает его, а затем предпринимает соответствующие действия?! Хорошо — теперь, когда у вас есть достаточное понимание того, что такое события, давайте посмотрим, как протекает жизнь событий в заповеднике, известном как JavaScript .

Учитывая важность событий, не удивительно, что в JavaScript реализованы многочисленные инструменты работы с ними. Существуют две основные вещи, которые вы должны сделать, чтобы работать с событиями:

• Отслеживание событий;
• Реакция на события.

Эти два шага кажутся довольно простыми, но не забывайте, что мы имеем дело с JavaScript . Простота является всего лишь дымовой завесой, за которой могут скрываться серьезные проблемы, которые вы получите, если предпримете неправильные действия. Возможно, я слишком драматизирую? Что ж, разберемся вместе.

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

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

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

То, как вы используете эту функцию, выглядит следующим образом:

source.addEventListener(eventName, eventHandler, false);

Давайте проанализируем, что означает каждая из частей этой функции.

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

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

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

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

Захватывать или не захватывать, вот в чем вопрос!

Последний аргумент может принимать значения true или false .

Теперь, когда вы познакомились с функцией addEventListener , давайте подытожим все с помощью одного реального примера:

document.addEventListener("click", changeColor, false);

В данном примере наша функция addEventListener прикреплена к объекту документа. Когда зафиксировано событие click , она в ответ на это событие вызывает функцию changeColor (также известную, как обработчик событий ). Это подводит нас вплотную к понятию реакции на события, о чем мы поговорим в следующем разделе.

Как было рассказано в предыдущем разделе, отслеживание (прослушивание ) событий обрабатывается функцией addEventListener . После того, как событие зафиксировано, оно должно быть обработано обработчиком событий. Я не шутил, когда я упомянул ранее, что обработчик событий — это не что иное, как функция:

function normalAndBoring() { // Мне очень нравятся всякие разные вещи, которые могут быть внутри этой функции! }

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

document.addEventListener("click", changeColor, false); function changeColor() { // Я важна!!! }

Любой код, который вы размещаете внутри обработчика событий, будет выполняться, когда в addEventListenerfunction зафиксировано нужное вам событие. Это довольно просто!

Лучший способ понять то, что мы узнали только что — увидеть все это на примере полностью рабочего кода. Чтобы мы двигались параллельно, добавьте следующую разметку и код в HTML -документ:

Click Anywhere! document.addEventListener("click", changeColor, false); function changeColor() { document.body.style.backgroundColor = "#FFC926"; }

Изначально, если вы просмотрите документ в браузере, то увидите просто пустую страницу:

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

Причину этого довольно легко понять. Давайте посмотрим на код:

Вызов addEventListener идентичен тому, что мы уже рассматривали, так что давайте пропустим этот этап. Вместо этого обратите внимание на обработчик событий changeColor :

document.addEventListener("click", changeColor, false); function changeColor() { document.body.style.backgroundColor = "#FFC926"; }

Эта функция вызывается, когда в документе зафиксировано событие click . Когда вызывается эта функция, она задает ярко-желтый цвет фона элемента body . Связывая это с заявлением, которое мы рассматривали в самом начале, мы увидим, что этот пример будет выглядеть так:

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

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

function myEventHandler(e) { // элементы обработчика событий }

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

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

Тема событий очень важная и очень интересная. Благодаря ей, можно делать очень много интересных вещей, от которых пользователь будет в восторге. Событие в JavaScript - это определённое действие, которые вызвано либо пользователем, либо браузером. Например, событием может быть клик мыши по кнопке, движение мыши, наведение фокуса на элемент, изменение значения в каком-нибудь текстовом поле, изменение размеров окна браузера и так далее.

Я подготовил таблицу со всеми событиями (которые я знаю, по крайней мере) в JavaScript . В ней Вы найдёте, во-первых, название события, элементы, которые могут генерировать это событие и описание самого события JavaScript .

Теперь разберёмся с тем, как использовать события в JavaScript . Существуют, так называемые, обработчики событий . Обработчики событий как раз и определяют, что будет происходить при возникновении определённого события. Обработчики событий в JavaScript имеет следующий общий вид:

OnНазваниеСобытия

То есть вначале идёт приставка "on ", а дальше название события , например, такие обработчики событий : onFocus , onClick , onSubmit и так далее. Думаю, тут вопросов не возникло. А теперь главный вопрос: "Как использовать события в JavaScript? ". Область их применения огромна, и мы сейчас с Вами рассмотрим одну задачку. На странице имеются три ссылки. Каждая из ссылок отвечает за разный цвет фона (допустим, белый, жёлтый и зелёный). Вначале фон белый. При наведении мыши на определённую ссылку цвет фона меняется. При отведении мыши цвет фона возвращается на цвет по умолчанию. При щелчке мыши по ссылке цвет фона сохраняется, как по умолчанию.

a {
color: blue;
text-decoration: underline;
cursor: pointer;
}


var default_color = "white";

function setTempColor(color) {
document.bgColor = color;
}

function setDefaultColor(color) {
default_color = color;
}

function defaultColor() {
document.bgColor = default_color;
}



Белый
Жёлтый
Зелёный

Давайте разберёмся с этим скриптом, а точнее с уже целой HTML-страницой с поддержкой JavaScript и CSS (другими словами, это пример DHTML ). Вначале идут обычные HTML-теги , с которых начинается любая HTML-страница . Дальше мы создаём стиль, в котором требуем, чтобы все ссылки на данной странице были синего цвета, подчёркнутые, и чтобы указатель мыши на них был в виде "Pointer". Вы, возможно, скажите: "А зачем нужно задавать стиль? Ведь ссылки и так точно такими же и будут". Правильно, ссылки, но у нас ссылок как таковых нет (ведь нет же атрибута href в теге), поэтому они будут простым чёрным текстом по умолчанию (правда, кликать по тексту тоже можно). Поэтому стиль обязателен. Вы можете его убрать и посмотреть, что будет. А ещё лучше, поставьте атрибут href (с любым значением, хоть пустым) и объясните, почему скрипт перестал работать. Дальше уже начинается JavaScript . Мы создаём переменную default_color , отвечающую за цвет по умолчанию. Дальше идут три функции:

Функция setTempColor() отвечает за временное изменение цвета.

Функция setDefaultColor() отвечает за изменение цвета по умолчанию.

Функция defaultColor() устанавливает цвет фона по умолчанию.

Потом идут ссылки с атрибутами в виде обработчиков событий . При наведение мышки на ссылку возникает событие MouseOver , соответственно, обработчик события onMouseOver вызывает функцию setTempColor() и передаёт соответствующий параметр. При снятии мышки с элемента возникает событие MouseOut , а дальше вызывается функция defaultColor() , которая делает цветом фона цвет по умолчанию. И, наконец, при клике мышки по ссылке (обработчик onClick ) вызывается функция setDefaultColor() , которая устанавливает цвет заданный в параметре цветом фона по умолчанию. Как видите, всё достаточно просто.

Это был принцип использования событий в JavaScript , а дальше всё зависит только от Вашей фантазии!