Verarbeiten HTML-bezogener Ereignisse in AIR

Adobe AIR 1.0 und höher

Ein Ereignis verarbeitendes System bietet Programmierern eine praktische Möglichkeit, auf Benutzereingaben und Systemereignisse zu reagieren. Das Adobe® AIR®-Ereignismodell ist nicht nur praktisch, sondern erfüllt auch relevante Standards. Basierend auf der Document Object Model (DOM) Level 3 Events Specification (eine Ereignis verarbeitende Architektur gemäß Branchenstandard), bietet das Ereignismodell Programmierern ein leistungsstarkes, intuitives Tool für die Ereignisverarbeitung.

HTMLLoader-Ereignisse

Ein HTMLLoader-Objekt löst die folgenden Adobe® ActionScript® 3.0-Ereignisse aus:

Ereignis

Beschreibung

htmlDOMInitialize

Wird ausgelöst, wenn das HTML-Dokument erstellt wird, aber bevor Skripts geparst oder DOM-Knoten zur Seite hinzugefügt werden.

complete

Wird ausgelöst, wenn das HTML-DOM als Reaktion auf einen Ladevorgang erstellt wurde, sofort nach dem onload-Ereignis in der HTML-Seite.

htmlBoundsChanged

Wird ausgelöst, wenn mindestens eine der Eigenschaften contentWidth und contentHeight geändert wurde.

locationChange

Wird ausgelöst, wenn die location-Eigenschaft des HTMLLoader geändert wurde.

scroll

Wird ausgelöst, wenn die HTML-Engine die Bildlaufposition ändert. Scroll-Ereignisse können wegen der Navigation zu Anker-Links (#-Links) auf der Seite oder aufgrund von Aufrufen der window.scrollTo()-Methode auftreten. Die Eingabe von Text in ein Texteingabefeld oder einen Textbereich kann ebenfalls ein scroll-Ereignis auslösen.

uncaughtScriptException

Wird ausgelöst, wenn eine JavaScript-Ausnahme im HTMLLoader auftritt und die Ausnahme im JavaScript-Code nicht abgefangen wird.

Sie können auch eine ActionScript-Funktion für ein JavaScript-Ereignis (zum Beispiel onClick) registrieren. Ausführliche Informationen finden Sie unter Verarbeiten von DOM-Ereignissen mit ActionScript.

Verarbeiten von DOM-Ereignissen mit ActionScript

Sie können ActionScript-Funktionen registrieren, um auf JavaScript-Ereignisse zu reagieren. Betrachten Sie zum Beispiel folgenden HTML-Inhalt:

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

Sie können eine ActionScript-Funktion als eine Prozedur für jedes beliebige Ereignis auf der Seite registrieren. Der folgende Code fügt zum Beispiel die clickHandler()-Funktion als Listener für das onclick-Ereignis des testLink-Elements auf der HTML-Seite hinzu:

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

Das ausgelöste Ereignisobjekt hat nicht den Typ flash.events.Event oder einer der Event-Unterklassen. Verwenden Sie die Object-Klasse, um einen Typ für das Ereignisprozedurfunktionsargument zu deklarieren.

Sie können diese Ereignisse auch mit der addEventListener()-Methode registrieren. Die completeHandler()-Methode im oben aufgeführten Beispiel lässt sich zum Beispiel durch den folgenden Code ersetzen:

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

Wenn ein Listener sich auf ein bestimmtes DOM-Element bezieht, hat es sich bewährt, zu warten, bis der übergeordnete HTMLLoader das complete-Ereignis auslöst, bevor die Ereignis-Listener hinzugefügt werden. HTML-Seiten laden häufig mehrere Dateien und das HTML-DOM wird nicht vollständig aufgebaut, bevor alle Dateien geladen und geparst wurden. Der HTMLLoader löst das complete-Ereignis aus, wenn alle Elemente erstellt wurden.

Antworten auf nicht erfasste JavaScript-Ausnahmen

Betrachten Sie den folgenden HTML-Code:

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

Er enthält eine JavaScript-Funktion, throwError(), die auf eine unbekannte Variable verweist, melbaToast:

var x = 400 * melbaToast;

Wenn eine JavaScript-Operation einen unzulässigen Vorgang erkennt, der im JavaScript-Code nicht mit einer try/catch-Struktur erfasst wird, löst das HTMLLoader-Objekt, das die Seite enthält, ein HTMLUncaughtScriptExceptionEvent-Ereignis aus. Sie können eine Prozedur für dieses Ereignis registrieren wie im folgenden Code:

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

In JavaScript können Sie dasselbe Ereignis mit der window.htmlLoader-Eigenschaft verarbeiten:

<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>

Das htmlErrorHandler()-Ereignis bricht das Standardverhalten des Ereignisses (das im Senden der JavaScript-Fehlermeldung an die AIR-Trace-Ausgabe besteht) ab und generiert seine eigene Ausgabemeldung. Ausgegeben wird der Wert von exceptionValue des HTMLUncaughtScriptExceptionEvent-Objekts. Im stackTrace-Array werden die Eigenschaften aller Objekte ausgegeben:

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

Verarbeiten von Laufzeitereignissen mit JavaScript

Die Laufzeitklassen unterstützen das Hinzufügen von Ereignis-Prozeduren mit der addEventListener()-Methode. Um eine Prozedurfunktion für ein Ereignis hinzuzufügen, rufen Sie die addEventListener()-Methode des Objekts auf, das das Ereignis auslöst, und geben Sie dabei den Ereignistyp und die Prozedurfunktion an. Um zum Beispiel auf das closing-Ereignis zu warten, das ausgelöst wird, wenn ein Benutzer auf das Schließen-Feld in der Titelleiste eines Fensters klickt, verwenden Sie die folgende Anweisung:

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

Erstellen einer Ereignisprozedurfunktion

Mit dem folgenden Code wird eine einfache HTML-Datei erstellt, die Informationen über die Position des Hauptfensters anzeigt. Eine Prozedurfunktion, moveHandler(), wartet auf ein move-Ereignis (von der NativeWindowBoundsEvent-Klasse definiert) des Hauptfensters.

<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>

Wenn ein Benutzer das Fenster verschiebt, zeigen die Textfeldelemente die aktualisierten X- und Y-Positionen des Fensters an:

Beachten Sie, dass das Ereignisobjekt als Argument an die moveHandler()-Methode übergeben wird. Der event-Parameter ermöglicht der Prozedurfunktion, das Ereignisobjekt zu überprüfen. In diesem Beispiel verwenden Sie die type-Eigenschaft des Ereignisobjekts, um zu melden, dass es sich bei dem Ereignis um ein move-Ereignis handelt.

Entfernen von Ereignisprozeduren

Mit der removeEventListener()-Methode können Sie einen Ereignis-Listener entfernen, den Sie nicht mehr benötigen. Es empfiehlt sich, alle nicht mehr benötigten Listener zu entfernen. Erforderliche Parameter sind eventName und listener, die identisch sind mit den erforderlichen Parametern für die addEventListener()-Methode.

Entfernen von Ereignis-Listenern auf navigierenden HTML-Seiten

Wenn HTML-Inhalt Navigationsvorgänge ausführt oder wenn HTML-Inhalt verworfen wird, da das Fenster mit dem Inhalt geschlossen wird, werden die Ereignis-Listener, die auf Objekte auf der entladenen Seite verweisen, nicht automatisch entfernt. Wenn ein Objekt ein Ereignis für eine Prozedur auslöst, die bereits entladen wurde, wird die folgende Fehlermeldung angezeigt: „The application attempted to reference a JavaScript object in an HTML page that is no longer loaded.“ (Die Anwendung hat versucht, auf ein JavaScript-Objekt auf einer HTML-Seite zu verweisen, die nicht mehr geladen ist.)

Um diesen Fehler zu vermeiden, entfernen Sie JavaScript-Ereignis-Listener auf einer HTML-Seite, bevor sie entladen wird. Bei der Seitennavigation (in einem HTMLLoader-Objekt) entfernen Sie den Ereignis-Listener während des unload-Ereignisses des window-Objekts.

Mit dem folgenden JavaScript-Code wird ein Ereignis-Listener für ein uncaughtScriptException-Ereignis entfernt:

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

Damit der Fehler nicht beim Schließen von Fenstern mit HTML-Inhalt auftritt, rufen Sie eine Bereinigungsfunktion als Reaktion auf das closing-Ereignis des NativeWindow-Objekts (window.nativeWindow) auf. Mit dem folgenden JavaScript-Code wird ein Ereignis-Listener für ein uncaughtScriptException-Ereignis entfernt:

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

Sie können diesen Fehler auch verhindern, indem Sie einen Ereignis-Listener entfernen, sobald er ausgeführt wird (falls das Ereignis nur einmal verarbeitet werden muss). Mit dem folgenden JavaScript-Code wird zum Beispiel ein Html-Fenster erstellt, indem die createRootWindow()-Methode der HTMLLoader-Klasse aufgerufen und ein Ereignis-Listener für das complete-Ereignis aufgerufen wird. Wenn die complete-Ereignisprozedur aufgerufen wird, entfernt sie ihren eigenen Ereignis-Listener mit der removeEventListener()-Funktion:

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

Wenn Sie nicht mehr benötigte Ereignis-Listener entfernen, hat auch der Garbage Collector des Systems die Möglichkeit, den mit diesen Listenern belegten Speicher freizumachen.

Überprüfen auf vorhandene Ereignis-Listener

Mit der hasEventListener()-Methode können Sie prüfen, ob Ereignis-Listener für ein Objekt vorhanden sind.