Event Handlers

Events are actions that occur, for example when a user clicks on a HTML element such as a button the instructions inside the javascript is executed - this instruction could be to display the date.

Have a look at some of the javascript event handlers, in the table below.


Event Handlers Explanation
onblur() Focus is removed from an element
onchange() The content of a form element changes
onclick() An event occurs when the mouse clicks on an element
onfocus() An element gets focus
onkeypress() A key on the keyboard is pressed down and released
onload() An event occurs once the object has loaded
onmouseover() The mouse is moved over an element
onmouseout() The mouse is moved away from an element
onreset() A form is reset
onsubmit() A form is submitted



Example: onfocus and onblur

<script>
function blurOn(x)
{
var text1=document.getElementById(x);
text1.value="focus is off";
text1.style.color="red";
}
function focusOn(x)
{
var text1=document.getElementById(x)
text1.value="focus is on";
text1.style.color="blue"
}
</script>

<body>
<form>

//Note: CSS has been used

<p >First Name:</p>
<input type="text" id="input1"
onfocus='focusOn("input1")'
onblur='blurOn("input1")' />

</form>
</body>

Displays

First Name:


Click in and out of the text box to see the events of the onfocus and onblur.






Example: onclick

<script>
function date()
{
var today=new Date();
document.getElementById("p").innerHTML=today;
}
</script>

<body>
<form>

//Note: CSS has been used to style the button and the paragraph

<input type="button" onclick="date()" value="Date" />
<p id="p"></p>

</form>
</body>

Click on the date button for the date to be displayed inside the black box.


Displays






Example: onchange

<script>
function pick(select)
{
alert ("The flavour you have selected is" + select.options[select.selectedIndex].value);
}
</script>
<body>
<form>

<p>Select a cake flavour:</p>

<select onchange="pick(this)">
<option value="none">None</option>
<option value="Lemon">Lemon</option>
<option value="Chocolate">Chocolate</option>
<option value="Orange">Orange</option>
</select>

</form>
</body>


Displays

Select a cake flavour:





Event - onmouseover

<script>
function mouseOver()
{
window.alert("tasty cakes")
}
</script>
<body>
<img src="cake89.jpg" onmouseover="mouseOver()" />
</body>


Displays






Event - onmouseout


<script>
function mouseOutside()
{
document.pic.src = "strawberry.jpg";
}

function mouseInside()
{
document.pic.src = "lemon.jpg";
}
<script>

<body>
<img src="chocolate.jpg" name="pic"
onmouseout= mouseOutside()
onmouseover=mouseInside()/>
</body>

Displays






Example: onload

<script>
function star()
{
var leftSide=100;
var star=document.getElementById("pics");
star.style.left= ((leftSide+=1) +"px");
if(leftSide>= screen.availWidth-200)
{
leftSide=100;
}
}
<script>

<body onload="setInterval('star()',50);">

<img src="star.jpg" id="pics" style="position:absolute;
left:100px;top:200"/>

</body>


Displays






Now do the Exercises!



>