HTML5+ - 事件相关（窗口事件及原生dom事件）--编程之路,记录点滴,认真生活

1、addEventListener 添加事件监听函数

void document.addEventListener( event, callback, capture );

参数：

event: ( DOMString ) 必选要添加监听的事件类型，可取下面面列出的所有事件常量

callback: ( EventTrigCallback ) 必选扩展API加载完毕触发的回调函数

capture: ( Boolean ) 可选事件流捕获顺序，可忽略

事件常量

"plusready": 扩展API加载完成事件

"pause": 运行环境从前台切换到后台事件

"resume": 运行环境从后台切换到前台事件

"netchange": 设备网络状态变化事件

"newintent": 新意图事件

"plusscrollbottom": 窗口滚动到底部事件

"error": 页面加载错误事件

2、"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>

小提示：如果开发过程中使用了MUI，并且使用了mui.plusReady();函数可以不必再判断插件加载（鸣谢MUI群主：上海-無語<18241375060>给予底层确认）。

3、"pause": 运行环境从前台切换到后台事件

document.addEventListener( "pause", pauseCallback, capture );

当程序从前台切换到后台时会触发此事件。若应用需要处理从前台切换到后台的事件行为，可通过注册事件监听器来监听“pause”事件，此事件需要在plusready事件后通过document进行注册。
演示代码：

<script type="text/javascript"> mui.init(); mui.plusReady(function(){ document.addEventListener('pause',function(){ mui.toast('app 在后端运行'); },false) }); </script>

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

4、"plusscrollbottom": 窗口滚动到底部事件

document.addEventListener( "plusscrollbottom", eventCallback, capture );

当滚动Webview窗口到底部时触发此事件。演示代码：

mui.plusReady(function(){ document.addEventListener( "plusscrollbottom", onScrollToBottom, false ); function onScrollToBottom() { mui.toast('窗口滚动到底部'); } });

5、原生dom事件
可以通过以下方式给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);}