Make your own free website on Tripod.com
.JavaScript&more Tutorial
 
"Event handlers" in  JavaScript

What are Event handlers? 
They are JavaScript code that are not added inside the <script> tags, but rather, inside the html tags, that execute JavaScript when something happens, such as pressing a button, moving your mouse over a link, submitting a form etc. 


Introduction

What are event handlers? 
They are JavaScript code that are not added inside the <script> tags, but rather, inside the html tags, that execute JavaScript when something happens, such as pressing a button, moving your mouse over a link, submitting a form etc. 
The basic syntax of these event handlers is:

          name_of_handler="JavaScript code" 

Example:

onClick="alert('Hello, world!')"
 

Event Handlers:
onclick  -  Use this to invoke JavaScript upon clicking (a link, or form boxes)

onload  -  Use this to invoke JavaScript after the page or an image 
              has finished loading.

onmouseover  -  Use this to invoke JavaScript if the mouse passes by some link

onmouseout  -  Use this to invoke JavaScript if the mouse goes pass some link

onunload  -  Use this to invoke JavaScript right after someone leaves this page.


OnClick Event handlers

 onClick handlers execute something only when users 
 click  on  form  buttons,  check  boxes,  etc,  or  text  links
 therefore  they  can  only  be  inserted  in  these  tags, 
 for example, <a>,<input type=..>. 
 

Example:
<script>
  function test()
  {
  alert("You have activated me by clicking the grey button! Note that the event 
            handler is added within the event that it handles, in this case, the form 
            button event tag")
   }
</script>
<form>
  <input type="button" name="test1" value="Click here" onclick="test()">
</form>

The function test() is invoked when the user clicks the button.

You can use this tags to change the background color of a document interactively:
 

<form name="go">
   <input type="checkbox" name="C1" onclick="document.bgColor='lightblue'">
   <input type="checkbox" name="C2" onclick="document.bgColor='lightyellow'">
   <input type="checkbox" name="C3" onclick="document.bgColor='lightgreen'">
</form>

These tags will be included in the next example. 

Example
  <html>
   <head>
    <title> event_handler</title>
   </head>
 <body>
  <script>
     function Hi()
     {
        alert("Hi there!")
     }
   </script>
   <form>
          <input type="button" name="hi" value="Click me!" onclick="Hi()">
   </form>
   <form>
  You can change color of the screen in LIGHTBLUEby using this checkbox:
         <input type="checkbox" name="click" 
            onclick="document.bgColor='lightblue'">
         <br>
         <input type="button" onclick="document.bgColor='white'" 
            value="Again WHITE?">
        <input type="button" onClick="window.document.bgColor='yellow'" 
                                                       value="YELLOW color of the screen?">
   </form>
 </body>
 </html>




OnLoad Event handlers

 The onload event handler is used to call the execution of JavaScript 
 after a page/ frameset)/ image has completely loaded. 

 It is added like this:

 <body onload="function()">
 // Execution of code will begin after the page has loaded.

 <frameset onload="function()"> 
 // Execution of code will begin after the current frame has loaded.

 <img src="whatever.gif" onload="function()">
 // Execution of code will begin after the image has loaded.

 Example
 <html>
    <head>
          <title>event_handler</title>
    </head>
  <body onload="alert('File Page2.htm has finished loading!')">
        This file is opened in a new window!
  </body>
 </html>

 As soon as the page has finished loading, it will alert you saying so.
 Let save the above example with a name  "Page2.htm"

 Let you see the second part of this example about opening the file "Page2.htm" in a new window.

 <html>
 <head>
 <title>event_handler</title>
 </head>
 <body>
    <form method="post">
       <input type="button" name="b1" value="Click here to see"
            onclick="window.open('page2.htm')">
    </form>
 </body>
 </html>

 If you want to open the file 2Page.htm in a smaller window,
 you must change the form tags with:

 <form>
        <p><input type="button" name="b1" value="Click here to see"
 onclick="window.open('page2.htm','win1','width=200,height=200,menubar')">
 </form>





 
 

onMouseover, onMouseout Event handlers

These handlers are used exclusively with links. The following example writes something to the status bar (at the bottom of your screen) whenever a mouse cursor hovers over the link, and deletes it when the mouse moves away.

<a href="some_file.htm" onmouseover="status='Do not click here, its empty!';
return true"onmouseout="status=''">Don't Click Here</a>

the "status" refers to window.status, which is how you write to the status bar.

Note that instead of calling a function, we wrote directly the JavaScript code within the handler:  "status='Do not click here, its empty!';return true" 

It is important that you separate statements with  ; . You could have, alternatively, written everything up until "return true" as a function and then calling it:

function writestatus()
{
status="Do not click here, its empty!"
}

and then: 

onmouseover="writestatus();return true"

You need this to "activate" the status onmouseover effect!

onmouseout="status=' '" clears the status after the mouse leaves the link.

Whenever the mouse moves away from the link, the status bar is "reset" again.
If you don't insert this code, the status bar will still have those words you entered into it even after taking away the cursor.

Whenever we have nested quotations, the inner ones are always singled. Ie:
onclick="document.write('hello')"

All this is collected in the next 

Example:
<html>
<head>
   <title>event_handler</title>
</head>
<body>
   <script>
     function writestatus()
    {
         status="Do not click here, it's empty file!"
    }
   </script>
<a href="empty_file.htm" onmouseover="writestatus();return true" 
                              onmouseout="status=''">Don't Click Here</a>
</body>
</html>



 
To continue with Radio & Check Boxes continue