DCloud-MUI：事件管理

ylbtech-DCloud-MUI：事件管理

極簡的JS函數

1.返回頂部

一、事件綁定

除了可使用 addEventListener()方法監聽某個特定元素上的事件外， 也可使用 .on()方法實現批量元素的事件綁定。

.on( event , selector , handler )

• event
  Type: String
  需監聽的事件名稱，例如：'tap'
• selector
  Type: String
  選擇器
• handler
  Type: Function( Event event )
  事件觸發時的回調函數，經過回調中的event參數能夠得到事件詳情

示例

點擊新聞列表，獲取當前列表項的id，並將該id傳給新聞詳情頁面，而後打開新聞詳情頁面

mui(".mui-table-view").on('tap','.mui-table-view-cell',function(){
  //獲取id
  var id = this.getAttribute("id");
  //傳值給詳情頁面，通知加載新數據
  mui.fire(detail,'getDetail',{id:id});
  //打開新聞詳情
  mui.openWindow({
    id:'detail',
    url:'detail.html'
  });
}) 

二、事件取消

使用 on()方法綁定事件後，若但願取消綁定，則可使用 off()方法。  off()方法根據傳入參數的不一樣，有不一樣的實現邏輯。

• .off( event , selector , handler )

  • event
    Type:  String
    需取消綁定的事件名稱，例如：'tap'
  • selector
    Type:  String
    選擇器
  • handler
    Type:  Function
    以前綁定到該元素上的事件函數，不支持匿名函數

• .off( event , selector)

  • event
    Type:  String
    需取消綁定的事件名稱，例如：'tap'
  • selector
    Type:  String
    選擇器

• .off( event )

  • event
    Type:  String
    需取消綁定的事件名稱，例如：'tap'

• .off( )

  • 空參數，刪除該元素上全部事件

示例

off(event,selector,handle)適用於取消對應選擇器上特定事件所執行的特定回調，例如：

//點擊li時，執行foo_1函數
mui("#list").on("tap","li",foo_1);
//點擊li時，執行foo_2函數
mui("#list").on("tap","li",foo_2);

function foo_1(){
  console.log("foo_1 execute");
}

function foo_2(){
  console.log("foo_2 execute");
}
//點擊li時，再也不執行foo_1函數，但會繼續執行foo_2函數
mui("#list").off("tap","li",foo_1);

 off(event,selector)適用於取消對應選擇器上特定事件的全部回調，例如：

//點擊li時，執行foo_1函數
mui("#list").on("tap","li",foo_1);
//點擊li時，執行foo_2函數
mui("#list").on("tap","li",foo_2);

function foo_1(){
  console.log("foo_1 execute");
}

function foo_2(){
  console.log("foo_2 execute");
}
//點擊li時，foo_二、foo_2兩個函數均再也不執行
mui("#list").off("tap","li");

off(event)適用於取消當前元素上綁定的特定事件的全部回調，例如：

//點擊li時，執行foo_1函數
mui("#list").on("tap","li",foo_1);
//點擊p時，執行foo_3函數
mui("#list").on("tap","p",foo_3);

function foo_1(){
  console.log("foo_1 execute");
}

function foo_3(){
  console.log("foo_3 execute");
}
//點擊li時，再也不執行foo_1函數；點擊p時，也再也不執行foo_3函數
mui("#list").off("tap");

off()適用於取消當前元素上綁定的全部事件回調，例如：

//點擊li時，執行foo_1函數
mui("#list").on("tap","li",foo_1);
//雙擊li時，執行foo_4函數
mui("#list").on("doubletap","li",foo_4);
//點擊p時，執行foo_3函數
mui("#list").on("tap","p",foo_3);

function foo_1(){
  console.log("foo_1 execute");
}

function foo_3(){
  console.log("foo_3 execute");
}

function foo_4(){
  console.log("foo_4 execute");
}
//點擊li時，再也不執行foo_1函數；點擊p時，也再也不執行foo_3函數；雙擊li時，也再也不執行foo_4函數；
mui("#list").off(); 

三、事件觸發

使用 mui.trigger()方法能夠動態觸發特定DOM元素上的事件。

.trigger( element , event , data )

• element
  Type: Element
  觸發事件的DOM元素
• event
  Type: String
  事件名字，例如：'tap'、'swipeleft'
• data
  Type: Object
  須要傳遞給事件的業務參數

示例

自動觸發按鈕的點擊事件：

var btn = document.getElementById("submit");
//監聽點擊事件
btn.addEventListener("tap",function () {
  console.log("tap event trigger");
});
//觸發submit按鈕的點擊事件
mui.trigger(btn,'tap');

部分mui控件監聽的事件沒法經過mui.trigger觸發

好比沒法實現自動觸發mui返回圖標，實現關閉當前頁面的功能，該部分邏輯正在優化中

四、手勢事件

在開發移動端的應用時，會用到不少的手勢操做，好比滑動、長按等，爲了方便開放者快速集成這些手勢，mui內置了經常使用的手勢事件，目前支持的手勢事件見以下列表：

分類	參數	描述
點擊	tap	單擊屏幕
	doubletap	雙擊屏幕
長按	longtap	長按屏幕
	hold	按住屏幕
	release	離開屏幕
滑動	swipeleft	向左滑動
	swiperight	向右滑動
	swipeup	向上滑動
	swipedown	向下滑動
拖動	dragstart	開始拖動
	drag	拖動中
	dragend	拖動結束

手勢事件配置

根據使用頻率，mui默認會監聽部分手勢事件，如點擊、滑動事件；爲了開發出更高性能的moble App，mui支持用戶根據實際業務需求，經過mui.init方法中的gestureConfig參數，配置具體須要監聽的手勢事件，。

mui.init({
  gestureConfig:{
   tap: true, //默認爲true
   doubletap: true, //默認爲false
   longtap: true, //默認爲false
   swipe: true, //默認爲true
   drag: true, //默認爲true
   hold:false,//默認爲false，不監聽
   release:false//默認爲false，不監聽
  }
});

 注意:dragstart、drag、dragend共用drag開關，swipeleft、swiperight、swipeup、swipedown共用swipe開關

事件監聽

單個元素上的事件監聽，直接使用addEventListener()便可，以下：

elem.addEventListener("swipeleft",function(){
     console.log("你正在向左滑動");
});

若多個元素執行相同邏輯，則建議使用事件綁定(on())。

五、自定義事件

在App開發中，常常會遇到頁面間傳值的需求，好比重新聞列表頁進入詳情頁，須要將新聞id傳遞過去； Html5Plus規範設計了evalJS方法來解決該問題； 但evalJS方法僅接收字符串參數，涉及多個參數時，須要開發人員手動拼字符串； 爲簡化開發，mui框架在evalJS方法的基礎上，封裝了自定義事件，經過自定義事件，用戶能夠輕鬆實現多webview間數據傳遞。

僅能在5+ App及流應用中使用

由於是多webview之間傳值，故沒法在手機瀏覽器、微信中使用；

監聽自定義事件

添加自定義事件監聽操做和標準js事件監聽相似，可直接經過window對象添加，以下：

window.addEventListener('customEvent',function(event){
  //經過event.detail可得到傳遞過來的參數內容
  ....
});

觸發自定義事件

經過mui.fire()方法可觸發目標窗口的自定義事件：

• .fire( target , event , data )

  • target
    Type: WebviewObject
    需傳值的目標webview
  • event
    Type: String
    自定義事件名稱
  • data
    Type: JSON
    json格式的數據

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

六、

2.返回頂部

 

3.返回頂部

 

4.返回頂部

 

5.返回頂部

一、

http://dev.dcloud.net.cn/mui/event/

二、

 

6.返回頂部

 

做者：ylbtech 出處：http://ylbtech.cnblogs.com/ 本文版權歸做者和博客園共有，歡迎轉載，但未經做者贊成必須保留此段聲明，且在文章頁面明顯位置給出原文鏈接，不然保留追究法律責任的權利。