Create a webpage to implement Form Events (Part-II)
Laboratory Objective:
- To understand basic concepts of Forms in JavaScript.
- To learn Events and Event Handling in JavaScript.
- Write JavaScript to design a form to accept input values for the given problem.
- Use JavaScript to implement form events to solve the given problem.
- Develop JavaScript to dynamically assign specified attribute value to the given form control.
Mouse Events
- Mouse events are used to capture the interactions made by the user using the mouse.
- Such events may come not only from “mouse devices”, but are also from other devices, such as phones and tablets.
Mouse Event Types
- mousedown/mouseup : Mouse button is clicked/released over an element.
- mouseover/mouseout : Mouse pointer comes over/out from an element.
- mousemove : Every mouse move over an element triggers that event.
- click : Triggers after mousedown and then mouseup over the same element if the left mouse button was used.
- dblclick : Triggers after two clicks on the same element within a short timeframe. Rarely used nowadays.
- contextmenu : Triggers when the right mouse button is pressed. There are other ways to open a context menu, e.g. using a special keyboard key, it triggers in that case also, so it’s not exactly the mouse event.
Example of Mouse Events
<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>
Key Events
- The keyboard events are the events that occur when the user interacts using the keyboard.
- The keydown events happens when a key is pressed down, and then keyup when it’s released.
- The event.key property of the event object allows to get the character , while the event.code property of the event object allows to get the “physical key code”.
- For instance, the same key Z can be pressed with or without Shift. That gives us two different characters: lowercase z and uppercase Z.
- The event.key is exactly the character, and it will be different. You can visit https://javascript.info/keyboard-events for more details
Key Event Types
- onkeydown : When user presses the key on the keyboard (this happens first).
- onkeypress : The user presses a key (this happens after onkeydown)
- onkeyup : The user releases a key that was down (this happens last).
Example of KeyEvents
<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>
Sample Program
Develop a JavaScript program for working with form events.
<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>
