Последние новости:

Поиск по сайту:

Личное присутствие вредит славе (Ф. Петрарка).

JavaScript — События

1 Звезда2 Звезды3 Звезды4 Звезды5 Звезд (2 оценок, среднее: 3,00 из 5)
Загрузка...
05.11.2017
JavaScript - События

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

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

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

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

События являются частью объектной модели документа (Document Object Model — DOM) Level 3 и каждый HTML элемент содержит набор событий, которые могут вызвать JavaScript-код.

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

Тип события — onclick

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

Пример

Попробуйте следующий пример.

<html>
   <head>
      
      <script type="text/javascript">
         <!--
            function sayHello() {
               alert("Привет мир!")
            }
         //-->
      </script>
      
   </head>
   
   <body>
      <p>Нажмите на следующую кнопку и посмотрите результат</p>
      
      <form>
         <input type="button" onclick="sayHello()" value="Привет" />
      </form>
      
   </body>
</html>

Тип события — onsubmit

onsubmit это событие, которое происходит при попытке отправить форму. Вы можете поместить свою форму проверки в отношении этого типа события.

Пример

В следующем примере показано, как использовать событие onsubmit. Здесь мы вызываем функцию validate() перед отправкой формы данных на веб-сервер. Если функция  validate() возвращает истину, форма будет отправлена, в противном случае она не будет предоставлять данные.

Попробуйте следующий пример.

<html>
   <head>
   
      <script type="text/javascript">
         <!--
            function validation() {
               вся проверка идет сюда
               .........
               возвращает либо true или false
            }
         //-->
      </script>
      
   </head>
   <body>
   
      <form method="POST" action="t.cgi" onsubmit="return validate()">
         .......
         <input type="submit" value="Submit" />
      </form>
      
   </body>
</html>

 

События onmouseover и onmouseout

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

<html>
   <head>
   
      <script type="text/javascript">
         <!--
            function over() {
               document.write ("Мышь над");
            }
            
            function out() {
               document.write ("Выход мыши");
            }
            
         //-->
      </script>
      
   </head>
   <body>
      <p>Принесите мышь внутри элемента, чтобы увидеть результат:</p>
      
      <div onmouseover="over()" onmouseout="out()">
         <h2> Это внутри элемента</h2>
      </div>
         
   </body>
</html>

Стандартные события в HTML 5

Стандартные события в HTML 5 приведены здесь для справки. Здесь сценарий указывает на функцию Javascript, которая будет выполнена в соответствии этому событию.

АтрибутСтоимостьОписание
OfflineскриптТриггеры, когда документ переходит в автономный режим
OnboartскриптТриггеры на события прерывания
onafterprintскриптТриггеры после того, как документ напечатан
onbeforeonloadскриптТриггеры до загрузки документов
onbeforeprintскриптТриггеры до печати документа
onblurскриптТриггеры, когда окно теряет фокус
oncanplayскриптТриггеры, когда медиафайлы могут начинают проигрываться, но может нужно остановить для буферизации
oncanplaythroughскриптТриггеры, когда медиафайлы могут быть воспроизведены до конца, без остановки для буферизации
onchangeскриптТриггеры, когда изменяется элемент
onclickскриптТриггеры мыши
oncontextmenuскриптТриггеры, когда вызывается контекстное меню
ondblclickскриптТриггеры на двойной щелчок мыши
ondragскриптТриггеры, когда элемент перетаскивается
ondragendскриптТриггеры в конце операции перетаскивания
ondragenterскриптТриггера, когда элемент перетащили к действительной цели перетаскивания
ondragleaveскриптТриггеры, когда элемент перетаскивается над действительной целью
ondragoverскриптТриггеры в начале операции перетаскивания
ondragstartскриптТриггеры в начале операции перетаскивания
ondropскриптТриггеры при перетаскивании элемента при падении
ondurationchangeскриптТриггеры, когда длина медиафайла меняется
onemptiedскриптТриггеры, когда элемент ресурса медиафайла внезапно становится пустым.
onendedскриптТриггеры, когда медиафайл достигает конца
onerrorскриптТриггеры, когда возникает ошибка
onfocusскриптТриггеры, когда окно получает фокус
onformchangeскриптТриггеры, когда форма меняет размеры
onforminputскриптТриггеры, когда форма получает пользовательский ввод
onhaschangeскриптТриггеры, когда документ изменился
oninputскриптТриггеры, когда элемент получает ввод пользователя
oninvalidскриптТриггеры, когда элемент является недействительным
onkeydownскриптТриггеры, при нажатии клавиши
onkeypressскриптТриггеры, когда клавиша нажата и отпущена
onkeyupскриптТриггеры, когда клавиша отпущена
в процессескриптТриггеры при загрузке документа
onloadeddataскриптТриггеры, когда данные загружены на носитель
onloadedmetadataскриптТриггеры, когда продолжительность и другие носители данных из медиа-элемента загружается
onloadstartскриптТриггеры, когда браузер начинает загружать мультимедийные данные
onmessageскриптТриггеры, когда сообщение срабатывает
onmousedownскриптТриггеры, при нажатии кнопки мыши
onmousemoveскриптТриггеры, когда указатель мыши перемещается
onmouseoutскриптТриггеры, когда указатель мыши перемещается из элемента
onmouseoverскриптТриггеры, когда указатель мыши перемещается над элементом
onmouseupскриптТриггеры при отпускании кнопки мыши
onmousewheelскриптТриггеры, когда колесо мыши вращается
onofflineскриптТриггеры, когда документ переходит в автономный режим
onoineскриптТриггеры, когда документ поступает в Интернете
ononlineскриптТриггеры, когда документ поступает в Интернете
onpagehideскриптТриггеры, когда окно скрыто
onpageshowскриптТриггеры, когда окно становится видимым
onpauseскриптТриггеры, когда данные медиафайла приостановлены
onplayскриптТриггеры, когда данные медиафайла собирается начать проигрывать
onplayingскриптТриггеры, когда данные медиафайла начинают проигрывать
onpopstateскриптТриггеры при изменении истории окна
onprogressскриптТриггеры, когда браузер менят прогрессбар для медиафайла
onratechangeскриптТриггеры, когда скорость воспроизведения носителя данных изменилась
onreadystatechangeскриптТриггеры при изменении готовых состояний
onredoскриптТриггеры, когда документ выполняет повтор
onresizeскриптТриггеры, при изменении размеров окна
onscrollскриптТриггеры, когда полоса прокрутки  в настоящее время прокручивается
onseekedскриптТриггеры, когда атрибут поиска медиаэлемента больше не является истиной и поиск завершен
onseekingскриптТриггеры, когда атрибут поиска медиа-элемента имеет значение true и поиск начался
onselectскриптТриггеры, когда выбран элемент
onstalledскриптТриггеры, когда есть ошибка в выборке данных медиафайла
onstorageскриптВызывается при загрузке документа
onsubmitскриптТриггеры, когда форма была отправлена
onsuspendскриптТриггеры, когда браузер извлекает данные мультимедиа, но останавливается до того, как был извлечен весь файл мультимедиа
ontimeupdateскриптТриггеры, когда медиафайл меняет свое временное положение
onundoскриптТриггеры, когда документ выполняет отмену
onunloadскриптТриггеры, когда пользователь покидает документ
onvolumechangeскриптТриггеры, когда медиафайл изменяет громкость, а также, когда громкость установлена ​​на «без звука»
onwaitingскриптТриггеры, когда медиафайл перестал играть, но, как ожидается возобновление

JavaScript - События

Если вы нашли ошибку, пожалуйста, выделите фрагмент текста и нажмите Ctrl+Enter.

Если статья понравилась, то поделитесь ей в социальных сетях:

Читайте также

0 0 голоса
Рейтинг статьи
Подписаться
Уведомить о
guest

**ссылки nofollow

0 комментариев
Межтекстовые Отзывы
Посмотреть все комментарии

Статьи партнеров:

0
Оставьте комментарий! Напишите, что думаете по поводу статьи.x

Сообщить об опечатке

Текст, который будет отправлен нашим редакторам:

Заполните форму и наш менеджер перезвонит Вам в самое ближайшее время!

badge
Обратный звонок 1
Отправить

Спасибо! Ваша заявка принята

close

Спасибо! Ваша заявка принята

close