Post
Ask Question

Events In JavaScript - Part Two

Introduction

 
In this article, we learn about events in JavaScript. An event is nothing special, just doing a specific task in the browser. It is what happens when the user clicks a button. There are many different types of events in JavaScript. We explained some of the events in my previous article. In this article we will see some other events in JavaScript.
 

Event Definition

 
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 combination with functions.
 
Let’s see the events in JavaScript:
  • Onselect event
  • Onerror event
  • Onresize event
  • Onblur event
  • Onfocus event

Onselect Event

 
The onselect event occurs after some text has been selected in an element. Onselect can be used within: <input type=” file”> <input type=”text”>. This is used to copy or select the input box text.
 
Syntax
 
In HTML Syntax:
  1. <element onselect = “Some code”>  
In JavaScript Syntax:
  1. object.onselect = “Some code”  
Example
 
This example demonstrates the JavaScript onselect event:
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <meta charset="utf-8">  
  5.     <title>onselect event</title>  
  6. </head>  
  7. <body>  
  8.     <h2>Onselect Event in JavaScript</h2>  
  9.     <form>  
  10.         <label>Enter User Name:</label>  
  11.         <input type="text" name="fname" onselect="textselect()"><br>  
  12.         <label>Enter Password:</label>  
  13.         <input type="password" name="pwd">  
  14.     </form>  
  15.     <script type="text/javascript">  
  16.         function textselect() {  
  17.             alert("Some text must not be selected");  
  18.         }  
  19.     </script>   
  20. </body>  
  21. </html>  
Output
 
Here is an output of the onselect event example shown above:
 
Events In JavaScript
 

Onerror Event

 
The onerror event is triggered if an error occurs while loading an external file (e.g. document or an image). If the image is not loaded when the error message arrives, the error will return. If the error is not received, then the image has loaded correctly.
 
Syntax
 
In HTML Syntax:
  1. <element onerror = “Some code”>  
In JavaScript Syntax:
  1. object.onerror = “Some code”  
Example
 
This example demonstrates a JavaScript onerror event:
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <meta charset="utf-8">  
  5.     <title>Onerror Event</title>  
  6. </head>  
  7. <body>  
  8.     <h2>Onerror Evenet in JavaScript</h2>  
  9.     <script type="text/javascript">  
  10.         function myerror() {  
  11.             alert("image unable to load");  
  12.             alert("image resource not found");  
  13.         }  
  14.     </script>  
  15.     <img src="html.jpg" width="200px" height="200px" onerror="myerror()" alt="sorry image resource are not found">  
  16. </body>  
  17. </html>  
Output
 
Here is the  output of the onerror event example given above:
 
Events In JavaScript
 

Onresize Event

 
The onresize event occurs when the size of an element has changed.
 
Syntax
 
In HTML Syntax:
  1. <element onresize = “Some code”>  
In JavaScript Syntax:
  1. object.onresize = “Some code”  
Example
 
This example demonstrates a JavaScript onresize event:
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <meta charset="utf-8">  
  5.     <title>Onresize event</title>  
  6. </head>  
  7. <body onresize="pageresize()">  
  8.     <h2>Onresize event in JavaScript</h2>  
  9.     <p>Resize the page and check the alert message....</p>  
  10.     <p>one resized warning displayed successfully.</p>  
  11.     <script type="text/javascript">  
  12.         function pageresize() {  
  13.             alert("Sorry page unable to resize");  
  14.         }  
  15.     </script>  
  16. </body>  
  17. </html>  
Output
 
Here is the output of the onresize event example shown above:
 
Events In JavaScript
 

Onblur Event

 
The onblur occurs when an object loses focus. Onblur is most often used with form validation code (when the user leaves a form field).
 
Note
The onblur event is the opposite of the onfocus event.
 
Syntax
 
In HTML Syntax:
  1. <element onblur = “Some code”>  

In JavaScript Syntax:

  1. object.onblur = “Some code”  
Example
 
This example demonstrates the JavaScript onblur event:
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <title>Onblur Event</title>  
  5. </head>  
  6. <body>  
  7.     <h2>Onblur event in JavaScript</h2>  
  8.     <form>  
  9.     <label>Enter the Name in Lowercase:</label>  
  10.         <input type="text" id="fname" onblur="uppercase()"><br>  
  11.     <label>Enter the Name in Uppercase:</label>  
  12.         <input type="text" id="lname" onblur="lowercase()"><br>  
  13.     </form>  
  14.     <script type="text/javascript">  
  15.         function uppercase() {  
  16.             var x=document.getElementById("fname");  
  17.             x.value=x.value.toUpperCase();  
  18.         }  
  19.         function lowercase() {  
  20.             var x=document.getElementById("lname");  
  21.             x.value=x.value.toLowerCase();  
  22.         }  
  23.     </script>  
  24. </body>  
  25. </html>  
Output
 
Here is the output of the onblur event example shown above:
 
Events In JavaScript
 

Onfocus Event

 
The onfocus event occurs when an element gets focus. The onfocus event is the opposite of the onblur event.
 
Syntax
 
In HTML Syntax:
  1. <element onfocus = “Some code”>  
In JavaScript Syntax:
  1. object.onfocus = “Some code”  
Example
 
This example demonstrates the JavaScript onfocus event:
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <title>Onfocus event</title>  
  5. </head>  
  6. <body>  
  7.     <h2>Onfocus event in JavaScript</h2>  
  8.     <script type="text/javascript">  
  9.         function onfcs(x) {  
  10.             x.style.color="white";  
  11.             x.style.backgroundColor="green";  
  12.         }  
  13.         //onfocus event is the opposite of the onblur event  
  14.         function onblr(x) {  
  15.             x.style.color="green";  
  16.             x.style.backgroundColor="white";  
  17.         }  
  18.     </script>  
  19.     <input type="text" onfocus="onfcs(this)" onblur="onblr(this)">  
  20. </body>  
  21. </html>  
Output
 
Here is the output of the onfocus event example shown above:
 
Events In JavaScript
 

Conclusion

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


Similar Articles