mouseenter, mouseleave event

by Bathory

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

event :

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

event :

Code

<br />
function addEvent(element, type, callback) {<br />
	var eventListener = function(element, event) {<br />
		element.addEventListener(event, function(e) {<br />
			var obj = e.relatedTarget;<br />
			while (obj != element) {<br />
				if (!obj) return callback.apply(this);<br />
				obj = obj.parentNode;<br />
			}<br />
			return false;<br />
		}, false);<br />
	};</p>
<p>	if (element.addEventListener) {<br />
		switch(type) {<br />
			case 'mouseleave': eventListener(element, 'mouseout');<br />
				break;<br />
			case 'mouseenter': eventListener(element, 'mouseover');<br />
				break;<br />
			default : element.addEventListener(type, callback, false);<br />
				break;<br />
		}<br />
	} else if (element.attachEvent) {<br />
		element.attachEvent('on' + type, function() {<br />
			callback.apply(element);<br />
		});<br />
	}<br />
}<br />

사용 방법

mouseenter

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

mouseleave

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

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

Comments


Menu