JavaScript - События

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

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

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

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

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

Пожалуйста, прочтите это небольшое руководство, чтобы лучше понять HTML Event Reference . Здесь мы увидим несколько примеров, чтобы понять связь между Event и 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() функция возвращает истину, форма будет отправлена, иначе она не отправит данные.

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

<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

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

Атрибут Значение Описание
Не в сети сценарий Срабатывает, когда документ переходит в автономный режим
Onabort сценарий Запускается по событию прерывания
onafterprint сценарий Срабатывает после печати документа
onbeforeonload сценарий Триггеры перед загрузкой документа
onbeforeprint сценарий Срабатывает перед печатью документа
onblur сценарий Срабатывает, когда окно теряет фокус
oncanplay сценарий Срабатывает, когда медиа может начать воспроизведение, но может быть остановлено для буферизации
oncanпрохождение сценарий Срабатывает, когда медиа можно воспроизводить до конца, не останавливаясь для буферизации
по изменению сценарий Срабатывает при изменении элемента
по щелчку сценарий Триггеры по щелчку мыши
oncontextmenu сценарий Срабатывает при запуске контекстного меню
ondblclick сценарий Триггеры по двойному щелчку мыши
ondrag сценарий Срабатывает при перетаскивании элемента
ондрагенд сценарий Триггеры в конце операции перетаскивания
ондрагентер сценарий Срабатывает, когда элемент перетаскивается в допустимую цель перетаскивания
Ondragleave сценарий Срабатывает, когда элемент перетаскивается через допустимую цель перетаскивания
ондраговер сценарий Триггеры в начале операции перетаскивания
ondragstart сценарий Триггеры в начале операции перетаскивания
капля сценарий Срабатывает, когда перетаскивается элемент
ondurationchange сценарий Срабатывает при изменении длины медиа
один пустой сценарий Срабатывает, когда элемент медиаресурса внезапно становится пустым.
закончился сценарий Срабатывает, когда медиа доходит до конца
ошибка сценарий Срабатывает при возникновении ошибки
onfocus сценарий Срабатывает, когда окно получает фокус
onformchange сценарий Срабатывает при изменении формы
onforminput сценарий Срабатывает, когда форма получает вводимые пользователем данные
на изменение сценарий Срабатывает при изменении документа
на входе сценарий Срабатывает, когда элемент получает ввод пользователя
недействительный сценарий Срабатывает, когда элемент недействителен
onkeydown сценарий Срабатывает при нажатии клавиши
onkeypress сценарий Срабатывает при нажатии и отпускании клавиши
onkeyup сценарий Срабатывает при отпускании клавиши
в процессе сценарий Срабатывает при загрузке документа
onloadeddata сценарий Срабатывает при загрузке медиа-данных
onloadedmetadata сценарий Срабатывает при загрузке длительности и других медиа-данных медиа-элемента.
onloadstart сценарий Срабатывает, когда браузер начинает загружать медиа-данные
onmessage сценарий Срабатывает при появлении сообщения
onmousedown сценарий Срабатывает при нажатии кнопки мыши
onmousemove сценарий Срабатывает при перемещении указателя мыши
onmouseout сценарий Срабатывает, когда указатель мыши выходит за пределы элемента
при наведении мыши сценарий Срабатывает, когда указатель мыши перемещается над элементом
onmouseup сценарий Срабатывает при отпускании кнопки мыши
onmousewheel сценарий Срабатывает при вращении колесика мыши
онлайн сценарий Срабатывает, когда документ переходит в автономный режим
Onoine сценарий Срабатывает, когда документ появляется в сети
онлайн сценарий Срабатывает, когда документ появляется в сети
onpagehide сценарий Срабатывает, когда окно скрыто
onpageshow сценарий Срабатывает, когда окно становится видимым
пауза сценарий Срабатывает при приостановке мультимедийных данных
onplay сценарий Срабатывает, когда начинается воспроизведение мультимедийных данных
onplaying сценарий Срабатывает при начале воспроизведения мультимедийных данных
onpopstate сценарий Срабатывает при изменении истории окна
в процессе сценарий Срабатывает, когда браузер получает медиаданные
onratechange сценарий Срабатывает при изменении скорости воспроизведения мультимедийных данных
onreadystatechange сценарий Срабатывает при изменении состояния готовности
Онредо сценарий Срабатывает, когда документ выполняет повтор
onresize сценарий Срабатывает при изменении размера окна
прокрутка сценарий Срабатывает при прокрутке полосы прокрутки элемента
искал сценарий Срабатывает, когда атрибут поиска медиа-элемента больше не является истинным и поиск завершен
ищущий сценарий Срабатывает, когда атрибут поиска медиаэлемента истинен и поиск начался
onselect сценарий Срабатывает, когда выбран элемент
установленный сценарий Срабатывает при ошибке при получении данных мультимедиа
на хранении сценарий Срабатывает при загрузке документа
onsubmit сценарий Срабатывает при отправке формы
приостановить сценарий Срабатывает, когда браузер получал медиаданные, но останавливался до того, как был получен весь медиафайл
ontimeupdate сценарий Срабатывает, когда медиа меняет положение воспроизведения
онундо сценарий Срабатывает, когда документ выполняет отмену
разгрузить сценарий Срабатывает, когда пользователь покидает документ
onvolumechange сценарий Срабатывает, когда мультимедиа изменяет громкость, а также когда громкость отключена.
в ожидании сценарий Срабатывает, когда воспроизведение мультимедиа прекращается, но ожидается, что оно возобновится