HTML의 view 이벤트 속성은 이벤트가 발생한 Window 객체에 대한 참조를 반환하는 속성입니다. 이 속성을 활용하면 이벤트가 어느 창(window)에서 발생했는지 확인할 수 있어, 다중 프레임 환경이나 팝업 창을 다룰 때 특히 유용합니다.
문법(Syntax)
view 이벤트 속성의 기본 문법은 다음과 같습니다.
event.view
예제(Example)
아래 예제를 통해 HTML view 이벤트 속성의 실제 동작을 확인해 보겠습니다. 버튼을 클릭하면 콘솔에 Window 객체가 출력됩니다.
<!DOCTYPE html>
<html>
<style>
body {
color: #000;
height: 100vh;
background-color: #FBAB7E;
background-image: linear-gradient(62deg, #FBAB7E 0%, #F7CE68 100%);
text-align: center;
}
.btn {
background: #db133a;
border: none;
height: 2rem;
border-radius: 2px;
width: 40%;
display: block;
color: #fff;
outline: none;
cursor: pointer;
margin: 1rem auto;
}
</style>
<body>
<h1>HTML view Event Property</h1>
<button class="btn" onclick="get()">Show view event</button>
<div class="show"></div>
<script>
function get() {
document.querySelector(".show").innerHTML = "Open your console and observe the Window object";
console.log(event.view);
}
</script>
</body>
</html>실행 결과(Output)
위 코드를 실행한 후, “Show view event” 버튼을 클릭하면 화면에 안내 문구가 표시되고 Window 객체가 출력됩니다.
이제 브라우저의 개발자 도구(콘솔)를 열어 Window 객체를 직접 확인해 보세요.
정리
view 이벤트 속성은 이벤트 객체의 기본 속성 중 하나로, 이벤트가 발생한 창의 Window 객체를 참조합니다. 일반적인 단일 창 환경에서는 항상 현재 창의 Window 객체를 반환하지만, iframe이나 여러 창이 존재하는 환경에서는 이벤트가 발생한 정확한 창을 식별하는 데 활용할 수 있습니다. 이벤트 처리 로직에서 출처 창을 명확히 해야 하는 경우에 꼭 기억해 둘 만한 속성입니다.