自定义事件

MUI HTML5

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向服务器请求新闻详情
  .....
});