1. 程式人生 > >視窗事件及原生dom事件

視窗事件及原生dom事件

詳細資訊

addEventListener 新增事件監聽函式

document.addEventListener( event, callback, capture );
引數:
event: ( DOMString ) 必選 要新增監聽的事件型別,可取下面面列出的所有事件常量
callback: ( EventTrigCallback ) 必選 擴充套件API載入完畢觸發的回撥函式
capture: ( Boolean ) 可選 事件流捕獲順序,可忽略

事件常量
"plusready": 擴充套件API載入完成事件
"pause": 執行環境從前臺切換到後臺事件
"resume": 執行環境從後臺切換到前臺事件
"netchange"
: 裝置網路狀態變化事件 "newintent": 新意圖事件 "plusscrollbottom": 視窗滾動到底部事件 "error": 頁面載入錯誤事件 "background": 應用切換到後臺執行事件 "foreground": 應用切換到前臺執行事件 "trimmemory": 應用需要清理記憶體事件 "splashclosed": 應用啟動介面已關閉事件

plusready: 擴充套件API載入完成事件

document.addEventListener( "plusready", plusreadyCallback, capture )
說明:
String 型別
為了保證擴充套件API的有效呼叫,所有應用頁面都會用到的重要事件。 
應用頁面顯示時需要首先載入擴充套件和API程式碼庫,當擴充套件API程式碼庫載入完成時會觸發pluseready事件,
當裝置觸發該事件後,使用者就可以安全的呼叫擴充套件API。 如果程式中開啟多個頁面,每個都會收到此事件。

示例:
// 擴充套件API載入完畢後呼叫onPlusReady回撥函式 
document.addEventListener( "plusready", onPlusReady, false ); function onPlusReady() { // 擴充套件API載入完畢,現在可以正常呼叫擴充套件API }

pause: 執行環境從前臺切換到後臺事件

 document.addEventListener( "pause", pauseCallback, capture );
當程式從前臺切換到後臺時會觸發此事件。 若應用需要處理從前臺切換到後臺的事件行為,
可通過註冊事件監聽器來監聽“pause”事件,此事件需要在plusready事件後通過document進行註冊。
mui.plusReady(function
(){
document.addEventListener('pause',function(){ mui.toast('app 在後端執行'); },false) });

resume: 執行環境從後臺切換到前臺事件

document.addEventListener( "resume", resumeCallback, capture );
mui.plusReady(function(){
    document.addEventListener('pause',function(){
        mui.toast('app 在後端執行');
    },false);
    document.addEventListener('resume',function(){
        mui.toast('app 在前端端執行');
    },false)
});

netchange:裝置網路狀態變化事件

document.addEventListener("netchange", netchangeCallback, capture);
String 型別
裝置網路狀態發生時會觸發此事件。 若應用需要處理網路狀態變化的事件行為,
可通過註冊事件監聽器來監聽“netchange”事件,此事件需要在plusready事件後通過document進行註冊
// 擴充套件API載入完畢後呼叫onPlusReady回撥函式 
document.addEventListener("plusready", onPlusReady, false);
function onPlusReady(){
    document.addEventListener("netchange", onNetChange, false);  
}
function onNetChange(){
    var nt = plus.networkinfo.getCurrentType();
    switch (nt){
        case plus.networkinfo.CONNECTION_ETHERNET:
        case plus.networkinfo.CONNECTION_WIFI:
        alert(); 
        break; 
        case plus.networkinfo.CONNECTION_CELL2G:
        case plus.networkinfo.CONNECTION_CELL3G:
        case plus.networkinfo.CONNECTION_CELL4G:
        alert();  
        break; 
        default:
        alert(); 
        break;
    }
}

newintent:新意圖事件

document.addEventListener("newintent", newintentCallback, capture);
String 型別
程式從後臺被第三方程式呼叫並傳入新意圖事件。 此時程式將切換到前臺執行,若應用需要處理新意圖的事件行為,
可通過註冊事件監聽器來監聽“newintent”事件,此事件需要在plusready事件後通過document進行註冊。
// 擴充套件API載入完畢後呼叫onPlusReady回撥函式
document.addEventListener("plusready", onPlusReady, false);
function onPlusReady(){
    document.addEventListener("newintent", onNetIntent, false);
}
function onNetIntent(){
    // 獲取新意圖傳入的引數
    var args = plus.runtime.arguments;
    // 處理意圖事件
}

plusscrollbottom: 視窗滾動到底部事件

document.addEventListener( "plusscrollbottom", eventCallback, capture );
當滾動Webview視窗到底部時觸發此事件。
mui.plusReady(function(){
    document.addEventListener( "plusscrollbottom", onScrollToBottom, false );
    function onScrollToBottom() {
        mui.toast('視窗滾動到底部');
    }
});

background:應用切換到後臺執行事件

document.addEventListener("background", backgroundCallback, capture);
String 型別
在多應用執行環境(如流應用)中,啟動一個新應用時,之前執行的應用將會自動切換到後臺執行。 切換到後臺執行的應用將會觸發此事件。
// 擴充套件API載入完畢後呼叫onPlusReady回撥函式 
document.addEventListener("plusready", onPlusReady, false); 
function onPlusReady(){
    document.addEventListener("background", onAppBackground, false);
}
function onAppBackground(){
    console.log("Application background!"); 
}

foreground:應用切換到前臺執行事件

document.addEventListener("foreground", foregroundCallback, capture);
String 型別
在多應用執行環境(如流應用)中,應用切換到後臺執行後再次被啟動時,不會建立新的應用例項,而是將後臺應用啟用到前臺執行。
此時切換到前臺執行的應用將會觸發foreground事件。 回撥函式原型為void onForeground(e){}其中e.active表明啟用應用到
前臺來源,可取值:"default"-預設啟用方式,通常表示通過應用列表啟動啟用,或者關閉前一個應用後自動啟用等;"stream"-通
過流應用api(plus.stream.open)啟用;"scheme"-通過urlscheme方式觸發啟用; "push"-通過點選系統通知方式觸發啟用;
 "barcode"-通過二維碼掃描啟用; "myapp"-通過應用收藏列表([流應用]獨立App中"我的"列表)觸發啟用。
 // 擴充套件API載入完畢後呼叫onPlusReady回撥函式 
document.addEventListener("plusready", onPlusReady, false); 
function onPlusReady(){
    document.addEventListener("foreground", onAppForeground, false);
}
function onAppForeground(e){
    console.log("Application foreground!");
    var activeType = e.active;  // 獲取啟用到前臺來源
}

trimmemory:應用需要清理記憶體事件

document.addEventListener("trimmemory", trimmemoryCallback, capture);
String 型別
在多應用執行環境(如流應用)中,可同時執行多個應用,當執行過多應用時會導致記憶體佔用過多的情況,此時切換到後臺
執行的應用會收到清理記憶體事件。 此時應用應該釋放資源來減少記憶體的使用(如關閉非必要的Webview視窗等)。
// 擴充套件API載入完畢後呼叫onPlusReady回撥函式 
document.addEventListener("plusready", onPlusReady, false); 
function onPlusReady(){
    document.addEventListener("trimmemory", onAppTrimMemory, false);
}
function onAppTrimMemory(){
    console.log("Trim Memory!"); 
}

splashclosed:應用啟動介面已關閉事件

document.addEventListener("splashclosed", splashClosedCallback, capture);
String 型別
應用啟動後關閉啟動介面時觸發,不管是應用自動關閉還是呼叫plus.navigator.closeSplashscreen方法,都會觸發此事件。
// 擴充套件API載入完畢後呼叫onPlusReady回撥函式 
document.addEventListener("plusready", onPlusReady, false); 
function onPlusReady(){
    document.addEventListener("splashclosed", onSplashClosed, false);
}
function onSplashClosed(){
    console.log("Splash closed!"); 
}

原生dom事件

1、利用dom元素的 onclick="" 屬性
<input type="button" id="btn" value="test" onclick="test();"></input>
//js程式碼
function test(){alert(1);}

2、獲取dom物件,從寫dom元素的 onclick 方法
<input type="button" id="btn" value="test"></input>
//js程式碼
document.addEventListener('plusready', function(){
    var btn = document.getElementById('btn');
    btn.onclick = function(){alert(1);}
});

3、a 元素的href屬性
<a href="javascript:test();">test</a>
//js程式碼
function test(){alert(1);}