[JQuery] Jquery(제이쿼리) 마우스 이벤트 처리

< 마우스 이벤트 >

 

- 해당 객체에 대한 마우스 이벤트로 여러가지 변화를 줄 수 있다.

- 클릭 이벤트, 마우스 오버 / 아웃에 대한 이벤트를 보여주겠다.

 

 

① 클릭 이벤트

 

- 객체.click()

 

- 버튼을 클릭했을 때 alert창이 뜨게 할 수 있다. (버튼 아닌 다른 요소여도 됨)

 

$('input').click(function(){
  alert("버튼클릭 - JQ(Click)");
});

<input type="button" value="버튼" onclick="alert('버튼클릭! - js');">

 

 

- 요소를 클릭했을 때 옆에 '+' 기호 추가하기

 

$('h2').click(function(){
  $(this).append("+");
});

$(this).html(function(index,html){
  return html+"+";
});

 

  · 위 2가지 방법 모두 가능

  · 내가 클릭한 것만 인식하기 위해선 'this' 사용해줘야함

 

② 마우스 오버/아웃 이벤트

 

- 객체.mouseover()

- 객체.mouseout()

 

- 마우스 올렸을 때 배경색 변경하기

 

$('h2').mouseover(function(){
  $(this).css('background','pink');
});
			
$('h2').mouseout(function(){
  $(this).css('background','white');
});

$('h2')
.mouseover(function(){
  $(this).css('background','pink');
})
.mouseout(function(){
  $(this).css('background','white');
});

$('h2').bind({
  mouseover: function(){
    $(this).css('background','pink');
  },
  mouseout: function(){
    $(this).css('background','white');
  }
});

 

   · 위 3가지 방법 모두 가능

   · 마우스 올렸을 때 분홍색, 마우스 치웠을 때 다시 하얀색

   · 두 번째 방법은 체이닝 기법으로 . 을 이용하여 한 줄로 표현