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 view Event Property
The HTML view Event property returns a reference to the Window object where the event occurred. This property is available on UI events like mouse clicks, keyboard inputs, and focus events, providing access to the window context in which the event was triggered.
Syntax
Following is the syntax for accessing the view property −
event.view
Return Value
The view property returns a Window object reference. In most cases, this will be the same as the global window object. If the event occurs in an iframe or popup window, it returns the reference to that specific window context.
Example − Basic View Property Usage
Following example demonstrates how to access the view property of an event −
<!DOCTYPE html>
<html>
<head>
<title>HTML view Event Property</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px; text-align: center;">
<h1>HTML view Event Property</h1>
<button onclick="showView(event)" style="padding: 10px 20px; background: #007bff; color: white; border: none; border-radius: 4px; cursor: pointer;">Show View Property</button>
<p id="result" style="margin-top: 20px; font-weight: bold;"></p>
<script>
function showView(event) {
var viewObject = event.view;
var isWindow = viewObject === window;
document.getElementById("result").innerHTML =
"Event view is Window object: " + isWindow +
"<br>View object type: " + typeof viewObject;
console.log("Event view:", viewObject);
console.log("Is same as global window:", isWindow);
}
</script>
</body>
</html>
The output shows that the event's view property references the same Window object −
Event view is Window object: true View object type: object
Example − Comparing View with Global Window
Following example compares the event's view property with the global window object −
<!DOCTYPE html>
<html>
<head>
<title>View Property Comparison</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>View Property vs Global Window</h2>
<button onclick="compareView(event)" style="padding: 8px 16px; background: #28a745; color: white; border: none; border-radius: 4px; cursor: pointer;">Compare View</button>
<div id="output" style="margin-top: 15px; padding: 10px; background: #f8f9fa; border-radius: 4px;"></div>
<script>
function compareView(event) {
var viewWindow = event.view;
var globalWindow = window;
var output = document.getElementById("output");
output.innerHTML =
"<strong>Comparison Results:</strong><br>" +
"event.view === window: " + (viewWindow === globalWindow) + "<br>" +
"Window location: " + viewWindow.location.href + "<br>" +
"Window title: " + viewWindow.document.title;
}
</script>
</body>
</html>
This example demonstrates that the event's view property and the global window object are identical references.
Example − Different Event Types
Following example shows the view property across different types of events −
<!DOCTYPE html>
<html>
<head>
<title>View Property in Different Events</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>View Property in Different Events</h2>
<input type="text" placeholder="Type here..." onkeyup="handleKeyEvent(event)" style="padding: 8px; margin: 10px; width: 200px;">
<button onmousedown="handleMouseEvent(event)" style="padding: 8px 16px; background: #dc3545; color: white; border: none; border-radius: 4px; cursor: pointer;">Mouse Event</button>
<div id="eventResults" style="margin-top: 20px; padding: 15px; background: #e9ecef; border-radius: 4px;"></div>
<script>
function handleKeyEvent(event) {
displayEventInfo("Keyboard", event);
}
function handleMouseEvent(event) {
displayEventInfo("Mouse", event);
}
function displayEventInfo(eventType, event) {
var results = document.getElementById("eventResults");
var hasView = event.view !== undefined;
results.innerHTML =
"<strong>" + eventType + " Event:</strong><br>" +
"Has view property: " + hasView + "<br>" +
"View is Window: " + (hasView ? (event.view === window) : "N/A") + "<br>" +
"Event type: " + event.type;
}
</script>
</body>
</html>
Both keyboard and mouse events contain the view property that references the same Window object.
Use Cases
The view property is particularly useful in the following scenarios −
Cross-frame communication − When events occur in iframes, the view property helps identify which window context triggered the event.
Multi-window applications − Applications with popup windows can use the view property to determine the source window.
Event delegation − In complex applications, the view property ensures you're working with the correct window context.
Browser Compatibility
The view 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 and works consistently across different platforms.
Conclusion
The HTML view Event property provides access to the Window object where an event occurred, which is typically the same as the global window object. This property is useful for cross-frame communication and multi-window applications where identifying the event's window context is important.
149 Views
