[jQuery] 실행 시점 제어하기,메서드체인

자주 사용하는 실행 시점

• 특정 요소에 마우스 포인터를 올려놓은 시점
• 특정 요소에서 마우스 포인터가 벗어나는 시점
• 특정요소를 클릭하는 시점
• 마우스를 움직이는 시점
• 창 크기가 바뀌는 시점
• 스크롤 시점

 

keydown	요소에 초점을 맞춘 상태에서 키보드의 키를 눌렀을 때
keyup	요소에 초점을 맞춘 상태에서 키보드의 키를 뗄 때
focus	요소에 포커스가 일치했을 때(포커스가 있는 요소만)
blur	요소가 포커스를 잃어버렸을 때(포커스가 있는 요소만)
change	입력 내용이 변경되었을 때(textarea요소, input요소, select요소
resize	요소의 크기를 다시 설정했을 때
scroll	요소를 스크롤 했을 때

 

 

---

 

mouseover / mouseout

예전에는 bind메서드 사용했지만 현재는 on메서드사용

(bind메서드는 jQuey3.0부터 deprecated됨 사용은되지만 추천되지 않음)

출처 : https://api.jquery.com/bind/

$(function(){ //docuemnt(HTML)로드완료시

    //실행 시점 제어 - event종류 -mouseover 마우스가 올라왔을 때
    //on/off, 예전에는 bind메서드 사용했었음
    //$('#typo').on('이벤트 종류',할일)
    //할일=임의함수=function(){}

    // 1. typo에 마우스를 올렸을 때(mouseover)
    // $('#typo').on('mouseover',function(){
    //     $('#typo').css('background-color','green');
    // }); 
    
    // 2. typo에 마우스가 나갔을 때(mouseout)
    // $('#typo').on('mouseout',function(){
    //     $('#typo').css('background-color','blue');
    // });

    //위의 1번,2번코드를 아래와 같이 이어서 작성가능
    // 3. 체인메서드(메서드체인)
    // $('#typo').on('mouseover',function(){
    //     $('#typo').css('background-color','green');
    // })
    // .on('mouseout',function(){
    //     $('#typo').css('background-color','blue');
    // });

    // 3번을 아래와 같이 작성 가능
    // 4.
    // $('#typo').mouseover(function(){
    //     $('#typo').css('background-color','green');
    // })
    // .mouseout(function(){
    //     $('#typo').css('background-color','blue');
    // });


    //아래와 같이 작성시 '#typo,'h1' 둘 중 하나 영역에만 마우스를 갔다대도 같이 바뀜
    // $('#typo, h1').mouseover(function(){
    //     $('#typo, h1').css('background-color','green');
    // })
    // .mouseout(function(){
    //     $('#typo, h1').css('background-color','blue');
    // });

    //[CSS] h1:hover,#typo:hover {background-color:green;}
    //두 개 각각 hover이벤트를 부여하고 싶을 때 'this'사용
    //this:이벤트가 일어난 요소
    $('#typo, h1').mouseover(function(){
        $(this).css('background-color','green');
    })
    .mouseout(function(){
        $(this).css('background-color','blue');
    });
});

 

 

---

 

메서드 체인의 장점

• 함수를 한번만 작성해도 되므로 코드를 단순화
• 프로그램의 처리 속도 향상
• $()함수가 실행되면 웹브라우저는 지정된선택자를 기준으로 html에서 요소를 수집하고 처리하므로, 이 프로세스가 반복되면 CPU의 부하가 걸려 처리속도가 느려짐

 

 

 

 

 

 

 

출처 : www.youtube.com/watch?v=ILyEEkNluKk&list=PL-qMANrofLyu4HcK14ntl-o7d-eHxo7-U&index=3