jQuery 이벤트 - Mouse 이벤트

jQuery

제이쿼리에서 제공하는 다양한 기능들을 이벤트라고 함.

$("h1").click(function() {...});
$("h1").fadeIn(function() {...});
$("h1").slideDown(function() {...});

위에서 click, fadeIn, slideDown 같은 것들이 이벤트. 자바스크립트의 객체.메소드 형태랑 유사해. click 같은 경우는 h1 태그를 클릭했을 때, function 안에 있는 코드를 실행시키겠다는 거고, fadeIn은 말 그대로 h1 태그에 fadeIn 효과를 주겠다는 거, slideDown도 이벤트 효과를 적용시키겠다는 거.

 

Mouse 이벤트

제이쿼리에는 다양한 마우스 이벤트가 있음.

$("h1").mouseenter(function(){
 // 대상에 마우스 올릴 때 수행할 기능
}); 
$("h1").mouseleave(function(){
 // 대상에 마우스를 뗄 때 수행할 기능
});  
$("h1").click(function(){
 // 대상을 클릭할 때 수행할 기능
});  

 

<h1>에 마우스를 올렸을 때, 배경색이 노란색이 되도록 설정해보면

$("h1").mouseenter(function() {
  $("h1").css("background-color", "yellow");
});

<h1>에 마우스를 뗄 때, 배경색이 분홍색이 되도록 설정해보면

$("h1").mouseleave(function() {
  $("h1").css("background-color", "pink");
});

<h1>에 마우스를 클릭했을 때, 배경색이 회색이 되도록 설정해보면

$("h1").click(function() {
  $("h1").css("background-color", "gray");
});

 

 

더 많은 제이쿼리 마우스 이벤트들은 아래 링크에서 확인.

https://api.jquery.com/category/events/mouse-events/

Mouse Events | jQuery API Documentation