마우스!~ 이벤트 탐색記 (2편)

이번에는 마우스 이벤트에 대한 두번째 강좌로 removeEventListener에 대한 부분을 탐색해 보자.

지난 번에는 addEventListener를 이용해서 오브젝트에 이벤트를 추가했는데 용어를 보면 addXXXXXXX라고 되어 있으니 추가하겠다 라는 의미로 받아들여 지듯이 removeXXXXXXX는 반대로 제거하겠다는 의미로 받아들일 수 있다.

즉, addEventListener는 오브젝트에 이벤트를 추가할 때 사용하고 removeEventListener는 이벤트를제거할 때 사용한다.

 

removeEventListener는 두개의 파라미터를 받는다. 첫번째 파라미터는 이벤트의 종류를 문자열 형태로 받고 두번째 파라미터는 삭제하고자 하는 핸들이다.

 

앗... 그럼 삭제하고자 하는 핸들을 어떻게 받아올 것인가가 문제인데.....

당연히 방법은 있다. addEventListener를 만들 때 생성되는 리턴값이 우리가 삭제할 때 사용하는 핸들이다.

 

지난 번 마우스 이벤트 강좌에서 사용했던 예제를 조금 수정해서 이러한 부분을 구현해 보자. 이번의 예제는 마우스를 클릭했을 때 좌표를 보여주는 기능을 제거하는 기능을 추가해 보도록 하겠다. (좌표를 보여주는 기능은 addEventListener에 추가한 이벤트로 구동되는 것이기 때문에 이 기능을 제거하면 좌표가 안보이는 것은 당연한 것..)

 

XAML은 아래와 같이 작성하고...

 

<Canvas xmlns="http://schemas.microsoft.com/client/2007"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Loaded="canvasLoaded”>
                <Rectangle Width="200" Height="75" Stroke="Orange" StrokeThickness="15" />
                <TextBlock FontFamily="Arial" FontSize="28" Canvas.Left="25" Canvas.Top="25"
                      Foreground="Black"
                      Text="X: ?? Y: ??” x:Name="MousePosition” />
</Canvas>

 

자바스크립트는 두개의 변수를 추가하도록 한다.
하나는 토글의 기능을 구현하기 위한 boolean형식의 변수이고 다른 하나는 삭제할 때 사용할 핸들값을 담아두기 위한 변수이다.

 

var traceMouse = false;
var handle;

 

function canvasLoaded(sender, eventArgs)
{
        var textblock = sender.findName('MousePosition');
        textblock.addEventListener(
               'MouseLeftButtonDown',
               toggle
        );
}

 

function toggle(sender, eventArgs)
{
        if(!traceMouse) {
                handle = sender.addEventListener(
                       'MouseMove',
                       function(sender, eventArgs)
                       {
                                var x = eventArgs.getPosition(null).x;
                                var y = eventArgs.getPosition(null).y;
                                sender.findName('MousePosition').text =
                                        'X : ' + x + '   Y: ' + y;
                        }
                );
        } else {
                sender.removeEventListener('MouseMove', handle);
        }
        // 토글의 기능을 변환시키기
        traceMouse = !traceMouse;
}

 

그리고 마지막으로 토글의 기능을 해제하고 설정하기 위한 코드를 추가하면 끝!!