Lecture 8 – JavaScript Events

The best thing about JavaScript is that it is very easy to integrate it with HTML. You will normally use JavaScript Events to control all the interaction and integration. Whenever a browser or user manipulates a webpage, an event occurs. A user clicking on a page, a new page loading, closing and resizing a window, and a button click, etc. all are examples of an event.

There are many different types of events in JavaScript. We will discuss some of the most important of these events.

Onclick Event Type

Onclick event occurs when you click on the left button of your mouse. Thus, it is also the most commonly used event type in JavaScript. This particular event performs many different functions such as validation and putting warnings, etc. Let us look at an example.

<!DOCTYPE html>
<html lang="en">
<head>
    
</head>
<body>

  <form>
    <input type="button" onclick="myName()" value="My Name">
  </form>
       
  
    
       function myName() {
         alert('Martin Kobler');
       }
       
        
</body>

</html>

The following is the output of the above code.

onSumbmit Event Type

This type of event occurs whenever a user submits a form. You can use this event for form validation or asking users to providing necessary details.

In the following example, we try to validate a form by calling the validate() function. The form will be submitted if the validate() returns true. If not, the form will not be submitted.

<!DOCTYPE html>
<html lang="en">
<head>
    
</head>
<body>

  <form method="POST" onsubmit="return validate()">
    <input type="button" onclick="myName()" value="My Name">
  </form>
       
  
    
            function validation() {
              put every thing you need to validate here....
               return either true or false
            }
       
        
</body>

</html>

onmouseout and onmouseover Event Types

If you want to create some beautiful and eye-catching effects with text or images, it is better to use these two events. When you hover your mouse over any element, the onmouseover event occurs. Similarly, the onmouseout event takes place when you remove mouse from that element. Take a look at the following example.

Here is the output of the above code.

In the next lecture, we will study JavaScript Animation