MUI事件管理

模塊：事件管理

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

事件綁定：

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

.on(event,select,handler);
//event: type:string,需要監聽的事件名稱，例如:"tap";
//select：type:string,選擇器
//handler：type:function()事件觸發時的回調函數，通過回調中的event參數可以獲得事件詳情

示例：

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,select,handler);
.off(event,select);
.off(event);
.off();//空參數，刪除該元素上所有事件
//event: type:string,需取消綁定的事件名稱，例如：'tap';
//select：type:string,選擇器
//handler：type:function()之前綁定到該元素上的事件函數，不支持匿名函數

 

具體示例：

<script type="text/javascript">
mui("#list").on("tap","li",foo_1);//點擊li時，執行foo_1函數
mui("#list").on("tap","li",foo_2);//點擊li時，執行foo_2函數
function foo_1(){console.log("foo_1 execute");}
function foo_2(){console.log("foo_2 execute");}
// 第一種：off(event,selector,handle)適用於取消對應選擇器上特定事件所執行的特定回調，例如：
mui("#list").off("tap","li",foo_1); //點擊li時，不再執行foo_1函數，但會繼續執行foo_2函數
// 第二種：off(event,selector)適用於取消對應選擇器上特定事件的所有回調，例如：
mui("#list").off("tap","li");//點擊li時，foo_2、foo_2兩個函數均不再執行
// 第三種：off(event)適用於取消當前元素上綁定的特定事件的所有回調，例如：
mui("#list").off("tap");//點擊li時，不再執行foo_1函數；點擊p時，也不再執行foo_3函數
// 第四種：off()適用於取消當前元素上綁定的所有事件回調，例如：
mui("#list").off();//點擊li時，不再執行foo_1函數；點擊p時，也不再執行foo_3函數；雙擊li時，也不再執行foo_4函數；
</script>

事件觸發：

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

<script type="text/javascript">
.trigger(element,event,data);
//element：type: Element；觸發事件的DOM元素
//event：type: String；事件名字，例如：'tap'、'swipeleft'
//data：type: Object; 需要傳遞給事件的業務參數
</script>

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

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

手勢事件：

在開發移動端的應用時，會用到很多的手勢操作，比如滑動、長按等，為了方便開放者快速集成這些手勢，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()) ；

自定義事件：僅能在5+ App及流應用中使用（因為是多webview之間傳值，故無法在手機瀏覽器、微信中使用）；

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