事件管理

事件綁定

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

  .on(event,selector,handler)
  
    event
    Type:String
    選擇器
  
    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
    需取消綁定的事件名稱，例如：'top'
  
    selector
    Type:String
    選擇器
  
    handler
    Type:Function
    以前綁定到該元素上的事件函數，不支持匿名函數

• 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)
event
Type:String
需取消綁定的事件名稱，例如：'top'

selector
Type:String
選擇器

• 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)

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

• 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()
空參數，刪除該元素上全部事件

• 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內置了經常使用的手勢事件，目前支持的手勢事件見以下列表：

  分類                    參數                    描  述
    點擊                 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
  
    event
    Type:String
    自定義事件名稱
  
    data
    Type:JSON
    json格式的數據