프론트엔드/JavaScript
이벤트 객체
ksge7
2020. 10. 28. 23:11
이벤트 객체란?
이벤트 객체란 DOM을 이용한 이벤트에 연결된 함수에서 매개변수로 얻을 수 있는 객체다.
이 객체는 발생한 이벤트에 관한 다양한 정보를 가지고 있다.
그리고 이벤트 객체는 다양한 메서드와 프로퍼티를 가지고 있어서
이벤트를 더욱 세심하게 컨트롤할 수 있다.
우선 어떻게 사용하지는 보도록 하자.
<body>
<button id="test"> 이벤트 객체 테스트 버튼입니다. </button>
</body>
<script>
let eventObject = document.getElementById('test');
eventObject.addEventListener('click', function(event){
console.log("눌렀습니다.");
console.log("클릭이 이뤄진 X좌표: "+event.clientX);
console.log("클릭이 이뤄진 Y좌표: "+event.clientY);
console.log("현재 이벤트 처리 중인 element: "+event.currentTarget);
console.log("이벤트 핸들러가 호출된 단계: "+event.eventPhase);
console.log("실행된 이벤트 타입: "+event.type);
});
</script>
위 코드는 버튼 클릭 이벤트 발생시 콘솔창에 각종 이벤트 객체 관련 정보가 출력되도록 설정한 함수다.
이때 이벤트 리스너의 콜백 함수를 통해 매개변수로 이벤트 객체를 받게 된다.
위 코드를 실행하고 화면 상의 버튼을 클릭하면 콘솔창에 다음과 같이 뜬다.
위 그림처럼 실행됐던 이벤트에 관한 다양한 정보를 얻을 수 있다.
그리고 이외에도 이벤트 객체를 이용하여 다음과 같은 기능을 실행할 수 있다.
| 메서드명 | 설명 |
| preventDefault() | 취소 가능한 이벤트를 취소함 |
| stopImmediatePropagation() | 같은 요소의 다른 이벤트도 막고 상위로 가는 이벤트 전파도 막음 |
| stopPropagation() | 버블링 단계에서 상위로 가는 이벤트 전파 막을 수 있음 |