HomeJavaScript Page 7 - Understanding The JavaScript Event Model (part 2)
A Few Modifications - JavaScript
In this concluding article on the JavaScript event model, findout how the Event object can be used to do ever more complex things,including manipulating the dimensions of a Web page and tracking andintercepting keyboard and mouse events.
You can also track which of the so-called modifier keys are pressed in combination with a regular key on the keyboard (the modifier keys are the Alt, Ctrl and Shift keys). The "modifiers" property returns an integer or constant indicating which modifier key(s) were held down during the event.
Here's an example:
<html>
<head>
<script language="JavaScript">
function detectKey(mykey)
{
if (mykey.modifiers == Event.ALT_MASK)
{
alert ("You just pressed the Alt key");
}
else if (mykey.modifiers == Event.CONTROL_MASK)
{
alert ("You just pressed the Ctrl key");
}
else if (mykey.modifiers == Event.SHIFT_MASK)
{
alert ("You just pressed the Shift key");
}
else
{
alert ("Nope, that wasn't a modifier key");
}
}
document.onkeydown = detectKey;
</script>
</head>
<body>
</body>
</html>
In this case, the detectKey() function checks to see which modifier key was pressed, and displays a message appropriately. Note, however, that the script above only works in Netscape Navigator 4.x - later versions of the browser seem to have a problem with it.
Here's another example, this one demonstrating how the same thing works in Internet Explorer.
<html>
<head>
<script language="JavaScript">
function detectKey()
{
if (event.altKey)
{
alert ("You just pressed the Alt key");
}
else if (event.ctrlKey)
{
alert ("You just pressed the Ctrl key");
}
else if (event.shiftKey)
{
alert ("You just pressed the Shift key");
}
else
{
alert ("Nope, that wasn't a modifier key");
}
}
document.onkeydown = detectKey;
</script>
</head>
<body>
</body>
</html>
JavaScript 
