<html>
<head>
<title>Mouse Events</title>
<script>
function init()
{
var panel = document.getElementById('panel')
var btn = document.getElementById('btn')
btn.addEventListener("dblclick", dblClick)
btn.addEventListener("mousedown", mouseDown)
btn.addEventListener("mouseup", mouseUp)
btn.addEventListener("mouseover", mouseOver)
btn.addEventListener("mouseout", mouseOut)
}
function click()
{
panel.innerHTML += "Mouse clicked<br/>"
}
function dblClick()
{
panel.innerHTML += "Mouse double clicked<br/>"
}
function mouseDown()
{
panel.innerHTML += "Mouse down<br/>"
}
function mouseUp()
{
panel.innerHTML += "Mouse up<br/>"
}
function mouseOver()
{
panel.innerHTML += "Mouse over<br/>"
}
function mouseOut()
{
panel.innerHTML += "Mouse out<br/>"
}
function mouseMove()
{
panel.innerHTML += "Mouse moved<br/>"
}
</script>
</head>
<body onload="init()">
<input type="button" id="btn" value="Click Me" onclick="click()"
onmousemove="mouseMove"/>
<h3>Mouse events performed are</h3>
<p id="panel"></p>
</body>
</html>
<html>
<head>
<title>Key Events</title>
<script>
function init()
{
var panel = document.getElementById('panel')
document.addEventListener("keydown", keydown)
document.addEventListener("keypress", keypress)
document.addEventListener("keyup", keyup)
}
function keydown()
{
panel.innerHTML = "Key down<br/>"
}
function keypress(e)
{
var c = (window.event) ? e.keyCode : e.which
panel.innerHTML += "Key pressed: " + String.fromCharCode(c)
}
function keyup()
{
panel.innerHTML += "<br/>Key up"
}
</script>
</head>
<body onload="init()">
<p id="panel"></p>
</body>
</html>
<html>
<head>
<title>Example: Working with form Events</title>
<style type="text/css">
p {
font-family: Verdana;
background: #FA8B7C;
color: #fff;
padding: 10px;
border: 4px solid #555;
}
</style>
</head>
<body>
<form>
<p>
<label for="name"> Name:
<input autofocus id="name" name="name" /></label>
</p>
<p>
<label for="nick"> Nickname:
<input id="nick" name="nick" /></label>
</p>
<button type="submit">Submit</button>
</form>
<span id="output"></span>
</body>
<script>
var items = document.getElementsByTagName("input");
for (var i = 0; i < items.length; i++) {
items[i].onkeyup = keyboardEventHandler;
}
function keyboardEventHandler(e) {
document.getElementById("output").innerHTML = "Key pressed is: " +
e.keyCode + " Char:" + String.fromCharCode(e.keyCode);
}
</script>
</html>