jQuery 실행 시점 제어하기

jQuery 실행 시점 제어하기

자주 사용하는 실행 시점

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

mouseover / mouseout

예전에는 bind메서드 사용했지만 현재는 on메서드사용
(bind메서드는 jQuey3.0부터 deprecated됨 사용은되지만 추천되지 않음)

$('#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');
});

메서드체이닝

3. 체인메서드(메서드체인)
$('#typo').on('mouseover',function(){
     $('#typo').css('background-color','green');
})
.on('mouseout',function(){
      $('#typo').css('background-color','blue');
 });

on메서드 생략가능

4.

$('#typo').mouseover(function(){
    $('#typo').css('background-color','green');
})
.mouseout(function(){
   $('#typo').css('background-color','blue');
});

this:이벤트가 일어난 요소

아래와 같이 작성시 '#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');
});