-
이벤트 객체프론트엔드/JavaScript 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() 버블링 단계에서 상위로 가는 이벤트 전파 막을 수 있음 '프론트엔드 > JavaScript' 카테고리의 다른 글
자바스크립트 - 버블링, 캡쳐링의 활용과 이벤트 위임 (0) 2020.10.20 자바스크립트 - 이벤트 버블링과 캡쳐링 (0) 2020.10.20 자바스크립트 - 이벤트 핸들러 (0) 2020.10.19 자바스크립트 - 이벤트 (0) 2020.10.19 자바스크립트 고차함수 - find(), findindex() (0) 2020.10.06