mouseenter
원문 링크 
http://api.jquery.com/mouseenter/
개요 : 요소에 마우스가 진입했을 때의 이벤트를 바인딩 하거나 특정 요소에 이벤트를 발생시킵니다.
- .mouseenter( handler(eventObject) )
- mouseenter(eventObject) 이벤트가 발생했을 때 실행될 기능.
- .mouseenter( [eventData], handler(eventObject) )
- eventData 이벤트 핸들러에 전달할 데이터 집합.
- handler(eventObject) 이벤트가 발생했을 때 실행될 기능.
- .mouseenter( )
이 함수는 .bind('mouseenter', handler) 와 .trigger('mouseenter') 를 줄여 표현한 것입니다.
mouseenter 자바스크립트 이벤트는 Explorer전용 이벤트입니다. 이 이벤트의 일반적인 사용성 때문에 jQuery 에서는 브라우져를 고려하지 않고 작동이 되도록 구성하였습니다. 이 이벤트는 요소에 마우스 포인터가 진입하면 발생하게 됩니다. 어떤 HTML 요소라도 이 이벤트를 받을 수 있습니다.
예를들어:
<div id="outer">
Outer
<div id="inner">
Inner
</div>
</div>
<div id="other">
Trigger the handler
</div>
<div id="log"></div>
<div>에 이벤트를 바인딩 하려면 :
$('#outer').mouseenter(function() {
$('#log').append('<div>Handler for .mouseenter() called.</div>');
});자 마우스 포인터를 이동시켜 Outer <div>에 위치시키면, <div id="log">에 텍스트를 추가해 줍니다.
다른 요소를 클릭해서 이벤트를 발생시킬 수도 있습니다.
$('#other').click(function() {
$('#outer').mouseenter();
});위 코드를 추가하고 실행시키면 위와 같은 결과를 볼 수 있습니다.
mouseenter 이벤트는 mouseover 이벤트와 이벤트 버블링의 관점에서 조금 다릅니다. 만약 위 예에서 mouseover 를 사용했다면, 마우스 포인터가 Inner 요소 위에 올라와도 이벤트가 발생하게 됩니다만 일반적으로 좋은 방법이 아닙니다. 반면 mouseenter 이벤트는, 바인딩 된 요소에 마우스 포인터가 진입해야만 발생하고 자식 요소에는 이벤트가 발생하지 않습니다. 그래서 이 예제에서는 마우스가 Outer 요소에 진입해야만 이벤트가 발생하고, Inner 요소에서는 발생하지 않는 것입니다.
이해가 되십니까? 간단한 내용인데 말로 풀어 쓰니까 어려운 것 같습니다. 한마디로 요약하면 mouseenter는 이벤트가 묶인 요소 자체에서만 발생된다는 것입니다. 아래 예제를 유심히 보시면 이해되실 겁니다.
예 제
mouseover와 mouseenter의 차이점을 보여줍니다.
<!DOCTYPE html>
<html>
<head>
<style>
div.out {
width:40%;
height:120px;
margin:0 15px;
background-color:#D6EDFC;
float:left;
}
div.in {
width:60%;
height:60%;
background-color:#FFCC00;
margin:10px auto;
}
p {
line-height:1em;
margin:0;
padding:0;
}
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<div class="out overout"><p>move your mouse</p><div class="in overout">
<p>move your mouse</p><p>0</p></div><p>0</p></div>
<div class="out enterleave"><p>move your mouse</p><div class="in enterleave">
<p>move your mouse</p><p>0</p></div><p>0</p></div>
<script>
var i = 0;
$("div.overout").mouseover(function(){
$("p:first",this).text("mouse over");
$("p:last",this).text(++i);
}).mouseout(function(){
$("p:first",this).text("mouse out");
});
var n = 0;
$("div.enterleave").mouseenter(function(){
$("p:first",this).text("mouse enter");
$("p:last",this).text(++n);
}).mouseleave(function(){
$("p:first",this).text("mouse leave");
});
</script>
</body>
</html>미리보기
와 닿으시나요? 왼쪽이 mouseover, 오른쪽이 mouseenter인데요. mouseover는 직접 이벤트를 걸지않은 자식요소에 마우스 포인터가 와도 발생하지만 mouseenter는 오로지 자기 자신에게 마우스 포인터가 와야만 발생합니다. 차근히 해보시길 권장드립니다.
mouseenter와 mouseover를 잘 구분해서 사용하세요. 그런데 사실 이렇게 디테일하게 구분해서 사용할 일은 그리 많지는 않겠죠?
그럼 즐프하세요.
※ 본 예제는 http://www.jquery.com 에 있는 내용임을 밝힙니다.
'프로그래밍 > jQuery' 카테고리의 다른 글
| jQuery API - mouseover(), 마우스가 올라올 때 (3) | 2012.01.13 |
|---|---|
| jQuery API - mouseout(), 마우스가 떠날 때 (2) | 2012.01.13 |
| jQuery API - mousemove(), 마우스가 요소에서 움직일 때 (0) | 2012.01.13 |
| jQuery API - mouseleave(), 마우스가 요소에서 벗어날 때 (0) | 2012.01.13 |
| jQuery API, mousedown, 마우스 누름 이벤트 (0) | 2012.01.04 |
| jQuery API - load(), 로드되면 발생하는 이벤트 (0) | 2012.01.04 |
| jQuery API - live(), 이벤트 바인딩하기 (0) | 2011.12.26 |
| jQuery API 정복 - keyup(), 키를 눌렀다 뗄때 (0) | 2011.12.26 |