JavaScript Event Handling Example

The following code shows how to Create a web page to implement event handling using onclick, onmouseover and onmouseout events.

<html>
 <head>
   <title>Date Object</title>
   <script>
    function f1(){
     var v=document.getElementById("p1");
 	v.classList.add("c2");
        v.classList.remove("c3");
        v.classList.remove("c4");
     }
    function f2(){
     var v=document.getElementById("p1");
 	v.classList.add("c3");
        v.classList.remove("c2");
        v.classList.remove("c4");
     }
    function f3(){
     var v=document.getElementById("p1");
 	v.classList.add("c4");
        v.classList.remove("c3");
        v.classList.remove("c2");
     }
   </script>
   <style>
     .c1{
        width: 100px;
        height: 100px;
        margin: 20px;
        padding: 20px;
        border: 2px #aa4499 solid;
     }
     .c2{
	border: 2px #2299dd solid;
     }
     .c3{

	border: 2px #77aaa7 solid;
     }
     .c4{
		border: 2px #334455 solid;
      }
   </style>
 </head>
 <body>
  <div>
     
  </div>
  <div> 
    <p id="p1" class = "c1" onclick="f1();" onmouseover="f2();" onmouseout="f3();">
       A paragraph
    </p>
  </div>
 </body>
</html>

Output

JavaScript Event Handling - click, mouseover, mouseout — JavaScript Event Handling – click, mouseover, mouseout

When the user clicks in the paragraph, or moves the mouse curser inside the paragraph or outside it, the border is changed.