Post
Ask Question

Events In JavaScript - Part Three

Introduction

 
In this article, we will learn about events in JavaScript. Event simply refers to doing a specific task in the browser. This is what happens when the user clicks a button. There are many different types of events in JavaScript.
 

Events

 
Events are actions that can be detected by JavaScript. By using JavaScript, we have the ability to create dynamic interfaces of web pages. Events are used in a combination of functions.
 
Let’s see the events in JavaScript
  • Onsubmit Event
  • Onreset Event
  • Onkeypress Event
  • Onkeyup Event
  • Ondblclick Event
  • Onunload Event
Onsubmit Event
 
To perform an onsubmit event, the onsubmit event occurs when the user clicks the submit button. This event is often used to click the Submit button to check forms. This event supports all the browsers.
 
Syntax
 
In HTML Syntax,
  1. <element onsubmit = “Some code”>   
In JavaScript Syntax,
  1. object.onsubmit = “Some code”  
Example
 
This example demonstrates a JavaScript onsubmit event,
  1. <html>    
  2.    <head>      
  3.       <meta charset="utf-8">     
  4.       <title>Onsubmit Event</title>         
  5.    </head>    
  6.    <body>    
  7.       <h2>Onsubmit Event in JavaScript</h2>      
  8.       <h3>Click the button alert msg will come </h3>    
  9.       <script type = "text/javascript">    
  10.             function sayHello() {    
  11.                alert("Hello World")    
  12.             }    
  13.       </script>         
  14.       <form>    
  15.          <input type ="button" onclick="sayHello()" value="Say Hello">    
  16.       </form>          
  17.    </body>    
  18. </html>  
Output
 
Here is the output of the onsubmit event example above.
 
 
Onreset Event
 
The onreset event is  when the user form resets data fields in HTML form. Only the <form> tag is supported in this event.
 
Syntax
 
In HTML Syntax,
  1. <element onreset = “Some code”>  
In JavaScript Syntax,
  1. object.onreset = “Some code”  
Example
 
This example demonstrates JavaScript onreset event. 
  1. <!DOCTYPE html>    
  2. <html>    
  3. <head>    
  4.     <meta charset="utf-8">    
  5.     <title>Onreset Event</title>    
  6. </head>    
  7. <body>    
  8.     <h2>Onreset Event in JavaScript</h2>    
  9.     <form onsubmit="submitform" onreset="resetform">    
  10.         First name:    
  11.         <input type="text" placeholder="Enter your name">    
  12.         <br>    
  13.         Last name:    
  14.         <input type="text" placeholder="Enter your Last name">    
  15.         <br>    
  16.         Department:    
  17.         <input type="text" placeholder="Example:CSE">    
  18.         <br>    
  19.         <input type="submit" value="submit">    
  20.         <input type="reset" value="Reset_fields">    
  21.     </form>    
  22.     <script type="text/javascript">    
  23.         function submitform() {    
  24.             alert("Your data was saved successfully");    
  25.         }    
  26.         function resetform() {    
  27.             alert("Are you want to reset the data fields");    
  28.         }    
  29.     </script>    
  30. </body>    
  31. </html>   
Output
 
Here is the output of the onreset event example above:
 
 
 
Onkeypress Event
 
A keypress event occurs when you press it. When you release the key, the key location returns the actual key code value of the character.
 
Syntax
 
In HTML Syntax,
  1. <element onkeypress = “Some code”>  
In JavaScript Syntax,
  1. object.onkeypress = “Some code”  
Example
 
This example demonstrates the  JavaScript onkeypress event:
  1. <!DOCTYPE html>    
  2. <html>    
  3. <head>    
  4.     <meta charset="utf-8">    
  5.     <title>Onkeypress event</title>    
  6. </head>    
  7. <body>    
  8.     <h2>Onkeypress event in Javascript </h2>    
  9.     <p>You type in textbox maximun number of letters</p>    
  10.     <textarea id="txtmsg" onkeypress="return fcount()"></textarea><br>    
  11.     <div id="dvicounter">50</div>    
  12.     <script type="text/javascript">    
  13.         function fcount() {    
  14.             var dvicounter=document.getElementById("dvicounter");    
  15.             var count= parseInt(dvicounter.innerText);    
  16.             if (count> 0)     
  17.             {    
  18.                 var textmsg=document.getElementById("txtmsg");    
  19.                 dvicounter.innerText =count-1;    
  20.             }    
  21.             else    
  22.             {    
  23.                 return false;    
  24.             }    
  25.         }    
  26.     </script>    
  27. </body>    
  28. </html>  
Output
 
Here is an output of the onkeypress event example above:
 
 
Onkeyup Event
 
The OnKeyup event attribute works when the user releases the keyboard key.
 
Syntax
 
In HTML Syntax,
  1. <element onkeyup = “Some code”>   
In JavaScript Syntax,
  1. object.onkeyup = “Some code”  
Example
 
This example demonstrates the JavaScript onkeyup event:
  1. <!DOCTYPE html>    
  2. <html>    
  3. <head>    
  4.     <meta charset="utf-8">    
  5.     <title>Onkeyup Event</title>    
  6. </head>    
  7. <body>    
  8.     <h2>onkeyup Event in JavaScript</h2>    
  9.     <form name="frm">    
  10.         Onkeyup Event:    
  11.         <input type="txt" name="n" placeholder="Enter name" onkeyup="demo(this.value)">    
  12.     </form>    
  13.     <script type="text/javascript">    
  14.         function demo(str) {    
  15.             document.frm.n.value=str.toUpperCase();//Enter text below in lower case and see what happpens     
  16.         }    
  17.     </script>    
  18. </body>    
  19. </html>  
Output
 
Here is the output of the onkeyup event example above:
 
 
Ondblclick Event
 
The ondblclick event is when the user clicks the button or icons
 
Syntax
 
In HTML Syntax,
  1. <element ondblclick = “Some code”>    
In JavaScript Syntax,
  1. object.ondblclick = “Some code”  
Example
 
This example demonstrates JavaScript ondblclick event:
  1. <!DOCTYPE html>    
  2. <html>    
  3. <head>    
  4.    <meta charset="utf-8">    
  5.    <title>Ondblclick Event</title>    
  6. </head>    
  7. <body>    
  8.    <h2>ondblclick Event in JavaScript</h2>    
  9.    <button type="submit" ondblclick="doubleclick()">Double_Click</button>    
  10.    <script type="text/javascript">    
  11.       function doubleclick() {    
  12.          alert("This Event is created successfully");    
  13.       }    
  14.    </script>    
  15. </body>    
  16. </html>   
Output
 
Here is the output of the ondblclick event example above:
 
 

Conclusion

 
In this article we have seen about events in JavaScript. I hope this article is useful to you. Thanks for reading!


Similar Articles