[jQuery] 실행 시점 제어하기

이벤트를 발생시킬 때 jQuery를 어떻게 이용할까요?

 

1. mouseover : 마우스가 올라왔을 경우 

 

이벤트를 등록하는 메서드는 on()와 bind()가 존재합니다.

하지만 이제 bind는 deprecated 되었습니다. 따라서 이벤트의 시작은 on(). 종료는 off() 메서드를 사용합니다.

 

 

기초적인 event 문법.

$('선택자').on('이벤트종류' function(){
할일을 작성하는 코드블럭
})

 

이제 문법에 기초해서 코드를 작성해봅니다.

$(function(){


    $('h1').css({
       color : 'red',
       textDecoration : 'underline',
       borderBottom:'5px solid red',
       transform :'rotate(45deg)',
       opacity : 0.5
    })

    $('h1').on('mouseover', function(){

        $('h1').css({color : 'blue'});
    });
});

확인해보죠

그런데 마우스가 나왔을 때도 색이 그대로입니다. 

다시 red색으로 변경되기 위해서 우리는 mouseout이벤트를 등록해주어야 합니다.

 

$(function(){


    $('h1').css({
       color : 'red',
       textDecoration : 'underline',
       borderBottom:'5px solid red',
       transform :'rotate(45deg)',
       opacity : 0.5
    })

    $('h1').on('mouseover', function(){

        $('h1').css({color : 'blue'});
    });

     $('h1').on('mouseout', function(){

            $('h1').css({color : 'red'});
        });
});

 

이제 잘되고 있는데 뭔가 반복되는 코드 같다는 느낌이 듭니다. 분명 반복되는 코드는 줄일 수 있는 방법이 존재합니다.

 

체인 메서드를 사용합니다. 끊지 않고 이어서 사용합니다. 즉 세미콜론을 삭제합니다.

 

$(function(){


    $('h1').css({
       color : 'red',
       textDecoration : 'underline',
       borderBottom:'5px solid red',
       transform :'rotate(45deg)',
       opacity : 0.5
    })

    $('h1').on('mouseover', function(){

        $('h1').css({color : 'blue'});
    }).on('mouseout', function(){

            $('h1').css({color : 'red'});
        });
});

on이라는 메서드에 또 on메서드를 연결했습니다.  이제 1단계를 줄였습니다.

한번 더 줄여 볼까요?

$(function(){


    $('h1').css({
       color : 'red',
       textDecoration : 'underline',
       borderBottom:'5px solid red',
       transform :'rotate(45deg)',
       opacity : 0.5
    })

    $('h1').mouseover(function(){

        $('h1').css({color : 'blue'});

    })
    .mouseout (function(){

            $('h1').css({color : 'red'});
        });
});

이제 on메서드를 삭제하고 바로 이벤트를  dot (.)을 이용해 바로 연결해줍니다.

또 이벤트가 일어난 target을 지정하는 this라는 키워드가 존재합니다.

 

this라는 키워드와 직접 태그명을 작성한 경우의 차이는 브라우저의 성능 차이일 수 있습니다.

우리는 분명 $('h1')에게 mouseover이벤트를 주었으며 그 안의 코드 블록에

$('h1')의 css를 변경하도록 작성했지만 컴퓨터는 h1을 찾는 행위를 2번 하게 됩니다.

만약 this키워드를 한경우 브라우저는 이벤트를 받는 h1태그를 바로 찾을 수 있게 됩니다.

$(function(){


    $('h1').css({
       color : 'red',
       textDecoration : 'underline',
       borderBottom:'5px solid red',
       transform :'rotate(45deg)',
       opacity : 0.5
    })

    $('h1').mouseover(function(){

        $(this).css({color : 'blue'});

    })
    .mouseout(function(){

            $(this).css({color : 'red'});
        });
});