Hey!! Friends welcome to our new article events in javascript. Here we will start from where we finished in the previous article.

Now, lets get the started tutorial of events in javascript.

If you missed the previous articles then please check once Dom with Javascript.

What’s inside:
Events and Event Listeners
Onclick Event
Onload Event
JavaScript Onblur Events
Onfocus Events
onsubmit Event Type
FAQs:

Events and Event Listeners

Now the question is what are Events?

The change in the state of an object is called an Event. When the page loads, it knows as an event. When the user clicks any button, that click to is also an event. Other examples include events like pressing any key, closing a window, resizing a window, etc. all are events.

The events are actions or occurrences that happen in the system which you are programming. Events are a part of the Document Object Model (DOM), and every HTML element contains a set of events that can trigger the JavaScript Code.

Onclick Event

The onclick event is the most used event type which occurs when a user clicks the left button of his mouse. We can put our validations, warning messages, etc., against this event type.

As for example:

<!doctype html> 
<html> 
  <head> 
    <script> 
      function heyguys() { 
        alert('Hi guys!'); 
      } 
    </script> 
  </head> 
  <body> 
    <button type="button" onclick="heyguys()">Click me event</button> 
  </body> 
</html>

Output:

Onload Event

When an element is loaded completely, this event is call up.

For example:

<!doctype html>
<html>  
<head>Javascript Events Example</head>  
</br>  
<body onload="window.alert('Page successfully loaded');">  
<script>  
<!--  
document.write("The page is loaded successfully");  
//-->  
</script>  
</body>  
</html>

Onblur Events

The onblur event happens during an object loses focus. It is the opposite of the onfocus event.
The onblur event is mostly used with form validation code (e.g. when the user leaves a form field).

Syntax:

<element onblur="myScript">

For example:

<html> 
  
<body> 
    <center> 
        <h1 style="color:blue"> 
          technicalblog.in 
      </h1> 
        <h2>onblur event</h2> Email: 
        <input type="email" id="email" onblur="myFunction()"> 
  
        <script> 
            function myFunction() { 
                alert("My Focus lost"); 
            } 
        </script> 
    </center> 
</body> 
  </html>

technicalblog.in

Q: Which is the most preferred way of handling events?

Ans: Registering a listener to an element.

onblur event

Email:

Onfocus Events

The onfocus event is triggered when an element gets focus. You can try to run the below-mentioned code to learn how to implement onfocus event in JavaScript.

For example:

<!DOCTYPE html>
<html>
   <body>
      <p>Write below:</p>
      <input type = "text" onfocus = "newFunc(this)">
      <script>
         function newFunc(x) {
            x.style.background = "lightgreen";
         }
      </script>
   </body>
</html>

Write below:

onsubmit Event Type

An onsubmit event is an event which occurs when you try to submit a form. If you want, then you can put your form validation against this event type.

As for example:

<!DOCTYPE html > 
<html> 
    <head> 
        <title>onsubmit event attribute</title> 
        <style> 
            body { 
                text-align:center; 
            } 
            h1 { 
                color:blue; 
            } 
        </style> 
        <script> 
            function tech() { 
                alert("Form submitted successfully.") ; 
            }  
        </script > 
    </head> 
    <body> 
        <h1>technicalblog.in</h1> 
        <h2>onsubmit event attribute</h2> 
        <form onsubmit = "tech()"> 
            First Name:<input type = "text" value = "" /><br/> 
            Last Name:<input type = "text" value = "" /><br/> 
            <input type = "submit" value = "Submit" /> 
        </form> 
    </body> 
</html>

Output: After clicking on submit button validation is occurred

FAQs:

How many ‘onload’ events can be written on a page?

Ans: 1.

Which is the most preferred way of handling events?

Ans: Registering a listener to an element.

After completing this ‘Events in javascript’ topic we completed our whole JavaScript lectures of the web development series.

In the next article, we will discuss the Ajax in JavaScript which is also a very important topic of web development tutorial.

So, Please stay with us thank you for being here 🙂