JavaScript Event Handling

Introduction to Event Handling

  • Event Handling is a software routine that processes actions, such as keystrokes and mouse movements.
  • It is the receipt of an event at some event handler from an event producer and subsequent processes.

Functions of Event Handling

  • Event Handling identifies where an event should be forwarded.
  • It makes the forward event.
  • It receives the forwarded event.
  • It takes some kind of appropriate action in response, such as writing to a log, sending an error or recovery routine or sending a message.
  • The event handler may ultimately forward the event to an event consumer.

Event Handlers

Event HandlerDescription
onAbortIt executes when the user aborts loading an image.
onBlurIt executes when the input focus leaves the field of a text, textarea or a select option.
onChangeIt executes when the input focus exits the field after the user modifies its text.
onClickIn this, a function is called when an object in a button is clicked, a link is pushed, a checkbox is checked or an image map is selected. It can return false to cancel the action.
onErrorIt executes when an error occurs while loading a document or an image.
onFocusIt executes when input focus enters the field by tabbing in or by clicking but not selecting input from the field.
onLoadIt executes when a window or image finishes loading.
onMouseOverThe JavaScript code is called when the mouse is placed over a specific link or an object.
onMouseOutThe JavaScript code is called when the mouse leaves a specific link or an object.
onResetIt executes when the user resets a form by clicking on the reset button.
onSelectIt executes when the user selects some of the text within a text or textarea field.
onSubmitIt calls when the form is submitted.
onUnloadIt calls when a document is exited.

Example : Simple Program on onload() Event handler

<html>
     <head>
     <script type="text/javascript">
     function time()
     {
          var d = new Date();
          var ty = d.getHours() + ":"+d.getMinutes()+":"+d.getSeconds();
          document.frmty.timetxt.value=ty;
          setInterval("time()",1000)
     }
     </script>
     </head>
<body onload="time()">
     <center><h2>Displaying Time</h2>
          <form name="frmty">
               <input type=text name=timetxt size="8">
          </form>
     </center>
</body>
</html>


Output:
time display

Example: Simple Program on onsubmit() & onfocus() Event handler

<html>
     <body>
          <script>  
               function validateform()
               {  
                    var uname=document.myform.name.value;  
                    var upassword=document.myform.password.value;  
                    if (uname==null || uname=="")
                    {  
                         alert("Name cannot be left blank");  
                         return false;  
                    }
                    else if(upassword.length<6)
                    {  
                         alert("Password must be at least 6 characters long.");  
                         return false;  
                    }  
               }  
               function emailvalidation()
               {
                    var a=document.myform.email.value
                    if (a.indexOf("@")==-1)
                    {
                         alert("Please enter valid email address")
                         document.myform.email.focus()
                    }
               }
          </script>  
     <body>  
          <form name="myform" method="post" action="validpage.html" onsubmit="return validateform()">  
               Email: <input type="text" size="20" name="email" onblur="emailvalidation()"><br>
               User Name: <input type="text" name="name"><br>  
               Password: <input type="password" name="password"><br>  
               <input type="submit" value="Submit" >  
          </form>  
     </body>
</html>

validpage.html               //File name

<html>
     <body>
          <script type="text/javascript">
               alert("You are a Valid User !!!");
          </script>
     </body>
</html>


Output:

event handler 1


event handler 2


event handler 3


event handler 4