In this post, we are going to see about Event Handling in JavaScript: From Clicks to Key Presses
Event handling in JavaScript
The first thing that we should notice here is that JavaScript is one of the most important languages for web developers, and this is borrowed from computers to the rest of the world.
For the time being, JavaScript is not just a programming language and can be found in almost every device or computer, from desktops and laptops to smartphones, and has ever been developing new technologies.
Key Concepts of Event Handling
1.Event: An action or occurrence that is detected by the browser such as user interactions (clicks, key presses), browser actions (load, resize), or even custom events.
2.Event Listener: A function that waits for a specific event to occur on an element and then it triggers the callback when the events occur.
3.Event Object: When an event takes place, an event object is automatically transferred to the event handler. This object comprises information, e.g. which element launched it, mouse location, key codes, etc.
Mouse Events:
click: This event occurs when the user clicks on an element.
dblclick: This event occurs when the user double clicks on an element.
mousedown/mouseup: This event occurs when a mouse button is pressed or released over an element.
mousemove: This event occurs when the pointer moves across the element.
mouseenter/mouseleave: These events occur when the mouse points at the object and when it moves away from the object respectively.
Keyboard Events:
keydown: This event is fired when a key is pressed.
keyup: This event is fired when a key is released.
keypress: (Obsolete) This event gets triggered when a key is pressed, however keydown is recommended.
keydown: This event is fired when a key is pressed down.
keyup: This event is fired when a key is released.
keypress: (Obsolete) This event is fired when a key gets pressed, however it is recommended to use key down in its place.
These are the important events used in javascript
Example: Handling Click, Key Press, and Form Submit Events
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Event Handling Example</title>
</head>
<body>
<!-- Button to handle click event -->
<button id="myButton">Click Me</button>
<!-- Input field to handle key press event -->
<input type="text" id="textInput" placeholder="Type something...">
<!-- Form to handle submit event -->
<form id="myForm">
<input type="text" name="username" placeholder="Enter your name">
<button type="submit">Submit</button>
</form>
<script>
// Handling button click event
const button = document.getElementById('myButton');
button.addEventListener('click', () => {
alert('Button was clicked!');
});
// Handling key press event in input field
const textInput = document.getElementById('textInput');
textInput.addEventListener('keydown', (event) => {
console.log(`Key pressed: ${event.key}`);
});
// Handling form submission event
const form = document.getElementById('myForm');
form.addEventListener('submit', (event) => {
event.preventDefault(); // Prevents form from submitting
alert('Form submitted successfully!');
});
</script>
</body>
</html>
Output:
Key pressed: a
Conclusions:
This particular example illustrates the fundamental event handling which one can do in JavaScript. It exemplifies three prefixed events in most applications—a click, a key press, and submitting a form. The use of addEventListener() enables the manipulation of the document in response to user actions within the application implemented in JavaScript:
Button Pressed – an alert is shown when the button is pressed.
Key Press – the pressed key in an input box is printed on the console.
Form Submission – the proper submission of a form is avoided and instead a success message is shown.