In JavaScript, event properties provide details about the event that occurs when a user interacts with an HTML element (such as clicking a button, pressing a key, or moving the mouse). These properties are accessible through the event object (event), which is automatically passed to the event handler.
Accessing Event Properties
When an event occurs, JavaScript generates an event object that contains various properties
Accessing Event Properties
The event object stores all details about the event, such as the element that triggered it, its coordinates, and its type.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<title>Event Handling Example</title>
<style>
.highlight { color: red; font-weight: bold; }
</style>
</head>
<body>
<button id="btn">Click Me</button>
<script>
document.getElementById("btn").addEventListener("click", function(event) {
console.log("Event Type:", event.type); // "click"
console.log("Target Element:", event.target); // Button element
console.log("Mouse X:", event.clientX, "Mouse Y:", event.clientY);
});
</script>
</body>
</html>
Common Event Properties
Here are some frequently used event properties given below,
1. General Event Properties
| Property | Description |
| event.type | Type of event (click, keydown, etc.) |
| event.target | The HTML element that triggered the event |
| event.currentTarget | The element on which the event listener is currently running |
| event.timeStamp | The time (in milliseconds) when the event occurred |
| event.defaultPrevented | true if preventDefault() was called |
Example
document.addEventListener("click", function(event) {
console.log("Event Type:", event.type);
});
2. Mouse Event Properties
These properties are available in events like click, dblclick,
mousemove, mousedown, and mouseup.
| Property | Description |
| event.clientX | X-coordinate of the mouse (relative to viewport) |
| event.clientY | Y-coordinate of the mouse (relative to viewport) |
| event.pageX | X-coordinate (relative to full page) |
| event.pageY | Y-coordinate (relative to full page) |
| event.screenX | X-coordinate (relative to the screen) |
| event.screenY | Y-coordinate (relative to the screen) |
| event.button | Mouse button clicked (0 = left, 1 = middle, 2 = right) |
| event.buttons | Bitmask of all pressed buttons |
Example: Tracking Mouse Position
document.addEventListener("mousemove", function(event) {
console.log("Mouse X:", event.clientX, "Mouse Y:", event.clientY);
});
3. Keyboard Event Properties
These properties are available in the keydown, keyup, and
keypress events.
| Property | Description |
| event.key | The key pressed (e.g., "Enter", "A") |
| event.code | Physical key code (e.g., "KeyA", "ArrowUp") |
| event.which | Numeric key code (deprecated) |
| event.ctrlKey | true if Ctrl key was pressed |
| event.shiftKey | true if Shift key was pressed |
| event.altKey | true if Alt key was pressed |
| event.metaKey | true if Meta key (Windows or Command key on Mac) was pressed |
Example: Detecting Key Press
document.addEventListener("keydown", function(event) {
console.log("Key Pressed:", event.key);
if (event.ctrlKey && event.key === "s") {
event.preventDefault(); // Prevents saving the page
console.log("Save shortcut disabled!");
}
});
4. Form Event Properties
These properties are available in the submit, change,
focus, blur, and input events.
| Property | Description |
| event.target.value | The current value of the input field |
| event.target.checked | true if a checkbox/radio button is checked |
| event.target.selectedIndex | The index of a selected option in a dropdown |
Example: Preventing Form Submission
document.querySelector("form").addEventListener("submit", function(event) {
event.preventDefault(); // Stops form from submitting
alert("Form submission prevented!");
});
5. Clipboard Event Properties
These properties are available in copy, cut, and
paste events.
| Property | Description |
| event.clipboardData | Data copied or pasted |
Example: Blocking Copy-Paste
document.addEventListener("copy", function(event) {
event.preventDefault();
alert("Copying is disabled!");
});
6. Drag & Drop Event Properties
These properties are available in dragstart, dragover,
drop, etc.
| Property | Description |
| event.dataTransfer | Allows transferring data during drag-and-drop |
Example: Dragging Text
document.addEventListener("dragstart", function(event) {
event.dataTransfer.setData("text", "Dragged Text");
});
Event Property Modifiers
Some methods modify event behavior.
event.preventDefault()
This prevents the default action.
document.getElementById("myLink").addEventListener("click", function(event) {
event.preventDefault(); // Stops link from opening
}); 2. event.stopPropagation()
This prevents the event from bubbling up in the DOM.
document.getElementById("child").addEventListener("click", function(event) {
event.stopPropagation(); // Stops event from reaching parent
});
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Event Properties Demo</title>
</head>
<body>
<button id="btn">Click Me</button>
<input type="text" id="inputBox" placeholder="Type something..." />
<script>
document.getElementById("btn").addEventListener("click", function(event) {
console.log("Button Clicked!");
console.log("Event Type:", event.type);
console.log("Target Element:", event.target);
console.log("Mouse X:", event.clientX, "Mouse Y:", event.clientY);
});
document.getElementById("inputBox").addEventListener("keydown", function(event) {
console.log("Key Pressed:", event.key);
});
</script>
</body>
</html>Note: Try clicking the button and typing in the input field. The console will show the event details!
I hope you understand clearly.
Thanks!
Also, Read: Explain the HTML DOM Event Methods in JavaScript
Leave Comment