[jQuery기초] 요소조작_이벤트_mouseenter, mouseover, mouseleave, mouseout, mousemove

jQuery는 DOM 객체를 탐색, 접근하여 조작하는 여러가지 방법을 제공한다. 
실무에서 많이 사용하는 메서드 위주로 요약해서 작성하였으며 정확한 정보들을 확인하고 싶다면 jQuery 공식 사이트를 참조하면 된다.

mouseenter & mouseover 

마우스가 이벤트로 on 메서드를 통해 사용할 수도 있다. 
요소에 내부로 들어왔을 때 실행된다. 

차이점 
mouseenter 자식영역으로 이동했다고 재 감지되지 않는다. 
mouseover 자식영역으로 이동했을때 재 감지된다.

// HTML 
<div id="box"> 
	<div id="child"></div> 
</div> 

// jQuery 
// 마우스를 #box에서 #child로 이동해도 코드는 다시 실행되지 않음 
$('#box').mouseenter(function(){ 
	// 코드 작성 
}); 

// 마우스를 #box에서 #child로 이동 시 코드 다시 실행
$('#box').mouseover(function(){ 
	// 코드 작성 
}); 

 

mouseleave & mouseout 

마우스가 이벤트로 on 메서드를 통해 사용할 수도 있다. 
요소에 내부로 들어왔을 때 실행된다. 
차이점 
mouseleave 자식영역에 들어가도 요소를 빠져나갔다고 감지하지 않는다. 
mouseout 자식영역에 들어가면 요소를 빠져나갔다고 감지한다.

// HTML 
<div id="box"> 
	<div id="child"></div> 
</div> 

// jQuery 
// 마우스를 #box에서 #child로 이동해도 코드는 다시 실행되지 않음 
$('#box').mouseleave(function(){ 
	// 코드 작성 
}); 

// 마우스를 #box에서 #child로 이동 시 코드 다시 실행
$('#box').mouseout(function(){ 
	// 코드 작성 
}); 

 

mousemove

마우스가 이벤트로 on 메서드를 통해 사용할 수도 있다. 
요소에 내부에서 이동할 때 실행된다.

$('#box').mousemove(function(){ 
	// 코드 작성 
});