HTML 5+仕様:Events(クライアントイベントの管理)
10229 ワード
Eventsモジュールは、拡張APIのロード完了、プログラムのフロントバックグラウンド切り替えなど、システムイベントを含むクライアントイベントを管理します.
1、定数
1.1、「plusready」:拡張APIロード完了イベント
document.addEventListener( "plusready", plusreadyCallback, capture );
説明:Stringタイプは、拡張APIの有効な呼び出しを保証するために、すべてのアプリケーションページで使用される重要なイベントです.ページ表示を適用するには、まず拡張およびAPIコードライブラリをロードする必要があります.拡張APIコードライブラリのロードが完了するとplusereadyイベントがトリガーされ、デバイスがイベントをトリガーすると、ユーザーは安全に拡張APIを呼び出すことができます.このイベントは、プログラムで複数のページが開かれている場合に受信されます.
例:
1.2、「pause」:実行環境をフロントからバックグラウンドイベントに切り替える
document.addEventListener( "pause", pauseCallback, capture );
説明:Stringタイプです.プログラムがフロントからバックグラウンドに切り替わると、このイベントがトリガーされます.アプリケーションがフロントからバックグラウンドに切り替えるイベント動作を処理する必要がある場合は、plusreadyイベントの後にdocumentで登録する必要があるイベントリスナーを登録することによってpauseイベントを傍受できます.
例:
1.3、「resume」:実行環境をバックグラウンドからフロントイベントに切り替える
document.addEventListener( "resume", resumeCallback, capture );
説明:Stringタイプです.このイベントは、バックグラウンドからフロントにプログラムが切り替わるとトリガーされます.バックグラウンドからフロントに切り替えるイベント動作を処理する必要がある場合は、plusreadyイベントの後にdocumentで登録する必要があるイベントリスナーを登録することでresumeイベントをリスニングできます.
例:
1.4、「netchange」:設備ネットワーク状態変化イベント
document.addEventListener( "netchange", netchangeCallback, capture );
説明:Stringタイプで、デバイスネットワークの状態が発生するとこのイベントがトリガーされます.ネットワーク状態の変化を処理するイベント動作を適用する場合は、plusreadyイベントの後にdocumentで登録する必要があるイベントリスナーを登録することによってnetchangeイベントをリスニングできます.
例:
1.5、「newintent」:新意図イベント
document.addEventListener( "newintent", newintentCallback, capture );
説明:Stringタイプで、バックグラウンドからサードパーティ製のプログラムによって呼び出され、新しい意図イベントが転送されます.このときプログラムはフロントに切り替えて実行され、新しい意図したイベント動作を処理する必要がある場合は、plusreadyイベントの後にdocumentで登録する必要があるイベントリスナーを登録することでnewintentイベントをリスニングできます.
例:
1.6、「plusscrollbottom」:ウィンドウを最後までスクロールするイベント
document.addEventListener( "plusscrollbottom", eventCallback, capture );
説明:Stringタイプで、Webviewウィンドウの下部をスクロールするとイベントがトリガーされます.
例:
1.7、error:ページロードエラーイベント
document.addEventListener( "error", eventCallback, capture );
説明:このイベントは、Webviewウィンドウのページのロードに失敗した後にエラーページを開いたときにトリガーされるStringタイプです.注意:このイベントはエラーページでのみトリガーされます.
例:
2、方法
2.1、addEventListener:イベントリスニング関数の追加
void document.addEventListener( event, callback, capture );
説明:拡張イベントリスナーは、Htmlの標準documentオブジェクトのaddEventListenerメソッドによって追加され、指定されたイベントが発生すると、対応する受信コールバック関数がトリガーされます.
パラメータ:
event:(DOMString)リスニングを追加するイベントタイプを必ず選択し、上にリストされているすべてのイベント定数を取得します.
callback:(EventTrigCallback)拡張APIロード完了トリガコールバック関数必須
Capture:(Boolean)オプションイベントフローキャプチャ順序、無視可能
戻り値:void:なし
3、コールバック方法
3.1、EventTrigCallback:イベントトリガコールバック関数
void onTrig() {
//Event trig code
}
説明:指定したイベントが発生したときに呼び出されるイベントトリガ時のコールバック関数を指定します.
戻り値:void:なし
3.2、ErrorEventTrigCallback:ページロードエラーイベントコールバック関数
void onErrorTrig( Event event ) {
//Event trig code
var url = event.url;//誤ったページパスのロード、APIに入力されたurl値
var href = event.href;//間違ったページのフルパスをロードします.通常は「file://」で始まるパスです.
}
説明:このイベントは、Webviewウィンドウのページのロードに失敗した後、エラーページを開くとトリガーされます.
パラメータ:
event:(Event)オプションでページのロードに失敗した情報はevent.url(Stringタイプ)は、「./test/html」などのロードページのurl値を取得します.通過できるhref(Stringタイプ)Androidプラットフォームなどの完全なプロトコルヘッダを含む誤ったページの完全なパスをロードします.file:///storage/sdcard0/Android/data/io.dcloud.HBuilder/.HBuilder/apps/HBuilder/www/test.html"iOSプラットフォーム"file:///var/mobile/Containers/Data/Application/757966CF-345C-4348-B07F-EEF83CF9A369/Library/Pandora/apps/HBuilder/www/test.html”.
戻り値:void:なし
1、定数
1.1、「plusready」:拡張APIロード完了イベント
document.addEventListener( "plusready", plusreadyCallback, capture );
説明:Stringタイプは、拡張APIの有効な呼び出しを保証するために、すべてのアプリケーションページで使用される重要なイベントです.ページ表示を適用するには、まず拡張およびAPIコードライブラリをロードする必要があります.拡張APIコードライブラリのロードが完了するとplusereadyイベントがトリガーされ、デバイスがイベントをトリガーすると、ユーザーは安全に拡張APIを呼び出すことができます.このイベントは、プログラムで複数のページが開かれている場合に受信されます.
例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Events Example</title>
<script type="text/javascript" >
// API onPlusReady
document.addEventListener( "plusready", onPlusReady, false );
function onPlusReady() {
// API ， API
// ......
}
</script>
</head>
<body >
</body>
</html>1.2、「pause」:実行環境をフロントからバックグラウンドイベントに切り替える
document.addEventListener( "pause", pauseCallback, capture );
説明:Stringタイプです.プログラムがフロントからバックグラウンドに切り替わると、このイベントがトリガーされます.アプリケーションがフロントからバックグラウンドに切り替えるイベント動作を処理する必要がある場合は、plusreadyイベントの後にdocumentで登録する必要があるイベントリスナーを登録することによってpauseイベントを傍受できます.
例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Events Example</title>
<script type="text/javascript" >
// API onPlusReady
document.addEventListener( "plusready", onPlusReady, false );
function onPlusReady() {
document.addEventListener( "pause", onAppPause, false );
}
function onAppPause() {
console.log( "Application paused!" );
}
</script>
</head>
<body >
</body>
</html>1.3、「resume」:実行環境をバックグラウンドからフロントイベントに切り替える
document.addEventListener( "resume", resumeCallback, capture );
説明:Stringタイプです.このイベントは、バックグラウンドからフロントにプログラムが切り替わるとトリガーされます.バックグラウンドからフロントに切り替えるイベント動作を処理する必要がある場合は、plusreadyイベントの後にdocumentで登録する必要があるイベントリスナーを登録することでresumeイベントをリスニングできます.
例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Events Example</title>
<script type="text/javascript" >
// API onPlusReady
document.addEventListener( "plusready", onPlusReady, false );
function onPlusReady() {
document.addEventListener( "resume", onAppReume, false );
}
function onAppReume() {
alert( "Application resumed!" );
}
</script>
</head>
<body >
</body>
</html>1.4、「netchange」:設備ネットワーク状態変化イベント
document.addEventListener( "netchange", netchangeCallback, capture );
説明:Stringタイプで、デバイスネットワークの状態が発生するとこのイベントがトリガーされます.ネットワーク状態の変化を処理するイベント動作を適用する場合は、plusreadyイベントの後にdocumentで登録する必要があるイベントリスナーを登録することによってnetchangeイベントをリスニングできます.
例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Events Example</title>
<script type="text/javascript" >
// 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("Switch to Wifi networks!");
break;
case plus.networkinfo.CONNECTION_CELL2G:
case plus.networkinfo.CONNECTION_CELL3G:
case plus.networkinfo.CONNECTION_CELL4G:
alert("Switch to Cellular networks!");
break;
default:
alert("Not networks!");
break;
}
}
</script>
</head>
<body >
</body>
</html>1.5、「newintent」:新意図イベント
document.addEventListener( "newintent", newintentCallback, capture );
説明:Stringタイプで、バックグラウンドからサードパーティ製のプログラムによって呼び出され、新しい意図イベントが転送されます.このときプログラムはフロントに切り替えて実行され、新しい意図したイベント動作を処理する必要がある場合は、plusreadyイベントの後にdocumentで登録する必要があるイベントリスナーを登録することでnewintentイベントをリスニングできます.
例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Events Example</title>
<script type="text/javascript" >
// API onPlusReady
document.addEventListener( "plusready", onPlusReady, false );
function onPlusReady() {
document.addEventListener( "newintent", onNetIntent, false );
}
function onNetIntent() {
//
var args = plus.runtime.arguments;
//
}
</script>
</head>
<body >
</body>
</html>1.6、「plusscrollbottom」:ウィンドウを最後までスクロールするイベント
document.addEventListener( "plusscrollbottom", eventCallback, capture );
説明:Stringタイプで、Webviewウィンドウの下部をスクロールするとイベントがトリガーされます.
例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Events Example</title>
<script type="text/javascript" >
// API onPlusReady
document.addEventListener( "plusready", onPlusReady, false );
function onPlusReady() {
document.addEventListener( "plusscrollbottom", onScrollToBottom, false );
}
function onScrollToBottom() {
//
}
</script>
</head>
<body >
</body>
</html>1.7、error:ページロードエラーイベント
document.addEventListener( "error", eventCallback, capture );
説明:このイベントは、Webviewウィンドウのページのロードに失敗した後にエラーページを開いたときにトリガーされるStringタイプです.注意:このイベントはエラーページでのみトリガーされます.
例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<meta name="HandheldFriendly" content="true"/>
<meta name="MobileOptimized" content="320"/>
<title>Error</title>
<script type="text/javascript">
// H5 plus
var ws=null;
function plusReady(){
// Android
plus.key.addEventListener('backbutton',function(){
(history.length==1)&&ws.close();
var c=setTimeout(function(){
ws.close();
},1000);
window.onbeforeunload=function(){
clearTimeout(c);
}
history.go(-2);
},false);
ws=plus.webview.currentWebview();
}
if(window.plus){
plusReady();
}else{
document.addEventListener('plusready',plusReady,false);
}
document.addEventListener('touchstart',function(){
return false;
},true);
//
document.oncontextmenu=function(){
return false;
};
//
document.addEventListener("error",function(e){
info.innerText=" （"+e.href+"） ";
},false);
</script>
<style>
*{
-webkit-user-select: none;
}
html,body{
margin: 0px;
padding: 0px;
width: 100%;
height: 100%;
text-align: center;
-webkit-touch-callout:none;
-webkit-tap-highlight-color:rgba(0,0,0,0);
}
.button{
width: 50%;
font-size: 18px;
font-weight: normal;
text-decoration: none;
text-align: center;
padding: .5em 0em;
margin: .5em auto;
color: #333333;
background-color: #EEEEEE;
border: 1px solid #CCCCCC;
-webkit-border-radius: 5px;
border-radius: 5px;
}
.button:active{
background-color: #CCCCCC;
}
</style>
</head>
<body>
<div style="width:100%;height:20%;"></div>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 512 512" style="height:20%;">
<g id="icomoon-ignore">
<line stroke-width="1" x1="" y1="" x2="" y2="" stroke="#449FDB" opacity=""></line>
</g>
<path d="M256 0c-141.385 0-256 114.615-256 256s114.615 256 256 256 256-114.615 256-256-114.615-256-256-256zM352 128c17.673 0 32 14.327 32 32s-14.327 32-32 32-32-14.327-32-32 14.327-32 32-32zM160 128c17.673 0 32 14.327 32 32s-14.327 32-32 32-32-14.327-32-32 14.327-32 32-32zM352.049 390.37c-19.587-32.574-55.272-54.37-96.049-54.37s-76.462 21.796-96.049 54.37l-41.164-24.698c27.98-46.535 78.958-77.672 137.213-77.672s109.232 31.137 137.213 77.672l-41.164 24.698z" fill="#666666"></path>
</svg>
<p style="font-size:18px;font-weight:bolder;">We're sorry ...</p>
<p id="info" style="font-size:12px;"></p>
<!--<div class="button" onclick="history.back()">Retry</div>-->
<div class="button" onclick="if(history.length == 1){ws.close();}else{ws.back();ws.back();}">Back</div>
<div class="button" onclick="ws.close()">Close</div>
</body>
</html>2、方法
2.1、addEventListener:イベントリスニング関数の追加
void document.addEventListener( event, callback, capture );
説明:拡張イベントリスナーは、Htmlの標準documentオブジェクトのaddEventListenerメソッドによって追加され、指定されたイベントが発生すると、対応する受信コールバック関数がトリガーされます.
パラメータ:
event:(DOMString)リスニングを追加するイベントタイプを必ず選択し、上にリストされているすべてのイベント定数を取得します.
callback:(EventTrigCallback)拡張APIロード完了トリガコールバック関数必須
Capture:(Boolean)オプションイベントフローキャプチャ順序、無視可能
戻り値:void:なし
3、コールバック方法
3.1、EventTrigCallback:イベントトリガコールバック関数
void onTrig() {
//Event trig code
}
説明:指定したイベントが発生したときに呼び出されるイベントトリガ時のコールバック関数を指定します.
戻り値:void:なし
3.2、ErrorEventTrigCallback:ページロードエラーイベントコールバック関数
void onErrorTrig( Event event ) {
//Event trig code
var url = event.url;//誤ったページパスのロード、APIに入力されたurl値
var href = event.href;//間違ったページのフルパスをロードします.通常は「file://」で始まるパスです.
}
説明:このイベントは、Webviewウィンドウのページのロードに失敗した後、エラーページを開くとトリガーされます.
パラメータ:
event:(Event)オプションでページのロードに失敗した情報はevent.url(Stringタイプ)は、「./test/html」などのロードページのurl値を取得します.通過できるhref(Stringタイプ)Androidプラットフォームなどの完全なプロトコルヘッダを含む誤ったページの完全なパスをロードします.file:///storage/sdcard0/Android/data/io.dcloud.HBuilder/.HBuilder/apps/HBuilder/www/test.html"iOSプラットフォーム"file:///var/mobile/Containers/Data/Application/757966CF-345C-4348-B07F-EEF83CF9A369/Library/Pandora/apps/HBuilder/www/test.html”.
戻り値:void:なし