Section 5: Event Handlers


Events in Javascript are things that happen: often things that the user caused to happen. They include things like:

  • The mouse moving into a certain portion of the screen (the MouseOver event),
  • The mouse moving out again (the MouseOut event),
  • The user clicking on a portion of the screen (the Click event),
  • The page finishes loading (the Load event),
  • The user closes the page (the Unload event),

and many more!

An Event Handler is a javascript function or a piece of javascript code that runs when a certain event happens. One example: When we click on a link, the browser goes to a new webpage. In terms of events and event handlers, we might say that opening the new page is the event handler for the Click event for that link.

It is possible (in fact, easy!) for us to write our own functions, and to tell Javascript that they are event handlers. Suppose we want to write an event handler that will run whenever the user moves the mouse over a particular link. We could do it like this:

<SCRIPT>

function AboutToClick() {
  javascript commands;
}

</SCRIPT>

<A HREF="gohere.html" onMouseOver="AboutToClick()">Click Here!</A>

We define the function within the <SCRIPT> tag. Then, within the <A> tag, we have one extra item - onMouseOver="AboutToClick()". Once this is done, whenever the user moves the Mouse Over the link, the function AboutToClick() will be performed.

Below is a more complicated example, which you can see in action by following this link.

<script>
function Paint(MyColour) {
  document.bgColor = MyColour ; /* Change the Background Colour */
}

function Beware(MyColour) {
  warning = "Beware! You are about to paint the screen " + MyColour + "!!" ;
  alert(warning); /* Warns the user what is about to happen */
}

</script>

<p>
<center>
<h3>Choose A Background Colour: 
<a href = "javascript:Paint('red')" onMouseOver="Beware('red')">Fire</a>
<a href = "javascript:Paint('blue')" onMouseOver="Beware('blue')">Deep</a>
<a href = "javascript:Paint('green')" onMouseOver="Beware('green')">Keroppi</a>
<a href = "javascript:Paint('white')" onMouseOver="Beware('white')">Snow</a>
<a href = "javascript:Paint('black')" onMouseOver="Beware('black')">Soot</a>
<a href = "javascript:Paint('yellow')" onMouseOver="Beware('yellow')">Sun</a>
</h3>
</center>

Here, two functions have been defined, Paint and Beware. Each takes one argument. Paint has been made the target of the links, via the statements href = "javascript:Paint('red')" etc. However, before the user can click on a link, he or she will have to move their mouse over it - and then, the Beware function will run, warning the user (via the inbuilt alert function) what they are about to do.

You will see, if you try this example, that the warnings can get quite irritating!

The next example shows how to use the Load and Unload events. These are the events that occur (respectively) when the user opens and closes the web page. They are events relating to the whole document, not just a single link, so the commands defining their event handlers are placed in the <BODY> tag:

<BODY onLoad="OpenFunction()" onUnload="CloseFunction()">

Where, of course, OpenFunction() and CloseFunction() would be javascript functions defined by the web page designer.

Usually, the functions that become the event handlers for Load and Unload are defined in the <HEAD> portion of the HTML file, rather than later, but strictly speaking, this is not necessary.

Consider the example below: 

<HEAD>
<TITLE>Javascript Example 5b</TITLE>

<SCRIPT>
function Welcome() {
  alert("Welcome to my Webpage!");
}

function ByeBye() {
  alert("Thank you for visiting!"); 
}
</SCRIPT>

</HEAD>

<BODY onLoad="Welcome()" onUnload="ByeBye()">

<H1>Welcome to Javascript!</H1>

Here, as soon as the page is loaded, the function Welcome() is called. This happens because of the statement onLoad="Welcome()" inside the <BODY> tag. The Welcome() function here doesn't do much - it only puts a little welcome message on the screen.

When the page is closed, for whatever reason, the function ByeBye() is called. Again, this happens because of the statement onUnload="ByeBye()" inside the <BODY> tag. Again, the function ByeBye() only puts a little message on the screen.

Follow this link to see this example in action.