AIR에서 HTML 관련 이벤트 처리

Adobe AIR 1.0 이상

HTMLLoader 이벤트
ActionScript를 사용한 DOM 이벤트 처리
catch되지 않은 JavaScript 예외에 대한 응답
JavaScript에서 런타임 이벤트 처리
- 이벤트 핸들러 함수 만들기

이벤트 처리 시스템을 사용하면 프로그래머가 편리한 방식으로 사용자 입력 및 시스템 이벤트에 응답할 수 있습니다. Adobe® AIR® 이벤트 모델은 편리할 뿐만 아니라 표준과 호환됩니다. 이벤트 모델은 산업 표준 이벤트 처리 아키텍처인 DOM(Document Object Model) 레벨 3 이벤트 사양을 기초로 프로그래머를 위해 강력하고 직관적인 이벤트 처리 도구를 제공합니다.

HTMLLoader 이벤트

HTMLLoader 객체는 다음 Adobe® ActionScript® 3.0 이벤트를 전달합니다.

이벤트	설명
`htmlDOMInitialize`	스크립트가 파싱되기 전이나 페이지에 DOM 노드가 추가되기 전에 HTML 문서가 생성될 때 전달됩니다.
`complete`	HTML 페이지의 `onload` 이벤트 직후 로드 작업에 대한 응답으로 HTML DOM이 생성되었을 때 전달됩니다.
`htmlBoundsChanged`	`contentWidth` 및 `contentHeight` 속성 중 하나 또는 둘 다 변경된 경우 전달됩니다.
`locationChange`	HTMLLoader의 location 속성이 변경되었을 때 전달됩니다.
`locationChanging`	사용자 탐색, JavaScript 호출 또는 리디렉션으로 인해 HTMLLoader의 위치가 변경되기 전에 전달됩니다. `load()` , `loadString()` , `reload()` , `historyGo()` , `historyForward()` 또는 `historyBack()` 메서드를 호출하는 경우에는 `locationChanging` 이벤트가 전달되지 않습니다. 전달된 이벤트 객체의 `preventDefault()` 메서드를 호출하면 탐색이 취소됩니다. 링크가 시스템 브라우저에서 열려 있으면 HTMLLoader가 위치를 변경하지 않기 때문에 locationChanging 이벤트가 전달되지 않습니다.
`scroll`	HTML 엔진이 스크롤 위치를 변경할 때 언제든지 전달됩니다. Scroll 이벤트는 페이지의 앵커 링크( `#` 링크)로의 이동이나 `window.scrollTo()` 메서드에 대한 호출로 발생할 수 있습니다. 텍스트 입력이나 텍스트 영역에 텍스트를 입력해도 scroll 이벤트가 발생할 수 있습니다.
`uncaughtScriptException`	HTMLLoader에서 JavaScript 예외가 발생하였는데 해당 예외가 JavaScript 코드에서 catch되지 않은 경우 전달됩니다.

JavaScript 이벤트에 대한 ActionScript 함수(예: onClick )를 등록할 수도 있습니다. 자세한 내용은 ActionScript를 사용한 DOM 이벤트 처리 를 참조하십시오.

ActionScript를 사용한 DOM 이벤트 처리

ActionScript 함수를 등록하여 JavaScript 이벤트에 응답할 수 있습니다. 예를 들어, 다음과 같은 HTML 내용을 가정합니다.

<html> 
<body> 
    <a href="#" id="testLink">Click me.</a> 
</html>

페이지의 모든 이벤트에 대한 핸들러로서 ActionScript 함수를 등록할 수 있습니다. 예를 들어, 다음 코드는 HTML 페이지에 있는 testLink 요소의 onclick 이벤트에 대한 수신기로서 clickHandler() 함수를 추가합니다.

var html:HTMLLoader = new HTMLLoader( ); 
var urlReq:URLRequest = new URLRequest("test.html"); 
html.load(urlReq); 
html.addEventListener(Event.COMPLETE, completeHandler); 
 
function completeHandler(event:Event):void { 
    html.window.document.getElementById("testLink").onclick = clickHandler; 
} 
 
function clickHandler( event:Object ):void { 
    trace("Event of type: " + event.type ); 
}

전달된 이벤트 객체가 flash.events.Event 유형이나 Event 하위 클래스 중 하나가 아닙니다. Object 클래스를 사용하여 이벤트 핸들러 함수 인수의 유형을 선언하십시오.

addEventListener() 메서드를 사용하여 이러한 이벤트에 대해 등록할 수도 있습니다. 예를 들어, 이전 예제의 completeHandler() 메서드를 다음 코드로 바꿀 수 있습니다.

function completeHandler(event:Event):void { 
    var testLink:Object = html.window.document.getElementById("testLink"); 
    testLink.addEventListener("click", clickHandler); 
}

수신기가 특정 DOM 요소를 참조하는 경우 이벤트 수신기를 추가하기 전에 HTMLLoader가 complete 이벤트를 전달하기를 대기하는 것이 좋습니다. HTML 페이지는 여러 파일을 로드하는 경우가 많으며 모든 파일이 로드되어 파싱되어야 HTML DOM이 완전히 만들어집니다. HTMLLoader는 모든 요소가 만들어졌을 때 complete 이벤트를 전달합니다.

catch되지 않은 JavaScript 예외에 대한 응답

다음과 같은 HTML을 가정합니다.

<html> 
<head> 
    <script> 
        function throwError() { 
            var x = 400 * melbaToast; 
        } 
    </script> 
</head> 
<body> 
    <a href="#" onclick="throwError()">Click me.</a> 
</html>

알 수 없는 변수인 melbaToast 를 참조하는 JavaScript 함수인 throwError() 가 포함되어 있습니다.

var x = 400 * melbaToast;

JavaScript 작업에서 try / catch 구조를 사용하여 JavaScript 코드에서 catch하지 않은 잘못된 작업을 만나면 해당 페이지가 포함된 HTMLLoader 객체가 HTMLUncaughtScriptExceptionEvent 이벤트를 전달합니다. 다음 코드와 같이 이 이벤트에 대한 핸들러를 등록할 수 있습니다.

var html:HTMLLoader = new HTMLLoader(); 
var urlReq:URLRequest = new URLRequest("test.html"); 
html.load(urlReq); 
html.width = container.width; 
html.height = container.height; 
container.addChild(html); 
html.addEventListener(HTMLUncaughtScriptExceptionEvent.UNCAUGHT_SCRIPT_EXCEPTION, 
                           htmlErrorHandler); 
function htmlErrorHandler(event:HTMLUncaughtJavaScriptExceptionEvent):void  
{ 
    event.preventDefault(); 
    trace("exceptionValue:", event.exceptionValue) 
    for (var i:int = 0; i < event.stackTrace.length; i++) 
    { 
        trace("sourceURL:", event.stackTrace[i].sourceURL); 
        trace("line:", event.stackTrace[i].line); 
        trace("function:", event.stackTrace[i].functionName); 
    } 
}

JavaScript 내에서 window.htmlLoader 속성을 사용하여 같은 이벤트를 처리할 수 있습니다.

<html> 
<head> 
<script language="javascript" type="text/javascript" src="AIRAliases.js"></script> 
 
    <script> 
        function throwError() { 
            var x = 400 * melbaToast; 
        } 
         
        function htmlErrorHandler(event) { 
            event.preventDefault(); 
            var message = "exceptionValue:" + event.exceptionValue + "\n"; 
            for (var i = 0; i < event.stackTrace.length; i++){ 
                message += "sourceURL:" + event.stackTrace[i].sourceURL +"\n"; 
                message += "line:" + event.stackTrace[i].line +"\n"; 
                message += "function:" + event.stackTrace[i].functionName + "\n"; 
            } 
            alert(message); 
        } 
         
        window.htmlLoader.addEventListener("uncaughtScriptException", htmlErrorHandler); 
    </script> 
</head> 
<body> 
    <a href="#" onclick="throwError()">Click me.</a> 
</html>

htmlErrorHandler() 이벤트 핸들러는 JavaScript 오류 메시지를 AIR 추적 출력으로 보내는 이벤트의 기본 비헤이비어를 취소하고 고유한 출력 메시지를 생성합니다. HTMLUncaughtScriptExceptionEvent 객체의 exceptionValue 값을 출력합니다. 그리고 stackTrace 배열에 있는 각 객체의 속성을 출력합니다.

exceptionValue: ReferenceError: Can't find variable: melbaToast 
sourceURL: app:/test.html 
line: 5 
function: throwError 
sourceURL: app:/test.html 
line: 10 
function: onclick

JavaScript에서 런타임 이벤트 처리

런타임 클래스는 addEventListener() 메서드를 사용한 이벤트 핸들러 추가를 지원합니다. 한 이벤트에 대한 핸들러 함수를 추가하려면 이벤트를 전달하는 객체의 addEventListener() 메서드를 호출하며 이벤트 유형과 처리 함수를 제공합니다. 예를 들어, 사용자가 제목 표시줄에서 윈도우 닫기 버튼을 클릭할 때 전달되는 closing 이벤트를 수신하려면 다음 문을 사용합니다.

window.nativeWindow.addEventListener(air.NativeWindow.CLOSING, handleWindowClosing);

이벤트 핸들러 함수 만들기

다음 코드에서는 기본 윈도우의 위치에 대한 정보를 표시하는 간단한 HTML 파일을 만듭니다. moveHandler() 라는 핸들러 함수는 기본 윈도우의 NativeWindowBoundsEvent 클래스에서 정의한 move 이벤트를 수신합니다.

<html> 
    <script src="AIRAliases.js" /> 
    <script> 
        function init() { 
            writeValues(); 
            window.nativeWindow.addEventListener(air.NativeWindowBoundsEvent.MOVE, 
                                                     moveHandler); 
        } 
        function writeValues() { 
            document.getElementById("xText").value = window.nativeWindow.x; 
            document.getElementById("yText").value = window.nativeWindow.y; 
        } 
        function moveHandler(event) { 
            air.trace(event.type); // move 
            writeValues(); 
        } 
    </script> 
    <body onload="init()" /> 
        <table> 
            <tr> 
                <td>Window X:</td> 
                <td><textarea id="xText"></textarea></td> 
            </tr> 
            <tr> 
                <td>Window Y:</td> 
                <td><textarea id="yText"></textarea></td> 
            </tr> 
        </table> 
    </body> 
</html>

사용자가 윈도우를 이동할 때 textarea 요소는 윈도우의 업데이트된 X 및 Y 위치를 표시합니다.

이벤트 객체는 moveHandler() 메서드에 인수로 전달됩니다. 이벤트 매개 변수를 통해 핸들러 함수에서 이벤트 객체를 검토할 수 있습니다. 이 예제에서는 이벤트 객체의 type 속성을 사용하여 이벤트가 move 이벤트인지 확인합니다.

이벤트 리스너 제거

removeEventListener() 메서드를 사용하면 더 이상 필요하지 않은 이벤트 리스너를 제거할 수 있습니다. 더 이상 사용하지 않을 모든 리스너를 제거하는 것이 좋습니다. 이 메서드를 사용하는 경우에는 addEventListener() 메서드를 사용할 때와 마찬가지로 eventName 및 listener 매개 변수가 반드시 필요합니다.

탐색하는 HTML 페이지의 이벤트 리스너 제거

HTML 내용이 이동하거나 HTML 내용이 포함하는 윈도우가 닫히기 때문에 해당 내용이 버려지는 경우 언로드된 페이지의 객체를 참조하는 이벤트 리스너는 자동으로 제거되지 않습니다. 한 객체가 이미 언로드된 핸들러에 이벤트를 전달하는 경우 "응용 프로그램에서 더 이상 로드되지 않는 HTML 페이지의 JavaScript 객체를 참조하려고 시도했습니다."라는 오류 메시지가 표시됩니다.

이 오류를 피하려면 HTML 페이지가 없어지기 전에 해당 페이지에서 JavaScript 이벤트 리스너를 제거합니다. HTMLLoader 객체 내에서 페이지를 이동하는 경우 window 객체의 unload 이벤트 중에 이벤트 리스너를 제거합니다.

예를 들어, 다음 JavaScript 코드는 uncaughtScriptException 이벤트에 대한 이벤트 리스너를 제거합니다.

window.onunload = cleanup; 
window.htmlLoader.addEventListener('uncaughtScriptException', uncaughtScriptException); 
function cleanup() 
{ 
    window.htmlLoader.removeEventListener('uncaughtScriptException', 
                            uncaughtScriptExceptionHandler); 
}

HTML 내용이 포함된 윈도우를 닫을 때 오류가 발생하지 않게 하려면 NativeWindow 객체( window.nativeWindow )의 closing 이벤트에 대한 응답으로 cleanup 함수를 호출합니다. 예를 들어 다음 JavaScript 코드는 uncaughtScriptException 이벤트에 대한 이벤트 리스너를 제거합니다.

window.nativeWindow.addEventListener(air.Event.CLOSING, cleanup); 
function cleanup() 
{ 
    window.htmlLoader.removeEventListener('uncaughtScriptException', 
                            uncaughtScriptExceptionHandler); 
}

이벤트 리스너가 실행되는 즉시 제거함으로써 이 오류가 발생하는 것을 막을 수도 있습니다(이벤트를 한 번만 처리하면 되는 경우). 예를 들어, 다음 JavaScript 코드는 HTMLLoader 클래스의 createRootWindow() 메서드를 호출하여 html 윈도우를 만들고 complete 이벤트에 대한 이벤트 리스너를 추가합니다. complete 이벤트 리스너를 호출하면 removeEventListener() 함수를 사용하여 고유 이벤트 리스너를 제거합니다.

var html = runtime.flash.html.HTMLLoader.createRootWindow(true); 
html.addEventListener('complete', htmlCompleteListener); 
function htmlCompleteListener() 
{ 
    html.removeEventListener(complete, arguments.callee) 
    // handler code.. 
} 
html.load(new runtime.flash.net.URLRequest("second.html"));

사용되지 않는 이벤트 리스너를 제거하면 시스템 가비지 수집기에서 해당 리스너와 연결된 메모리를 모두 회수할 수 있습니다.

기존 이벤트 리스너 확인

hasEventListener() 메서드를 사용하여 객체의 이벤트 리스너에 대한 존재를 확인할 수 있습니다.