Post
Ask Question

JavaScript HTML DOM Events

Introduction

 
This article explains various events in JavaScript. An event is nothing but an action against a certain operation. For example, a user clicks on a button, and for that something is done, so the user has done this by the button's click event. In JavaScript, many more events exist, in this article, we will try to understand a few of them.
 

mouseover event in JavaScript

 
The mouseover event occurs when the user drags the mouse cursor over an object. In this example we are calling the fun() function onmouseover event of the button.
  1. <!DOCTYPE html>  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head id="Head1" runat="server">  
  4. </head>  
  5. <body>  
  6.     <script>  
  7.         function fun() {  
  8.             console.log('Mouse Over event');  
  9.         }  
  10.     </script>  
  11.     <input type="button" name="Button" value="Mouse over" onmouseover="fun()" />  
  12. </body>  
  13. </html> 
 
 

onchange event to detect text change

 
The onchange event occurs when the text of a text box is changed. In this example, we are calling the fun function on the onchange event. When we change the text of a TextBox the event will be generated.
  1. <!DOCTYPE html>  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head id="Head1" runat="server">  
  4. </head>  
  5. <body>  
  6.     <script>  
  7.         function fun() {  
  8.             console.log('Text change event');  
  9.         }  
  10.     </script>  
  11.     <input type="text" name="name" onchange="fun()" />  
  12. </body>  
  13. </html> 
 
 

ondoubleclick event

 
The ondoubleclick event occurs when we double-click a button. In this example we are calling the fun() function for the ondoubleclick() event of a button.
  1. <!DOCTYPE html>  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head id="Head1" runat="server">  
  4. </head>  
  5. <body>  
  6.     <script>  
  7.         function fun() {  
  8.             console.log('double click event');  
  9.         }  
  10.     </script>  
  11.     <input type="button" name="name" value="doule click" ondblclick="fun()" />  
  12. </body>  
  13. </html> 
 
 

onfocus event

 
The onfocus event occurs when we set the focus to some control, for example we want to put some text in a TextBox and for that we put the cursor there. In this scenario, the onfocus event occurs. Here is an example of the onfocus event of a text box.
  1. <!DOCTYPE html>  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head id="Head1" runat="server">  
  4. </head>  
  5. <body>  
  6.     <script>  
  7.         function fun() {  
  8.             console.log('focus on text box');  
  9.         }  
  10.     </script>  
  11.     <input type="text" name="name" value="" onfocus="fun()" />  
  12. </body>  
  13. </html> 
 
 

onblur event of TextBox

 
When we lose the focus of control the onblur event occurs. Here is a sample implementation of the onblur event in JavaScript.
  1. <!DOCTYPE html>  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head id="Head1" runat="server">  
  4. </head>  
  5. <body>  
  6.     <script>  
  7.         function fun() {  
  8.             console.log('Focus has lost');  
  9.         }  
  10.     </script>  
  11.     <input type="text" name="name" value="" onblur="fun()" />  
  12. </body>  
  13. </html> 
 
 

onkeypress event of text box

 
The onkeypress event occurs when we press a key over a control. In this example we are calling the fun() function in the onkeypress event of JavaScript.
  1. <!DOCTYPE html>  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head id="Head1" runat="server">  
  4. </head>  
  5. <body>  
  6.     <script>   
  7.         function fun() {   
  8.             console.log('Key   
  9.             press event occur');   
  10.         }   
  11.     </script>  
  12.     <input type="text" name="name" value="" onkeypress="fun()" />  
  13. </body>  
  14. </html> 
Some important events that are very useful for our browser are:
  • onafterprint
  • onbeforeprint
  • onbeforeload
  • onblur
  • onerror
  • onfocus
  • onhaschange
  • onload
  • onmessage
  • onoffline
  • ononline
  • onpagehide
  • onpageshow
  • onpopstate
  • onredo
  • onresize
  • onstorage
  • onundo
  • onunload

Summary

 
In this article, we learned events in JavaScript. In a future article, we will learn more basic concepts of JavaScript.


Similar Articles