웹개발 및 최신 테크 소식을 전하는 블로그, 웹이즈프리

HOME > vuejs

VueJS에서 마우스오버 이벤트 구현, mouseover

Last Modified : 2023-11-06 / Created : 2018-09-19
25,699
View Count
VueJS에는 다양한 마우스 이벤트를 구현할 수 있습니다. 대표적으로 클릭이나 마우스 오버 등이 있겠죠.



VueJS 마우스 오버(mousehover) 이벤트 구현하기


아래는 마우스를 특정 엘리먼트 위에 위치했을 때 발생하는 마우스 오버 이벤트(MouseOver)를 VueJS앱에서 구현하는 방법을 알아보려고 합니다.


마우스 오버는 마우스가 특정 요소의 위에 있을때 발생하는 이벤트입니다.

@ 그런데 언제 마우스 오버 이벤트가 필요할까?
마우스를 올렸을 때 다른 UI를 보여주기 위해서 해당 엘리먼트의 클래스를 변경하려는 경우에도 사용될 수 있겠습니다. 아니면 특정 엘리먼트에 마우스가 얼마나 위치시켰는지 A/B 테스트 등의 목적을 위한 로그 정보를 얻기 위해서도 필요할 수 있겠네요!


VueJS 마우스오버 예제보기


간단한 예제를 만들어보면 더 쉽게 이해됩니다. 아래는 VueJS에서 mouseover 이벤트의 구현하는 방법입니다. 버튼 위에 마우스를 위치시키면 모두 동일하게 함수 doMouseOver() 콜백함수를 호출합니다.

@ mouseover.vue
<button v-on="mouseover: doMouseOver">Click Me</button>
<button @mouseover="doMouseOver">Click Me</button>

methods: {
  doMouseOver: function() {
    console.log('MouserHover!')
  };
}

위에서 사용된 두 개의 button은 각각 v-on@mouseover를 사용하였습니다. 둘 다 동일하며 아래에 해당하는 버튼에서 @기호를 사용한 예제는 shorthand로 줄여서 사용되는 축약 이벤트입니다. 결과는 동일합니다. 콘솔창에 'MouseHover!' 메시지를 출력하게 됩니다.



[참고1] 화면 UI 변경이 목적이라면 CSS :hover가 더 나은 선택일 수도


만약 화면 스타일 변경이 목적인 경우라면 css의 pseudo 선택자인 :hover를 사용하는 방식이 더 선호될 수 있습니다. 스타일에 따른 화면 변경은 대부분 css를 사용하므로 일관성 측면에서 css를 사용하는 것이 좋겠고 css를 사용하는 방식이 더 쉽고 간단하기 때문입니다. 혼합사용 보다는 css 단독 사용이 나은 선택이겠죠.

마치면서

여기까지VueJS에서 마우스 오버 이벤트를 구현하는 방법을 알아보았습니다. mouseover 외에도 비슷한 mouseenter가 존재하는데 비슷하지만 조금 다릅니다. mouseenter의 경우 요소에 진입할때 한 번만 이벤트를 호출하는 것이 차이점이며 mouseover는 계속해서 발생시킵니다.

Previous

요즘 뜨는 VueJS 알아보기

Previous

[vuejs] v-if로 요소 보이거나 숨기는 방법