JavaScript Event Examples

javaScript onfocus or onblur events

the onfocus event fires when the object receives focus.

the onblur event fires when the object loses the focus.

     <body>
     
            <p>first name<input  id="fn"  value="this"  name="fn"/></p>
     
   <script>
   
          var   o = document.getElementById("fn");
          
                 o.onfocus = function(){ o.classname = "focus" ;  }                                           
                
                 o.onblur   = function(){ o.classname = "blur" ;  }
 </script>       
          
      </body>

the onmouseup and onmousedown events

we know the - onmouseup event occurs when a mouse button is released.

the onmousedown event occurs when a mouse button is clicked but before it is released.

     <body>
     
            <h1  id='h' >this is the first heading</h1>
     
   <script>
   
          var   ob = document.getElementById("h");
          
                 ob.onmousedown = function(){ ob.classname = "mousedown" ;  }                                           
                
                 ob.onmouseup   = function(){ ob.classname = "mouseup" ;  }
 </script>       
          
      </body>

the onmouseover and onmouseout event

the onmouseover event occurs when the mouse cursor moves over an element.

the onmouseout event occurs when the mouse cursor moves away from an element.

     <body>
     
            <h1  id='h' >this is the first heading</h1>
     
   <script>
   
          var   ob = document.getElementById("h");
          
                 ob.onmouseover = function(){ ob.classname = "mouseover" ;  }                                           
                
                 ob.onmouseout   = function(){ ob.classname = "mouseout" ;  }
 </script>       
          
      </body>

the onkeyup and onkeydown events

the onkeydown event occurs when the user presses a key.

the onkeyup event occurs when the user releases a key.

     <body>
     
            <p>first name<input  id="fn"  value=""  name="fn"/></p>
     
   <script>
   
          var   o = document.getElementById("fn");
          
                 o.onkeydown = function(){ o.classname = "keydown" ;  }                                           
                
                 o.onkeyup   = function(){ o.classname = "keyup" ;  }
 </script>       
          
      </body>

the onload and onunload event

the onload event occurs when a document, <object> has been loaded.

     <body   onload="window.alert('this document completely loaded')">
     
            <p>first name<input  id="fn"  value=""  name="fn"/></p>
            
             <img src="e:\\project\\images\\blueflower.jpg"/>     
          
      </body>

the onunload event occurs when the window is unloading its content and resources.