웹 개발에서 브라우저 별로 다르게 동작하는 부분을 처리해야 할 때가 종종 있습니다. 마우스 이벤트 처리 역시도 각 브라우저에서 제공하는 API를 활용하여 구현할 수 있습니다. 이번 포스트에서는 BOM(Browser Object Model)을 활용하여 브라우저 별 마우스 이벤트 처리를 간단히 알아보겠습니다.

마우스 이벤트 처리

마우스 이벤트는 주로 웹 페이지에서 사용자의 상호작용을 감지하기 위해 사용됩니다. 대표적인 마우스 이벤트는 다음과 같습니다.

• click: 클릭이벤트는 사용자가 요소를 클릭할 때 발생합니다.
• mouseover, mouseout: 마우스가 요소 위에 올라갔을 때(mouseover)와 요소를 벗어날 때(mouseout) 발생합니다.
• mousedown, mouseup: 마우스 버튼을 누를 때(mousedown)와 눌렀던 버튼을 놓을 때(mouseup) 발생합니다.
• mousemove: 마우스가 요소 위에서 움직일 때 발생합니다.

BOM을 활용한 브라우저 별 마우스 이벤트 처리

가장 많이 사용되는 브라우저인 Chrome, Firefox, Internet Explorer에서 마우스 이벤트 처리를 위해 BOM을 활용하는 방법을 알아보겠습니다.

// Chrome
if (navigator.userAgent.indexOf('Chrome') !== -1) {
    // Chrome에서의 마우스 이벤트 처리 코드
}

// Firefox
else if (navigator.userAgent.indexOf('Firefox') !== -1) {
    // Firefox에서의 마우스 이벤트 처리 코드
}

// Internet Explorer
else if (navigator.userAgent.indexOf('Trident') !== -1) {
    // Internet Explorer에서의 마우스 이벤트 처리 코드
}

위 코드에서 navigator.userAgent를 통해 현재 사용 중인 브라우저를 판별하고, 그에 따라 해당 브라우저에서의 마우스 이벤트 처리 코드를 작성할 수 있습니다.

마치며

BOM을 활용하여 브라우저 별 마우스 이벤트 처리를 하는 방법을 간단히 살펴보았습니다. 개발 중인 웹 애플리케이션에서 특정 브라우저에서만 발생하는 이슈를 해결하기 위해 BOM을 잘 활용해보세요. 다양한 브라우저에서 동작하는 웹 페이지를 만들 수 있을 것입니다.

Reference: MDN Web Docs - Events

#TechBlog #JavaScript