Saturday 17 January 2015

Event Handlers



  • onError: An onError event handler executes Javascript code when an error occurs while loading a document or an image. With onError event now you can turn off the standard Javascript messages and have your own function that will trace all the error in the script. To disable all the standard Javascript error messages,all you need to do is to set window.onError = null. To call a function when an error occurs all you need to do is 
                                                     onError= "myerrorfunction( )"       

For example:


<html><head>

<title>Example of onError Event Handler</title>

<script>  windows.onError = ErrorSetting;

var e_msg=" "; 

var e_file=" ";

 var e_line=" ";

document.form[8].value="myButton";

function Errorsetting (msg,file loc,line no){

  e_msg= msg;

  e_file= file_loc;

   e_line= line_no;

 return true; }

function display(){

  var error_d="Error in file" + e_file + "\nline number" + e_line + "\nmessage:" + e_msg;

  alert("Error Window:\n" + error_d); 

</script>

</head>

<body> <h3>Examples of onError Event Handler</h3>

<form>

<input type=button value="Show the error" onClick="display()"> </form>

</body></html>   

Notice that the function ErrorSetting( ) takes three arguments i.e. message text, URL and line number of the error line. So all I did was to invoke the function when an error occurred and set these values to different variables. Finally,I displayed the values via an alert method.

NOTE: If you set the function ErrorSetting( ) to false,the standard dialog will be seen.

  • onFocus: An onFocus event handler executes Javascript code when input focus enters the field either by tabbing in or by clicking but not selecting input from the field. For windows,frames and framesets,the event handler executes Javascript code when the window gets focused. In windows,you need to specify the event handler in the <body> attribute such as
<body bgcolor="#FFFFFF" onFocus="document.bgcolor= '#000000' ">

NOTE: On a windows platform,the onFocus event handler does not work with <frameset>.

For example:
<html>
<head>
<title>Example of onFocus Event handler</title>
</head>
<body>
<h3>Example of onFocus Event Handler</h3>
Click your mouse in the text box:<br>
<form>
<input type=textbox onFocus='alert("You focused in the textbox!!")'>
</form>
</body>
</html>

In the above example,when you put your mouse on the textbox, an alert( ) function display a message.   

  • onLoad: An onLoad event occurs when a window or image finished loading. For windows,this event handler is specified in the <body> attribute of the window. In an images,the event handler will execute handler text when the image is loaded.Such as
  <img src="image/object.jpg" name="jsobjects" onLoad="alert("You loaded my image")">

For example:
<html>
<head>
<title>Example of onLoad Event handler</title>
<script>
function hello()
{
  alert("Hello there...\n\nThis is an example of onLoad");
}
</script>
</head>
<body onLoad="hello()">
<h3>Example of onLoad Event Handler</h3>
</body>
</html> 

The example shows how the function hello( ) is called by using the onLoad event handler.

  • onMouseOut: Javascript  code is called when the mouse leaves a specific link or an object or area from outside that object or area. For area object,the event handler is specified with the <area> tag.
For example:

<html>

<head><title>Example of onMouseout Event Handler</title>
</head>
<body>
<h3>Example of onMouseOut Event Handler</h3>
<a href="javascript: void('');" onMouseOut="windows.status='you left the link here!'; return true;"></a>
</body>
</html>

Put your cursor over <a></a> and then take the mouse pointer away.

In the above example,after pointing your mouse and leaving the link,the text "You left the link!" appears on your windows status bar.

  • onMouseOver: Javascript code is called when the mouse is placed over a specific link or an object or area from outside that object or area. For area object,the event handler is specified with the <area> tag.Such as
<map name= "mymap"> <area name="First Area" co-ords="0,0,49,25" href="mylink.html" onMouseOver="self.status="This will take you to my link",return true"> </map>

For example:
<html>
<head>
<title>Example of onMouseOver Event Handler</title>
</head>
<body>
<h3>Example of onMouseOver Event Handler</h3>
Put your cursor over
<a href="javascript:void();" onMouseOver="windows.status ='Hello! How are you?'; return true;"></a>
and look at the status bar(usually at the bottom of your browser window)
</body>
</html>

In the above example,when you point your cursor to the link,the text "Hello!How are you?" appears on your windows status bar. 






No comments:

Post a Comment