브라우저 화면의 위치를 찾고자 할 때 즉, 이벤트 좌표를 확인할 수 있는 자바스크립트의 DOM EVENT를 살펴본다. 현재 브라우저 화면의 어느 곳이든 클릭하면 파란색 박스 안에 클릭한 곳의 좌표가 표시된다.
Contents
DOM 이벤트 좌표
화면의 아무데나 클릭하면 파란색 박스 안에 클릭한 위치에 대한 좌표가 표시된다.
클릭하세요. 클릭한 곳의 좌표가 표시됩니다.
이벤트 좌표 주요 코드
- body 태그에 onclick="showCoords(event)" 처럼 이벤트를 매개변수로 받는 함수를 추가한다.
- event.clientX, event.clientY를 통해 마우스가 클릭한 좌표를 알 수 있다.
- 이를 활용해 $msg.textContent = `clientX: ${event.clientX}, clientY:${event.clientY}`; 처럼 하면 된다.
HTML 관련 주요 코드 살펴보기
body onclick="showCoords(event)"
p class="message"
HTML의 body 태그에 이벤트 좌표를 보여줄 함수를 추가한다. 이때 함수를 이벤트를 발생시키는 함수이므로 이벤트 핸들러라고 부른다. 무언가가 일어났을 때 발생하는 이벤트에는 event라는 객체가 내장되어 있다. 내장객체인 event에는 이벤트와 관련한 다양한 정보를 제공하는 프로퍼티가 있다. 바로 event 객체가 지닌 프로퍼티를 통해 클릭한 현재 좌표를 알 수 있는 것이다.
javascript 관련 주요 코드 살펴보기
const $msg = document.querySelector(".message");
function showCoords(event){
$msg.style.color="white";
$msg.textContent = `clientX: ${event.clientX},clientY:${event.clientY}`;
}
이벤트 핸들러
위에서 살펴폰 코드는 html에 직접 이벤트 핸들러를 연결하는 인라인 이벤트 핸들러 방식이다. html에는 html 코드만 사용하고 자바스크립트는 script에 사용하는 게 일반적이다. 따라서 자바스크립트에서 권장하는 addEventListener 메소드 방식을 활용할 필요가 있다.
- 기존 HTML 코드에 있는 자바스크립트를 모두 제거한다.
- 이벤트 좌표에 관여한 html 태그에 class 또는 id를 설정한다.
- 자바스크립트의 script에서 필요한 태그를 querySelector를 사용해서 변수에 담는다.
- addEventListener 메소드를 활용해 이벤트 핸들러를 지정한다.
- 이벤트 핸들러 함수에 event 내장객체를 인자로 받아 event.clientX와 event.clientY의 event 객체의 프로퍼티를 통해 좌표값을 보여준다.
<script>
const $article = document.querySelector("#article");
const $msg = document.querySelector(".message");
const $body = document.querySelector("body");
$article.style.padding="30px";
$article.style.border="5px outset red";
$article.style.backgroundColor="#1a73e8";
$body.addEventListener("click", showCoords);
function showCoords(event){
$msg.style.color="white";
$msg.textContent = `clientX: ${event.clientX}, clientY:${event.clientY}`;
}
</script>
