웹 애플리케이션을 개발하다 보면 사용자가 마우스를 클릭한 위치나 마우스를 이동시킨 위치를 알아내야 하는 경우가 있습니다. 이때 브라우저의 BOM(Browser Object Model)을 사용하여 마우스 좌표를 쉽게 알아낼 수 있습니다.

MouseEvent 객체

마우스 이벤트를 다루기 위해서는 MouseEvent 객체를 사용해야 합니다. MouseEvent 객체에는 마우스의 좌표 정보와 다른 이벤트에 대한 정보가 들어 있습니다.

document.addEventListener('mousemove', function(event) {
    var mouseX = event.pageX;
    var mouseY = event.pageY;
    
    console.log("마우스 X 좌표: " + mouseX);
    console.log("마우스 Y 좌표: " + mouseY);
});

위의 코드에서는 마우스가 움직일 때마다 mousemove 이벤트가 발생하면서 이벤트 객체가 전달됩니다. 이벤트 객체의 pageX와 pageY 속성을 사용하여 현재 마우스의 X 좌표와 Y 좌표를 알아낼 수 있습니다.

클릭한 위치 알아내기

마우스를 클릭한 위치를 알아내기 위해서는 click 이벤트를 사용할 수 있습니다.

document.addEventListener('click', function(event) {
    var mouseX = event.pageX;
    var mouseY = event.pageY;
    
    console.log("클릭한 위치 X 좌표: " + mouseX);
    console.log("클릭한 위치 Y 좌표: " + mouseY);
});

위의 코드에서는 클릭 이벤트가 발생하면 이벤트 객체가 전달되며, 이벤트 객체의 pageX와 pageY 속성을 사용하여 클릭한 위치의 X 좌표와 Y 좌표를 알아냅니다.

마무리

BOM을 사용하여 브라우저의 마우스 좌표를 알아내는 방법을 알아보았습니다. 마우스 이벤트에 따라 원하는 동작을 수행하거나 사용자에게 알림을 보여주는 등 다양한 기능을 구현할 수 있습니다. BOM을 잘 활용하여 웹 애플리케이션을 보다 유저 친화적이고 인터랙티브하게 만들어보세요.

참고 자료:

• MouseEvent - MDN Web Docs
• Browser Object Model (BOM) - MDN Web Docs