Компьютерапия

JavaScript - События

Категория: JavaScript
Просмотров: 8647

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

Содержание:

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

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

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

Событие onclick

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

пример

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

<html>
   <head>
     
      <script type="text/javascript">
         <!--
            function sayHello() {
               alert("Hello World")
            }
         //-->
      </script>
     
   </head>
  
   <body>
      <p>Click the following button and see result</p>
     
      <form>
         <input type="button" onclick="sayHello()" value="Say Hello" />
      </form>
     
   </body>
</html>

Событие onsubmit

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

пример

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

Попробуйте следующий пример. 
<html>
   <head>
  
      <script type="text/javascript">
         <!--
            function validation() {
               all validation goes here
               .........
               return either true or 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 ("Mouse Over");
            }
           
            function out() {
               document.write ("Mouse Out");
            }
           
         //-->
      </script>
     
   </head>
   <body>
      <p>Bring your mouse inside the division to see the result:</p>
     
      <div onmouseover="over()" onmouseout="out()">
         <h2> This is inside the division </h2>
      </div>
        
   </body>
</html>

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

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

Оператор Описание
OfflineТриггеры, когда документ выходит в автономный режим
OnabortТриггеры при событии прерывания
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Триггеры при отпускании ключа
onloadТриггеры при загрузке документа
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Триггеры, когда атрибут поиска элемента мультимедиа истинен, и поиск начался
onselectТриггеры при выборе элемента
onstalledТриггеры при возникновении ошибки в получении данных мультимедиа
onstorageТриггеры при загрузке документа
onsubmitТриггеры при отправке формы
onsuspendТриггеры, когда браузер извлекает мультимедийные данные, но остановился до того, как весь медиафайл был извлечен
ontimeupdateТриггеры, когда носители меняют свое игровое положение
onundoТриггеры, когда документ выполняет отмену
onunloadТриггеры, когда пользователь покидает документ
onvolumechangeТриггеры, когда носитель изменяет громкость, также когда громкость установлена на "mute"
onwaitingТриггеры, когда медиа перестали играть, но ожидается возобновление



Понравилась статья? Поделитесь ею с друзьями и напишите отзыв в комментариях!

Новые статьи

Предыдущие статьи

We use cookies on our website. Some of them are essential for the operation of the site, while others help us to improve this site and the user experience (tracking cookies). You can decide for yourself whether you want to allow cookies or not. Please note that if you reject them, you may not be able to use all the functionalities of the site.

Ok