Hantera HTML-relaterade händelser i AIR

Adobe AIR 1.0 och senare

Med hjälp av ett händelsehanteringssystem kan programmerare besvara användarinmatningar och systemhändelser på ett smidigt sätt. Händelsemodellen i Adobe® AIR® är inte bara smidig och bekväm, utan uppfyller också gällande standarder. Den nya händelsemodellen bygger på DOM Level 3-händelsespecifikationen, som är en standardarkitektur för händelsehantering. Modellen erbjuder ett effektivt och samtidigt intuitivt händelsehanteringsverktyg för programmerare.

HTMLLoader-händelser

Ett HTMLLoader-objekt skickar följande Adobe® ActionScript® 3.0-händelser:

Händelse

Beskrivning

htmlDOMInitialize

Skickas när HTML-dokumentet skapas men innan några skript tolkas eller DOM-noder läggs till på sidan.

complete

Skickas när HTML DOM har skapats som svar på en inläsningsåtgärd, omedelbart efter onload -händelsen på HTML-sidan.

htmlBoundsChanged

Skickas när en av egenskaperna contentWidth och contentHeight , eller båda två, har ändrats.

locationChange

Skickas när location-egenskapen för HTMLLoader har ändrats.

locationChanging

Skickas innan platsen för HTMLLoader ändras på grund av användarnavigering, ett JavaScript-anrop eller en omdirigering. Händelsen locationChanging skickas inte när du anropar metoderna load() , loadString() , reload() , historyGo() , historyForward() eller historyBack() .

Ett anrop av metoden preventDefault() för det skickade händelseobjektet avbryter navigeringen.

Om en länk öppnas i systemwebbläsaren skickas inte en locationChanging-händelse eftersom HTMLLoader inte ändrar plats.

scroll

Skickas då HTML-motorn ändrar rullningspositionen. Scroll-händelser kan inträffa på grund av navigering till ankarlänkar ( # -länkar) på sidan eller på grund av anrop till metoden window.scrollTo() . Att ange text i en textinmatning eller ett textområde kan också orsaka en scroll-händelse.

uncaughtScriptException

Skickas när ett JavaScript-undantag inträffar i HTMLLoader och undantaget inte fångas upp i JavaScript-koden.

Du kan också registrera en ActionScript-funktion för en JavaScript-händelse (t.ex. onClick ). Mer information finns i Hantera DOM-händelser med ActionScript .

Hantera DOM-händelser med ActionScript

Du kan registrera ActionScript-funktioner som ska besvara JavaScript-händelser. Ta till exempel följande HTML-innehåll: 

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

Du kan registrera en ActionScript-funktion som en hanterare för alla händelser på sidan. Följande kod lägger till exempel till funktionen clickHandler() som avlyssnare för onclick -händelsen i testLink -elementet på HTML-sidan: 

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

Det händelseobjekt som skickas har inte typen flash.events.Event och är inte någon Event-underklass. Använd klassen Object för att deklarera en typ för händelsehanterarens funktionsargument.

Du kan också använda metoden addEventListener() för att registrera de här händelserna. Du kan till exempel ersätta metoden completeHandler() i det föregående exemplet med följande kod: 

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

När en avlyssnare refererar till ett särskilt DOM-element kan det vara bra att vänta på att det överordnade HTMLLoader-objektet ska skicka complete -händelsen innan händelseavlyssnarna läggs till. HTML-sidor läser ofta in flera filer och HTML DOM är inte helt färdig förrän alla filerna är inlästa och tolkade. HTMLLoader skickar complete -händelsen när alla element har skapats.

Svara på JavaScript-undantag som inte fångats upp

Ta följande HTML: 

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

Det innehåller en JavaScript-funktion, throwError() , som refererar till en okänd variabel, melbaToast : 

var x = 400 * melbaToast;

Om en JavaScript-åtgärd stöter på en ogiltig åtgärd som inte fångas upp i JavaScript-koden med en try / catch -struktur, skickar det HTMLLoader-objekt som innehåller sidan en HTMLUncaughtScriptExceptionEvent-händelse. Du kan registrera en hanterare för den här händelsen, se följande kod: 

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

I JavaScript kan du hantera samma händelse med hjälp av egenskapen 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() -händelsehanteraren avbryter händelsens standardbeteende (som är att skicka JavaScript-felmeddelandet till AIR trace-utdata) och skickar ett eget utdatameddelande. Det returnerar värdet för exceptionValue för HTMLUncaughtScriptExceptionEvent-objektet. Det returnerar egenskaperna för varje objekt i stackTrace -arrayen: 

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

Hantera körningshändelser med JavaScript

Körningsklasserna kan lägga till händelsehanterare med metoden addEventListener() . Om du vill lägga till en hanterarfunktion för en händelse anropar du metoden addEventListener() för det objekt som skickar händelsen och som innehåller händelsetypen och hanteringsfunktionen. Om du till exempel vill avlyssna den closing -händelse som skickas när en användare klickar på fönstrets stängningsknapp i namnlisten, använder du följande programsats: 

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

Skapa en händelsehanterarfunktion

Följande kod skapar en enkel HTML-fil som visar information om huvudfönstrets placering. En hanterarfunktion med namnet moveHandler() avlyssnar en move-händelse (definieras av klassen NativeWindowBoundsEvent) i huvudfönstret. 

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

Om en användare flyttar fönstret visar textarea-elementen fönstrets uppdaterade X- och Y-positioner:

Observera att händelseobjektet överförs som ett argument till metoden moveHandler() . Med hjälp av händelseparametern kan hanterarfunktionen undersöka händelseobjektet. I det här exemplet använder du händelseobjektets type -egenskap för att rapportera att händelsen är en move -händelse.

Ta bort händelseavlyssnare

Du kan använda metoden removeEventListener() när du vill ta bort en händelseavlyssnare som inte längre behövs. Det kan vara en bra idé att ta bort avlyssnare som inte längre används. Parametrar som krävs innefattar parametrarna eventName och listener , som är desamma som de parametrar som krävs för metoden addEventListener() .

Ta bort händelseavlyssnare på HTML-sidor som innehåller navigering

När navigering görs i HTML-innehåll, eller när HTML-innehåll ignoreras på grund av att fönstret som innehållet finns i stängs, tas inte de händelseavlyssnare som refererar till objekten på den ej inlästa sidan bort automatiskt. Om ett objekt skickar en händelse till en hanterare som redan har tagits bort visas ett felmeddelande av följande typ: "Programmet försökte referera till ett JavaScript-objekt på en HTML-sida som inte finns inläst."

För att undvika det här felet tar du bort JavaScript-händelseavlyssnare på en HTML-sida innan sidan tas bort. Vid sidnavigering (i ett HTMLLoader-objekt) tar du bort händelseavlyssnaren under unload -händelsen för window -objektet.

Följande JavaScript-kod tar till exempel bort en händelseavlyssnare för en uncaughtScriptException -händelse: 

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

Om du vill förhindra att det här felet uppstår när fönster som innehåller HTML-innehåll stängs, så anropar du en cleanup-funktion som svar på closing -händelsen för NativeWindow-objektet ( window.nativeWindow ). Följande JavaScript-kod tar till exempel bort en händelseavlyssnare för en uncaughtScriptException -händelse: 

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

Du kan också förhindra att det här felet inträffar genom att ta bort en händelseavlyssnare så snart den körs (om händelsen bara behöver hanteras en gång). Följande JavaScript-kod skapar till exempel ett html-fönster genom att anropa metoden createRootWindow() för klassen HTMLLoader och lägger till en händelseavlyssnare för complete -händelsen. När complete -händelsehanteraren anropas tar den bort sin egen händelseavlyssnare med hjälp av removeEventListener() -funktionen: 

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

Om du tar bort onödiga händelseavlyssnare kan systemets skräpinsamlare frigöra det minne som var kopplat till dessa avlyssnare.

Söka efter befintliga händelseavlyssnare

Med hjälp av metoden hasEventListener() kan du söka efter befintliga händelseavlyssnare i ett objekt.