jQuery mouseover 이벤트 - 마우스 커서를 올리면 인식하기

 

 웹 프런트 단을 개발하다 보면 가장 흔하게 사용하는 자바스크립트 이벤트는 아마 mouseover 이벤트일 것이다. 해당 이벤트는 마우스 커서를 이벤트가 바인딩된 태그(엘리먼트) 올려두면 트리거 되는 방식이다. 이는 클릭 이벤트와는 다른 형태이다.

 

 

HTML 소스

<div id="testId">
    마우스 올려보삼.
</div>

 

jQuery 소스

$(document).ready(function () {
    $("#testId").mouseover( function () {
        alert("뿌잉 뿌잉");
    });
});

 

 

위 소스를 보면 '요기 마우스 올려보삼.' 이라는 문구가 페이지에 노출될 것인데,

여기에 마우스 커서를 올려 두면 '뿌잉 뿌잉' 이라는 문구의 알럿이 뜬다.

 

 

또 다른 방법으로는 아래와 같이 구현할 수 있다.

결과는 당연히 동일~!

$(document).ready(function() {
    $("#testId").on( "mouseover", function () {
        alert("뿌잉 뿌잉");
    });
});

 

 

흔히 실무에서는 애니메이션을 추가하거나 스크롤 버튼,

옵션 선택 창 레이어를 열 때 등등 흔히 사용되는 이벤트이다.

 

끝! ㅋ

 

 

마지막으로 jQuery API 문서 공유하겠습니다.

 

api.jquery.com/mouseover