mouseenter, mouseleave event

mouseover, mouseout event는 마우스가 객체 위에 놓여졌을 때, 영역을 벗어낫을때 발생하는 event입니다.
허나 이 event들은 객체에서 자식요소로 마우스를 이동해도 event가 발생하는 문제가 있습니다.
아래의 예제처럼요.

event :

이런 문제를 회피하기 위해서 IE에서는 mouseenter, mouseleave 두 event가 존재합니다만, IE에서 밖에 실행이 되질 않아서 스크립트를 작성하는데 문제가 많더군요.
jQuery.js, prototype.js같은 JavaScript Framework을 쓰면 좋겠지만 제 특성상 Framework을 못쓰는 경우가 많아서 ppk(책)에 있는 내용을 참조해서 만들어봤습니다.

event :

Code

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);
		});
	}
}

사용 방법

mouseenter

//일반적인 사용법
object.onmouseenter = function() {
	alert('mouseenter');
};
//addEvent를 이용한 방법
addEvent(object, 'mouseenter', function() {
	alert('mouseenter');
});

mouseleave

//일반적인 사용법
object.onmouseleave = function() {
	alert('mouseleave');
};
//addEvent를 이용한 방법
addEvent(object, 'mouseleave', function() {
	alert('mouseleave');
});

실력이 많이 부족하다 보니 좋은방법인지까지는 모르겠습니다.
더 좋은 방법을 아시거나 버그를 발견하신분은 꼭 알려주세요~

글쓴이

Bathory

안녕하세요.

댓글 남기기

이메일은 공개되지 않습니다. 필수 입력창은 * 로 표시되어 있습니다

This site uses Akismet to reduce spam. Learn how your comment data is processed.