[AS 3.0] ROLL_OVER/OUT 과 MOUSE_OVER/OUT 의 차이

오랜만에 하는 AS 3.0 관련 포스팅.
그간 너무 게을러져있었다. 반성...

각설하고.
어렵지는 않지만 많이 헷갈리는 부분이다.
인스턴스에 마우스가 올라가면 이벤트가 튄다.
그러면 그 튀는 이벤트를 잡아다가 이벤트 핸들러로 싹싹 돌려준다.

그런데 튀는 이벤트의 종류가 두 가지이다.
MouseEvent.ROLL_OVER/OUT 과 MouseEvent.MOUSE_OVER/OUT.
그 둘의 차이점은 뭘까?

package { import flash.display.MovieClip; import flash.display.Sprite; import flash.events.MouseEvent; public class MouseOverRollOver extends MovieClip { public function MouseOverRollOver() { var sprite1:Sprite = new Sprite(); var sprite2:Sprite = new Sprite(); var sprite3:Sprite = new Sprite(); var sprite4:Sprite = new Sprite(); sprite1.addEventListener(MouseEvent.ROLL_OVER, rollOverEventHandler); sprite2.addEventListener(MouseEvent.ROLL_OVER, rollOverEventHandler); sprite1.addEventListener(MouseEvent.ROLL_OUT, rollOutEventHandler); sprite2.addEventListener(MouseEvent.ROLL_OUT, rollOutEventHandler); sprite3.addEventListener(MouseEvent.MOUSE_OVER, mouseOverEventHandler); sprite4.addEventListener(MouseEvent.MOUSE_OVER, mouseOverEventHandler); sprite3.addEventListener(MouseEvent.MOUSE_OUT, mouseOutEventHandler); sprite4.addEventListener(MouseEvent.MOUSE_OUT, mouseOutEventHandler); drawSquare(sprite1, 100, 0xFF0000, 0, 0); drawSquare(sprite2, 50, 0x0000FF, 25, 25); drawSquare(sprite3, 100, 0xFF0000, 150, 0); drawSquare(sprite4, 50, 0x0000FF, 175, 25); this.addChild(sprite1); sprite1.addChild(sprite2); this.addChild(sprite3); sprite3.addChild(sprite4); sprite1.name = "왼쪽 빨간 큰 네모"; sprite2.name = "왼쪽 파란 작은 네모"; sprite3.name = "오른쪽 빨간 큰 네모"; sprite4.name = "오른쪽 파란 작은 네모"; } private function drawSquare(target:Sprite, size:int, color:uint, x:int = 0, y:int = 0):void { target.graphics.beginFill(color); target.graphics.drawRect(x, y, size, size); target.graphics.endFill(); } private function rollOverEventHandler(event:MouseEvent):void { trace(event.target.name + " roll over."); } private function rollOutEventHandler(event:MouseEvent):void { trace(event.target.name + " roll out."); } private function mouseOverEventHandler(event:MouseEvent):void { trace(event.target.name + " mouse over."); } private function mouseOutEventHandler(event:MouseEvent):void { trace(event.target.name + " mouse out."); } } }

텍스트필드를 놓고 보려했지만 귀찮아서... (요즘 쓸데없이 겉멋들어서 라이브러리를 비우고 액션으로만 하려고 하고있음)

붉은 네모 안에 파란 네모를 addChild했다. 그리고 addChild하면 instance name이 바뀌는 관계로 다시 instance name을 설정해준다.
그리고 왼쪽 그룹에는 MouseEvent.ROLL_XXX 이벤트리스너를 등록하고 오른쪽 그룹에는 MouseEvent.MOUSE_XXX 이벤트 리스너 등록.
이제 테스트 고고싱.

왼쪽 그룹의 밖에서 중앙으로 갔다가 다시 밖으로 나오면 output 창에 다음과 같이 찍힌다.

왼쪽 빨간 큰 네모 roll over.
왼쪽 파란 작은 네모 roll over.
왼쪽 파란 작은 네모 roll out.
왼쪽 빨간 큰 네모 roll out.

오른쪽 그룹의 밖에서 중앙으로 갔다가 다시 밖으로 나오면 output 창에 다음과 같이 찍힌다.

오른쪽 빨간 큰 네모 mouse over.
오른쪽 빨간 큰 네모 mouse out.
오른쪽 파란 작은 네모 mouse over.
오른쪽 파란 작은 네모 mouse over.
오른쪽 파란 작은 네모 mouse out.
오른쪽 파란 작은 네모 mouse out.
오른쪽 빨간 큰 네모 mouse over.
오른쪽 빨간 큰 네모 mouse out.

한 줄 요약 들어가면...
- rollover/out은 통으로 생각하고 mouseover/out은 당장 마우스 아래있는 인스턴스만 생각한다.


* 태클 환영합니다. 칭찬 환영합니다. 격려 환영합니다. 그냥 리플은 다 환영합니다. 단, 악플은 사양합니다.