MUI事件綁定

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

 

除了可以使用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' }); }) 

代碼塊激活字符: mmon

2、事件取消

使用on()方法綁定事件后，若希望取消綁定，則可以使用off()方法。 off()方法根據傳入參數的不同，有不同的實現邏輯。

（1）、.off( event , selector , handler )

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

selector：Type: String，選擇器

handler：Type: Function，之前綁定到該元素上的事件函數，不支持匿名函數

（2）、.off( event , selector)

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

selector：Type: String，選擇器

（3）、 .off( event )

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

（4）、 .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_2、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(); 

代碼塊激活字符: mmoff

   3、事件觸發

使用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返回圖標，實現關閉當前頁面的功能，該部分邏輯正在優化中

代碼塊激活字符: mtrigger

4、手勢事件

在開發移動端的應用時，會用到很多的手勢操作，比如滑動、長按等，為了方便開放者快速集成這些手勢，mui內置了常用的手勢事件，目前支持的手勢事件見如下列表：

 

 

（1）、手勢事件配置

根據使用頻率，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開關

（2）、事件監聽

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

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

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

代碼塊激活字符: minitgesture

5、自定義事件