Events In JavaScript

Introduction

 
In the previous chapter, we learned about functions in JavaScript, declaration of the function, and how to use these functions in JavaScript example programs.
 
In this chapter, you will learn about events in JavaScript. An event is just 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.
 

What is the event?

 
Events are actions that can be performed or detected by JavaScript. By using JavaScript, we have the ability to create dynamic interfaces of web pages. Every element on the web page has certain events that trigger JavaScript. Events are commonly used in combination with functions.
 
For example, we can use the onclick event of a button element to indicate that a function will run when the user clicks on the button.
 
The most common Events in JavaScript
  • Onclick
  • Onload
  • Onchange
  • Onkeydown
  • Onmouseover and
  •  On mouseout 

Onclick Event

 
Onclick event will execute a specific code when clicking on an HTML object that has Onclick properties. An onclick event occurs when the user clicks an element. Mostly this event is used in button attributes.
 
Syntax
 
In HTML Syntax,
  1. <element onclick = “Some code”>    
In JavaScript Syntax,
  1. object.onclick = “Some code”   
Example
 
This example demonstrates the JavaScript onclick event
  1. <!DOCTYPE html>    
  2. <html>    
  3. <head>    
  4.     <meta charset="utf-8">    
  5.     <title>Onclick Event in JavaScript</title>    
  6. </head>    
  7. <body>    
  8.     <h2>Click the button show a Welcome message in alert box</h2>    
  9.     <script type="text/javascript">    
  10.         function msg(){    
  11.             alert("Welcome to My WebPage!");    
  12.         }    
  13.     </script>    
  14.     <button onclick="msg()">Click_here</button>    
  15. </body>    
  16. </html>  
Output
 
Here is an output of onclick event.
 
 

Onload Event

 
An onload event occurs when an object is loaded. Mostly this event is used in <body> attributes. It loads images, alert messages, next page, etc…
 
Syntax
 
In HTML Syntax,
  1. <element onload = “Some code”>   
In JavaScript Syntax,
  1. object.onload = “Some code”   
Example
 
This example demonstrates a  JavaScript onload event:
  1. <!DOCTYPE html>    
  2. <html>    
  3. <head>    
  4.     <meta charset="utf-8">    
  5.     <title>Onload Event</title>    
  6. </head>    
  7. <body onload="pageload()">    
  8.     <h2>Onload event in Javascript</h2>    
  9.     <h3>Once the page loaded the alert message will be displayed</h3>    
  10.     <script type="text/javascript">    
  11.         function pageload() {    
  12.             alert("Page loaded Successfully!");//refersh the web page and check it    
  13.         }    
  14.     </script>    
  15. </body>    
  16. </html>  
Output
 
Here is an output of onload event.
 
 

Onchange Event

 
An onchange event occurs when the value of an HTML element is changed. The onchange event supports all web browsers.
 
Syntax
 
In HTML Syntax,
  1. <element onchange = “Some code”>  
In JavaScript Syntax,
  1. object.onchange = “Some code”  
Example
 
This example demonstrates a JavaScript onchange event.
  1. <!DOCTYPE html>    
  2. <html>    
  3. <head>    
  4.     <meta charset="utf-8">    
  5.     <title>Events in Jvascript</title>    
  6. </head>    
  7. <body>    
  8.     <h2>Onchange evetns in Javascript</h2>    
  9.     <h3>select the Gender using onchange event</h3>    
  10.     <select onchange="">    
  11.         <option value="Male">Male</option>    
  12.         <option value="Female">Female</option>    
  13.             
  14.         <option value="Others">Others</option>    
  15.     </select>    
  16. </body>    
  17. </html>    
Output
 
Here is an output of onchange event.
 
 

Onkeydown

 
Syntax
 
In HTML Syntax,
  1. <element onkeydown = “Some code”>    
In JavaScript Syntax,
  1. object.onkeydown = “Some code”    
Example
 
This example demonstrates JavaScriptOnkeydownevent:
  1. <!DOCTYPE html>    
  2. <html>    
  3. <head>    
  4.     <meta charset="utf-8">    
  5.     <title>onkeydown event</title>    
  6. </head>    
  7. <body>    
  8.     <h2>Press any key in keyboard change color</h2>    
  9.     <input type="text" id="kydwn" onkeydown="myfun()">    
  10.     <script>    
  11.         function myfun() {    
  12.         document.getElementById("kydwn").style.backgroundColor = "green";    
  13.     }    
  14. </script>     
  15. </body>    
  16. </html>    
Output
 
Here is the output of Onkeydown event.
 
 

Onmouseover and mouseout Event

 
These events move the cursor over the text to change the color. All browsers support both events.
 
Syntax
 
In HTML Syntax,
  1. <element onmouseover = “Some code”>    
  2. <element onmouseout = “Some code”>   
In JavaScript Syntax,
  1. object.onmouseover = “Some code”    
  2. object.onmouseout = “Some code”   
Example
 
This example demonstrates JavaScriptOnmouseoverand onmouseout event:
  1. <!DOCTYPE html>    
  2. <html>    
  3. <head>    
  4.     <title>Events in JavaScript</title>    
  5. </head>    
  6. <body>    
  7.     <h2>Onmouseover and onmouseout event in JavaScript</h2>    
  8. <script>    
  9. function musovr() {    
  10.   document.getElementById("chngclr").style.color = "red";    
  11. }    
  12.     
  13. function musout() {    
  14.   document.getElementById("chngclr").style.color = "green";    
  15. }    
  16. </script>    
  17. <p id="chngclr" onmouseover="musovr()" onmouseout="musout()">Mouse over Event in JavaScript</p>    
  18. </body>    
  19. </html>   
Output
 
Here is the output of Onmouseover and mouseout event.
 
 

Summary

 
In this chapter, we learned about events in JavaScript, and how to use these events in JavaScript example programs. 
Author
Vijayakumar S
410 3.9k 1.9m
Next » Cookies in JavaScript

©2024 C# Corner.