10X Sale
kh logo
All Courses
  2. Tutorials
  3. Web Development

JavaScript Events

Updated on Sep 3, 2025
 
8,036 Views
Table of Content

There are many events available for JavaScript to change something. When JavaScript was first created, it used to add these little features on the webpage. Like someone clicks at some button, or the page has loaded.

We will look at the below, most important events and event example here.

onclick
The onclick event occurs when the user clicks on some elements. There are three ways to implement onclick or any other event.

By HTML

We can implement any event in HTML. From any element like the <p> tag, we have onclick opening a function. We then implement the function inside <script> tag to show a text in innerHTML of a tag.

<!DOCTYPE html>
<html>
<body>
   <h1 id="demo"></h1>
   <p onclick="myFunction()">Click me.</p>
   <script>
       function myFunction() {
           document.getElementById("demo").innerHTML = "The result of clicking";
       }
   </script>
</body>
</html>

Save the above code in a .html file and open in any web browser. It will show the below webpage.

Before Clicking

Click me.

After Clicking

The Result of clicking

Click me.

By JavaScript

We can implement the same using JavaScript. Here onclick event goes inside the <script> tag and so do all the logic. We are having two different ids here. In the “click” id we are attaching onclick event and then the function myFunction get calls when someone clicks on it. Here we show a text in innerHTML of the <h1> tag.

<!DOCTYPE html>
<html>
<body>
   <h1 id="demo"></h1>
   <p id="click">Click me.</p>
   <script>
       document.getElementById("click").onclick = function () { myFunction() };
       function myFunction() {
           document.getElementById("demo").innerHTML = "The result of clicking";
       }
   </script>
</body>
</html>

The result will be the same as with the HTML when opened in a webpage.

By JavaScript using addEventListener()

We can implement the same using JavaScript’s addEventListener() method. In fact, it is the most common way to do it. Here we add the Event Listener method to the element, which we select by document.getElementById("click"). Inside it, we have two parameters – one the click event and other a callback function.

<!DOCTYPE html>
<html>
<body>
   <h1 id="demo"></h1>
   <p id="click">Click me.</p>
   <script>
       document.getElementById("click").addEventListener("click", myFunction);
       function myFunction() {
           document.getElementById("demo").innerHTML = "The result of clicking";
       }
   </script>
</body>
</html>

Onchange

The onchange event occurs when the value of an element is changed like we change something in an input box, or in a select box or radio box.

<!DOCTYPE html>
<html>
<body>
   Enter some text: <input type="text" onchange="myFunction(this.value)">
   <script>
       function myFunction(val) {
           alert("The new value is: " + val);
       }
   </script>
</body>
</html>

Save the above code in a .html file and open in any web browser. It will show the below webpage. Write something in the input box and click somewhere outside, you will get an alert box with the value you entered.

Image

onmouseover and onmouseout

The onmouseover event occurs when the user moves the mouse over the targeted element. Opposite to it, the onmouseout event occurs when the user moves the mouse away from the targeted element.

Both these event handlers are generally used together. Below is an example using addEventListener way. Here we are adding two event listener, which fires two events. The mouseover event changes the color of an <h1> tag to green and the mouseout event changes. It back to black.

<!DOCTYPE html>
<html>
 <body>
   <h1 id="demo">Mouse over me</h1>
   <script>
     document.getElementById('demo').addEventListener('mouseover', mouseOver);
     document.getElementById('demo').addEventListener('mouseout', mouseOut);
     function mouseOver() {
       document.getElementById('demo').style.color = 'green';
     }
     function mouseOut() {
       document.getElementById('demo').style.color = 'black';
     }
   </script>
 </body>
</html>

Save the above code in a .html file and open in any web browser. It will show the below webpage. Move the mouse over to the text and it will change color to red. Move the mouse out and the color changes back to black.

Image

Onload

The onload event in javascript occurs when an object has been loaded. onload is most often used within the <body> element to execute a script, once the whole page is loaded.
In the example below, we change the color and font-size of an element once the page is fully loaded

<!DOCTYPE html>
<html>
 <body onload="myFunction()">
   <div id="demo">Hello World!</div>
   <script>
     function myFunction() {
       document.getElementById('demo').style.color = 'green';
       document.getElementById('demo').style.fontSize = '52px';
     }
   </script>
 </body>
</html>
+91

By Signing up, you agree to ourTerms & Conditionsand ourPrivacy and Policy

Get your free handbook for CSM!!
Recommended Courses