HTML DOM의 Event type 속성은 발생한 이벤트의 유형을 나타내는 문자열을 반환합니다. 반환되는 값으로는 click, keypress, load, touchend 등이 있으며, 이 속성을 활용하면 하나의 이벤트 핸들러 안에서 여러 종류의 이벤트를 구분해 처리할 수 있습니다.
문법(Syntax)
event.type
Event type 속성은 읽기 전용(read-only)이며, 별도의 매개변수 없이 이벤트 객체에서 바로 참조할 수 있습니다. 이벤트 리스너에 전달된 event 객체의 type 프로퍼티를 읽으면 현재 발생한 이벤트의 이름을 문자열로 얻을 수 있습니다.
예제
다음 예제에서는 원형 요소에 click 이벤트와 touchstart 이벤트 리스너를 등록한 뒤, event.type 값으로 어떤 이벤트가 발생했는지 판별합니다. 이벤트 유형에 따라 서로 다른 CSS 클래스를 적용하고, 화면에는 발생한 이벤트 이름을 출력합니다.
<!DOCTYPE html>
<html>
<head>
<title>HTML DOM Event type</title>
<style>
form {
width:70%;
margin: 0 auto;
text-align: center;
}
* {
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);
}
</style>
</head>
<body>
<form>
<fieldset>
<legend>HTML-DOM-Event-type</legend>
<div class="playArea"></div><br>
<div id="divDisplay"></div>
</fieldset>
</form>
<script>
var divDisplay = document.getElementById("divDisplay");
var playDisplay = document.getElementsByClassName("playArea")[0];
var TranslateXSelect = document.getElementById("TranslateXSelect");
var ScaleSelect = document.getElementById("ScaleSelect");
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>
출력 결과
div 요소를 클릭하기 전 − 빨간색 원형 요소가 기본 상태로 표시됩니다.
div 요소를 클릭한 후 − event.type이 click으로 판별되어 원이 1.5배 확대되고, "Event Fired: click"이라는 메시지가 화면에 나타납니다.
div 요소를 터치한 후 − event.type이 touchstart로 판별되어 원이 오른쪽으로 50px 이동하고, "Event Fired: touchstart"라는 메시지가 표시됩니다.
이처럼 Event type 속성을 사용하면 마우스 클릭과 터치 입력처럼 서로 다른 입력 방식을 하나의 핸들러에서 손쉽게 분기 처리할 수 있어, 반응형 웹이나 모바일 환경을 지원하는 인터랙티브 UI를 만들 때 특히 유용합니다.