mouseover, mouseout event는 마우스가 객체 위에 놓여졌을 때, 영역을 벗어낫을때 발생하는 event입니다.
허나 이 event들은 객체에서 자식요소로 마우스를 이동해도 event가 발생하는 문제가 있습니다.
아래의 예제처럼요.
이런 문제를 회피하기 위해서 IE에서는 mouseenter, mouseleave 두 event가 존재합니다만, IE에서 밖에 실행이 되질 않아서 스크립트를 작성하는데 문제가 많더군요.
jQuery.js, prototype.js같은 JavaScript Framework을 쓰면 좋겠지만 제 특성상 Framework을 못쓰는 경우가 많아서 ppk(책)에 있는 내용을 참조해서 만들어봤습니다.
Code
[js]
function addEvent(element, type, callback) {
var eventListener = function(element, event) {
element.addEventListener(event, function(e) {
var obj = e.relatedTarget;
while (obj != element) {
if (!obj) return callback.apply(this);
obj = obj.parentNode;
}
return false;
}, false);
};
if (element.addEventListener) {
switch(type) {
case ‘mouseleave’: eventListener(element, ‘mouseout’);
break;
case ‘mouseenter’: eventListener(element, ‘mouseover’);
break;
default : element.addEventListener(type, callback, false);
break;
}
} else if (element.attachEvent) {
element.attachEvent(‘on’ + type, function() {
callback.apply(element);
});
}
}
[/js]
사용 방법
mouseenter
[js]
//일반적인 사용법
object.onmouseenter = function() {
alert(‘mouseenter’);
};
//addEvent를 이용한 방법
addEvent(object, ‘mouseenter’, function() {
alert(‘mouseenter’);
});
[/js]
mouseleave
[js]
//일반적인 사용법
object.onmouseleave = function() {
alert(‘mouseleave’);
};
//addEvent를 이용한 방법
addEvent(object, ‘mouseleave’, function() {
alert(‘mouseleave’);
});
[/js]
실력이 많이 부족하다 보니 좋은방법인지까지는 모르겠습니다.
더 좋은 방법을 아시거나 버그를 발견하신분은 꼭 알려주세요~