Учебники

JavaScript — События

Январь 22, 2019

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

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

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

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

Пожалуйста, пройдите этот небольшой учебник для лучшего понимания HTML Event Reference . Здесь мы увидим несколько примеров, чтобы понять связь между Event и JavaScript —

Тип события onclick

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

пример

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

Live Demo

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

Live Demo 

<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, которая должна быть выполнена против этого события.

48
Share: