mui中关于自定义事件的一些小理解

在App开发中，经常会遇到页面间传值的需求，比如从新闻列表页进入详情页，需要将新闻id传递过去，mui框架在evalJS（html5+）方法的基础上，封装了自定义事件，通过自定义事件，用户可以轻松实现多webview间数据传递。

window.addEventListener('customEvent',function(event){
  //通过event.detail可获得传递过来的参数内容（说明这一段代码是在目标页面中写的）,
  //evet.detail是一个对象；
  ....
});

现在已经定义好了一个自定义事件，那么该如何触发呢，在哪里触发呢，由于该自定义事件要“获取传递过来的参数”，所以自然而然地，在事件触发的时候要能够携带这些参数来传递给目标页面，因为这些参数是存在于上一级页面中的，所以要在上一级页面中进行触发。

那么问题来了，如何触发呢？mui给出的方法是：

mui.fire( target , event , data )

在这里：target Type: WebviewObject  表示需传值的目标webview；event  Type: String  自定义事件名称；data  Type: JSON  json格式的数据；

举一个具体的例子：

假设如下场景：从新闻列表页面进入新闻详情页面，新闻详情页面为共用页面，通过传递新闻ID通知详情页面需要显示具体哪个新闻，详情页面再动态向服务器请求数据，mui要实现类似需求可通过如下步骤实现：
1.在列表页面中预加载详情页面（假设为detail.html）
2.列表页面在点击新闻标题时，首先，获得该新闻id，触发详情页面的newsId事件，并将新闻id作为事件参数传递过去；然后再打开详情页面；
3.详情页面监听newsId自定义事件。

具体的代码如下：

//初始化预加载详情页面，也就是mui官网中所要注意的---要等到webview的loaded之后才要触发自定义事件
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'
  });
}); 

在目标界面，就是detail.html界面中。

//添加newId自定义事件监听
window.addEventListener('newsId',function(event){
  //获得事件参数
  var id = event.detail.id;
  //根据id向服务器请求新闻详情
  .....
});