Create a webpage to implement Form Events (Part-II)
4 min readDec 26, 2020
LABORATORY OBJECTIVE:
1. To understand basic concepts of Forms in JavaScript.
2. To learn Events and Event Handling in JavaScript.
3. Write JavaScript to design a form to accept input values for the given problem.
4. Use JavaScript to implement form events to solve the given problem.
5. 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 user using 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>
Output
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>
Output
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>
Thank you for your support
You can try out my apps available on Google Play Store