JS events
Javascript is very useful for handling HTML events. For example, when mouse moves over the text, the color,
font size and weight of the text changes dynamically using javascript scripts.
<script language="javascript">
function mover(p)
{
var elem;
elem = document.getElementById(p);
elem.style.fontWeight = "bold";
elem.style.fontSize = "16px";
elem.style.color = "green";
}
function mout(p)
{
var elem;
elem = document.getElementById(p);
elem.style.fontWeight = "normal";
elem.style.fontSize = "15px";
elem.style.color = "black";
}
</script>
<div id=tt onmouseover="mover('tt');" onmouseout="mout('tt');">
Change text color and font size</div>
Change text color and font size
The mouse move over event is handled by onmouseover event, the font color and size changes. onmouseout handles the mouse move out event,
the font color and size changes back. Check here for mouse and keyboard events list.
In HTML forms, javascript may be used for input data validation via events such as onsubmit, onkeyup etc.
For example, the following event handler "onsubmit" will show an alert Form when the form is submitted.
<form onsubmit="alert('test'); return false;">
<input type=submit value="submit">
</form>
The following code will check the user input, if it is a number, then it will be deleted.
<script language="javascript">
function isNum(args)
{
args = args.toString();
if (args.length == 0) return false;
for (var i = 0; i < args.length; i++)
{
if (args.substring(i,i+1) >= "0" && args.substring(i, i+1) <= "9")
{
return true;
}
}
return false;
}
function formcheck()
{
var a = document.fm.inp.value;
if (isNum(a))
{
a = a.substring(0,a.length-1);
document.fm.inp.value = a;
return;
}
}
</script>
<form name=fm>
<input name="inp" id='inp' autocomplete="off" onkeyup="formcheck()" type="text" style="font-size:19px;width:370px;height:28px" class="SearchNews">
</form>
Window events is another important events.
For example, the following event handler "onload" will show an alert window after page loads.
<body onload="alert('test');">
Click here for more window events.
