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自定義事件

列表頁面代碼如下：

//初始化預加載詳情頁面

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向服務器請求新聞詳情
　　.....
});