jQuery 1.5.1 버전이 나왔습니다. 오오!! 이건 뭔가 하고 테스트중인 사이트에 적용시켰습니다.
이런 -_-; 작동하지 않는 소스가 있더군요~ 럴수럴수!!!
전에 쓰던 1.4.4 버전에서는 잘 되다가 1.5.1 버전부터 문제가 생긴 듯 했습니다.
처음에는 jQuery 문제인 줄 몰라서 한참을 헤맸었죠~ 후훗
문제가 발생한 부분은 .hover() 를 이용한 부분이었습니다.
살펴보니 .hover() 를 이용해서 만든 이벤트에서 .trigger('mouseout')으로 작동시키는 부분이 문제더군요~
그래서 mouseout 이벤트에 대해서 좀 살펴봤습니다. .hover() 또한 살펴봤죠~ 엄청난 사실을 알아냈습니다. 전부터 그랬는데 못보고 지나친건지 원래 그랬는데 그동안 작동했던건지 알 순 없지만...
.hover() 는 'mouseover', 'mouseout' 을 합쳐놓은 것이 아니라 'mouseenter', 'mouseleave' 를 합쳐둔 것이었습니다.
그리고 분위기를 보아하니 이전 버전부터 그랬던 것 같더라구요~
그럼 왜 그동안은 잘 됐던거지? 란 의문이 들어서 테스트를 해 보았습니다.
테스트를 위한 코드는 아래와 같습니다. (jQuery 버전을 1.4.4와 1.5.1을 번갈아 가면서 테스트 했습니다.)
보시다시피 .trigger() 를 이용하여 mouseleave, mouseenter, mouseover, mouseout 을 차례로 호출합니다.
테스트 정보는 콘솔을 통해서 확인하죠~ (전 Firefox에서 Firebug로..)
<script language="javascript">
$(document).ready(function() {
$('#test')
.hover(
function() {
console.log('in');
},
function() {
console.log('out');
})
.mouseover(
function() {
console.log('mouseover');
})
.mouseenter(
function() {
console.log('mouseenter');
})
.mouseout(
function() {
console.log('mouseout');
})
.mouseleave(
function() {
console.log('mouseleave');
});
console.log('=====trigger:mouseenter=====');
$('#test').trigger('mouseenter');
console.log('=====trigger:mouseleave=====');
$('#test').trigger('mouseleave');
console.log('=====trigger:mouseout=====');
$('#test').trigger('mouseout');
console.log('=====trigger:mouseover=====');
$('#test').trigger('mouseover');
});
</script>
<div id="test" style="background-color:#345;">111</div>
jQuery 1.4.4
jQuery 1.5.1
위에 보시면! 'mouseenter' 와 'mouseleave'는 같은데, 'mouseout', 'mouseover' 부분은 다릅니다.
jQuery 1.4.4 버전까지는 'mouseout'을 호출하면 'mouseleave'가 호출이 되었던 것 같습니다. (반대는 아니구요~)
1.5.1 버전부터는 'mouseout'과 'mouseleave'는 확실히 구분이 된 듯 합니다~
.hover()에서 'mouseout'을 호출해도 작동했던 이유는 'mouseout'이 'mouseleave'를 호출해서 그랬던 것 같더군요~
1.5.1 버전에 맞도록 수정을 다 해야 겠습니다. 휴우~ 애초에 문서를 잘 읽어봤으면... 하는 후회가 생기는 부분이네요~ ㅋ
