視窗事件及原生dom事件
阿新 • • 發佈:2019-02-04
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);}