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	сценарий	Срабатывает, когда мультимедиа изменяет громкость, а также когда громкость отключена.
в ожидании	сценарий	Срабатывает, когда воспроизведение мультимедиа прекращается, но ожидается, что оно возобновится