Учебники

ES6 — События

Декабрь 28, 2018

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

Событие — это действие или событие, распознаваемое программным обеспечением. Он может быть запущен пользователем или системой. Некоторые распространенные примеры событий включают в себя нажатие пользователем кнопки, загрузку веб-страницы, переход по гиперссылке и т. Д. Ниже приведены некоторые из общих событий HTML.

Обработчики событий

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

Тип события onclick

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

пример 

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

Следующий вывод отображается при успешном выполнении вышеуказанного кода.

Тип onsubmitEvent

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

пример 

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

49
Share: