[JQuery] mouseover 가 내부 태그에 겹치면 mouseenter

mouseover / mouseenter

mouseover : 이벤트 버블링이 적용되서 내부의 태그에 들어가더라도 이벤트를 발생시킵니다.

mouseenter : 태그의 내부에 있는지 외부에 있는지만 판단합니다.

아래를 통해 결과를 확인해 봅시다.

두 예제는 mouseover / mouseenter 만 다르고 동일한 코드입니다. 그리고 대체로 의도하는 바가 mouseenter 인 경우가 많습니다.

mouseover 이벤트 예제

id : DIV01

DIV

$(document).on('mouseover', '#DIV01', function(){
    if($('#DIV01').css('background-color') == 'rgb(255, 36, 36)') {
        $('#DIV01').css('background', '#FFFFFF');
    }else {
        $('#DIV01').css('background', '#FF2424');        
    }
});

mouseenter 이벤트 예제

id : DIV02

DIV

$(document).on('mouseenter', '#DIV01', function(){
    if($('#DIV01').css('background-color') == 'rgb(255, 36, 36)') {
        $('#DIV01').css('background', '#FFFFFF');
    }else {
        $('#DIV01').css('background', '#FF2424');        
    }
});