HBuilder mui 自定义事件

用户开发应用中会大量使用事件功能。除了浏览器内置的事件及mui框架内置的事件（比如手势事件）外，mui同时支持用户触发和绑定自定义事件。通过自定义事件，用户可以轻松实现页面间数据传递。

监听自定义事件

添加自定义事件监听操作和标准js事件监听类似，可直接通过window对象添加，如下：

window.addEventListener('customEvent',function(event){

//通过event.detail可获得传递过来的参数内容

....

});

触发自定义事件

通过mui.fire方法可触发目标窗口的自定义事件：

mui.fire(targetPage,'customEvent',{

//自定义事件参数

});

示例：假设如下场景：从新闻列表页面进入新闻详情页面，新闻详情页面为共用页面，通过传递新闻ID通知详情页面需要显示具体哪个新闻，详情页面再动态向服务器请求数据，mui要实现类似需求可通过如下步骤实现：

在列表页面中预加载详情页面（假设为detail.html）

列表页面在点击新闻标题时，首先，获得该新闻id，触发详情页面的newsId事件，并将新闻id作为事件参数传递过去；然后再打开详情页面；

详情页面监听newsId自定义事件

列表页面代码如下：

//初始化预加载详情页面

mui.init({

preloadPages:[{

id:'detail.html',

url:'detail.html'

}

]

});

var detailPage = null;

//添加列表项的点击事件

mui('.mui-content').on('tap', 'a', function(e) {

var id = this.getAttribute('id');

//获得详情页面

if(!detailPage){

detailPage = plus.webview.getWebviewById('detail.html');

}

//触发详情页面的newsId事件

mui.fire(detailPage,'newsId',{

id:id

});

//打开详情页面

mui.openWindow({

id:'detail.html'

});

});

详情页面代码如下：

//添加newId自定义事件监听

window.addEventListener('newsId',function(event){

//获得事件参数

var id = event.detail.id;

//根据id向服务器请求新闻详情

.....

});