jQuery 이벤트 문법 mouseenter,mouseleave,hover() ( 이름,리스터 or 객체 or 메소드 )

 

$(document).ready(function (){
    $('h1').on('mouseenter',function(){
        $(this).addClass('reverse');
    });
    $('h1').on('mouseleave',function(){
        $(this).removeClass('reverse');
    });
});

<h1> 태그 요소에 마우스를 올려놓았을때 'reverse' 클래스 속성을 추가하고,

다시 마우스를 요소로부터 떨어트리면 추가된 'reverse'클래스 속성을 제거한다.

 

이와 같은 문법을 한번에 객체형태로 만들 수 있다.

 

$(document).ready(function (){
    $('h1').on({
         mouseenter: function(){
        $(this).addClass('reverse');
        }
        , mouseleave: function(){
        $(this).removeClass('reverse');
        }
    });
});

다음과 같이 두개의 이벤트를 한번에 하나의 객체 형태로 넣어도 동일하게 동작한다.

 

처음 형태는 이벤트 이름을 첫번째 인자값으로, 리스너() {} 를 두번째 인자로 받았다.

두번째 형태는 이벤트 이름 : 리스너 () {} 의 형태로 구현한다.

 

이벤트가 실행되고 작동할 문장을 리스너의 {중괄호} 안에 작성한다.

 

다음은 hover 메소드로 조금 더 간단하게 동일한 이벤트 효과를 구현한다.

$(document).ready(function (){
    $('h1').hover(function(event){
        console.log(event);
        $(this).addClass('reverse');
    }, function (event){
        console.log(event);
        $(this).removeClass('reverse');
    })
});

hover 메소드는 두개의 매개변수 인자값으로 메소드를 받는다.

 

첫번째 인자값으로 mouseenter이벤트를 두번째 인자값으로 mouseleave이벤트를 각각 부여받는다.

 

각 메소드에 인자값으로 받은 event를 메소드 내부에서 console에 출력해보면 마우스를 올렸을때 console에 mouseenter이벤트에 대한 객체 내용이 찍힘과 동시에 this가 가리키는 현재의 h1 요소에는 'reverse' 클래스가 추가되고

마우스를 옮기면 console에 mouseleave이벤트에 대한 객체 내용이 찍힘과 동시에 추가되었던 'reverse' 클래스가 제거된다. 

 

다음은 이벤트 종류다.

blur , focus , focusin , focusout , load , resize , scroll , unload , click , dblclick , mousedown , mouseup , mousemove , mouseover , mouseout , mouseenter , mouseleave , change , select , submit , keydown , keypress , keyup , error , ready