Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
HTML DOM Event type Property
The HTML DOM Event type property returns a string corresponding to the event's type such as click, keypress, load, or touchend. This property is useful for identifying which specific event was triggered when using the same event handler function for multiple event types.
Syntax
Following is the syntax for accessing the Event type property −
event.type
Return Value
The event.type property returns a string representing the type of event that was fired. Common event types include:
-
"click"− Mouse click event -
"keydown"− Key press event -
"load"− Page load event -
"touchstart"− Touch start event -
"mouseover"− Mouse hover event
Example − Detecting Event Types
Following example demonstrates how to use the Event type property to handle different events with a single function −
<!DOCTYPE html>
<html>
<head>
<title>HTML DOM Event type</title>
<style>
form {
width: 70%;
margin: 0 auto;
text-align: center;
font-family: Arial, sans-serif;
}
* {
padding: 2px;
margin: 5px;
}
input[type="button"] {
border-radius: 10px;
}
.playArea {
display: inline-block;
border-radius: 50%;
background-color: #DC3545;
width: 50px;
height: 50px;
border: 3px solid #AC3509;
transition: all 1.3s ease;
}
.clickStyle {
transform: scale(1.5);
}
.touchstartStyle {
transform: translateX(50px);
}
#divDisplay {
font-weight: bold;
color: #333;
margin-top: 10px;
}
</style>
</head>
<body>
<form>
<fieldset>
<legend>HTML-DOM-Event-type</legend>
<div class="playArea"></div><br>
<div id="divDisplay">Click or touch the circle above</div>
</fieldset>
</form>
<script>
var divDisplay = document.getElementById("divDisplay");
var playDisplay = document.getElementsByClassName("playArea")[0];
function getEventType(event) {
if(event.type === 'click'){
playDisplay.classList.remove('touchstartStyle');
playDisplay.classList.add('clickStyle');
divDisplay.textContent = 'Event Fired: ' + event.type;
} else if(event.type === 'touchstart'){
playDisplay.classList.remove('clickStyle');
playDisplay.classList.add('touchstartStyle');
divDisplay.textContent = 'Event Fired: ' + event.type;
}
}
playDisplay.addEventListener("click", getEventType);
playDisplay.addEventListener("touchstart", getEventType);
</script>
</body>
</html>
The output shows different visual effects based on the event type. Clicking scales the circle, while touching moves it horizontally −
Before interaction: Red circle with "Click or touch the circle above" After click: Circle scales 1.5x with "Event Fired: click" After touch: Circle moves right 50px with "Event Fired: touchstart"
Example − Multiple Event Types
Following example shows how to handle multiple event types using a single event handler −
<!DOCTYPE html>
<html>
<head>
<title>Multiple Event Types</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<button id="myButton">Interact with me</button>
<div id="output"></div>
<script>
var button = document.getElementById("myButton");
var output = document.getElementById("output");
function handleEvent(event) {
var message = "Event type: " + event.type + "<br>";
output.innerHTML += message;
}
button.addEventListener("click", handleEvent);
button.addEventListener("mouseover", handleEvent);
button.addEventListener("mouseout", handleEvent);
button.addEventListener("keydown", handleEvent);
</script>
</body>
</html>
This example logs different event types as they occur on the button element −
Event type: mouseover Event type: click Event type: mouseout
Example − Form Event Types
Following example demonstrates event types commonly used with form elements −
<!DOCTYPE html>
<html>
<head>
<title>Form Event Types</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<form id="myForm">
<input type="text" id="textInput" placeholder="Type something...">
<button type="submit">Submit</button>
</form>
<div id="eventLog"></div>
<script>
var form = document.getElementById("myForm");
var input = document.getElementById("textInput");
var eventLog = document.getElementById("eventLog");
function logEvent(event) {
eventLog.innerHTML += "Event: " + event.type + "<br>";
}
input.addEventListener("focus", logEvent);
input.addEventListener("blur", logEvent);
input.addEventListener("keydown", logEvent);
form.addEventListener("submit", function(event) {
event.preventDefault();
logEvent(event);
});
</script>
</body>
</html>
This example captures various form-related events and displays their types −
Event: focus Event: keydown Event: blur Event: submit
Key Points
- The
event.typeproperty is read-only and cannot be modified. - Event types are case-sensitive strings (e.g., "click", not "Click").
- This property is particularly useful when the same function handles multiple event types.
- Event types correspond to the event names used in
addEventListener()method.
Browser Compatibility
The Event type property is supported in all modern browsers including Chrome, Firefox, Safari, Edge, and Internet Explorer 9+. It is part of the DOM Level 2 Events specification.
Conclusion
The event.type property provides a simple way to identify which event was triggered, making it essential for creating versatile event handlers. It returns a string representing the event type and is particularly useful when a single function needs to handle multiple different events with specific logic for each type.
164 Views
