HTML5+ - 窗口事件及原生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);}
  • 1
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值