MUI事件管理

2022-04-06 10:18:02 字數 2112 閱讀 1673

模組:事件管理

事件繫結

除了可以使用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

());

//開啟新聞詳情

mui.openwindow();

})

事件取消

使用on()方法繫結事件後,若希望取消繫結,則可以使用off()方法。 off()方法根據傳入引數的不同,有不同的實現邏輯。

.off(event,select,handler);

.off(event,select);

.off(event);

.off();

//空引數,刪除該元素上所有事件

//event: type:string,需取消繫結的事件名稱,例如:'tap';

//select:type:string,選擇器

//handler:type:function()之前繫結到該元素上的事件函式,不支援匿名函式

具體示例:

事件觸發

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

示例:自動觸發按鈕的點選事件

var btn = document.getelementbyid("submit");

//監聽點選事件

btn.addeventlistener("tap",function

() );

//觸發submit按鈕的點選事件

mui.trigger(btn,'tap');

手勢事件

在開發移動端的應用時,會用到很多的手勢操作,比如滑動、長按等,為了方便開放者快速整合這些手勢,mui內建了常用的手勢事件,目前支援的手勢事件見如下列表:

分類引數

描述點選

tap單擊螢幕

doubletap

雙擊螢幕

長按longtap

長按螢幕

hold

按住螢幕

release

離開螢幕

滑動swipeleft

向左滑動

swiperight

向右滑動

swipeup

向上滑動

swipedown

向下滑動

拖動dragstart

開始拖動

drag

拖動中dragend

拖動結束

手勢事件配置

mui.init(

});

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

事件監聽

單個元素上的事件監聽,直接使用addeventlistener()即可,如下:

elem.addeventlistener("swipeleft",function

());

若多個元素執行相同邏輯,則建議使用事件繫結(on()) ;

mui和zepto的tap事件

zepto.js和mui一起使用的時候,tap事件會發生兩次,這時只要不引用zepto.js的touch.js就可以了,只用mui的tap事件 b5教程網 1.zepto.js和mui一起使用的時候,tap事件會發生兩次,這時只要不引用zepto.js的touch.js就可以了,只用mui的tap事...

mui自定義事件例項

新增自定義事件監聽操作和標準js事件監聽類似,可直接通過window物件新增,如下 window.addeventlistener customevent function event 觸發自定義事件 傳參頁面應用 通過mui.fire 方法可觸發目標視窗的自定義事件 引數target type w...

MUI自定義事件傳參

在mui中頁面之間的傳參一般是分為兩種的,一種是通過開啟頁面或者預載入頁面的時候傳遞引數,另一種就是自定義事件了,我們來說說自定義事件傳參的問題 我們來分兩種情況 一,頁面已經存在的時候 這種情況是很容易的,直接就是mui.fire 目標頁面,事件名稱,二,頁面是新建立的 如果你是這麼寫的話 var...