mui.fire()触发自定义事件

导读：添加自定义事件监听操作和标准js事件监听类似，可直接通过window对象添加,通过mui.fire()方法可触发目标窗口的自定义事件.

 

监听自定义事件

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

　　window.addEventListener('customEvent',function(event){
  　　//通过event.detail可获得传递过来的参数内容
  　   ....
　　});

触发自定义事件

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

　　目标webview必须触发loaded事件后才能使用自定义事件
　　若新创建一个webview，不等该webview的loaded事件发生，就立即使用webview.evalJS()或mui.fire(webview,'eventName',{})，则可能无效

 

 

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

列表页面代码如下：

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

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24

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

详情页面代码如下：

?

1 2 3 4 5 6 7

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