MUI：事件管理（二）

1、事件触发
使用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’);
2、手势事件
在开发移动端的应用时，会用到很多的手势操作，比如滑动、长按等，为了方便开放者快速集成这些手势，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，不监听
}
});
window.addEventListener(‘dragstart’,function(event){//拖动时触发事件
if($(".searchText").is(":visible")){
$(".searchText").hide(“1000”);
$(".gray").attr(“src”, “…/img/ss.png”);
$(".gray").css({
“width”: ‘7px’,
“margin”: ‘0 12px’
});
}
});
注意:dragstart、drag、dragend共用drag开关，swipeleft、swiperight、swipeup、swipedown共用swipe开关
事件监听
单个元素上的事件监听，直接使用addEventListener()即可，如下：
elem.addEventListener(“swipeleft”,function(){
console.log(“你正在向左滑动”);
});
mui(".mui-bar-tab").on(“tap”,“a”,function(e){
var page = this.getAttribute(“href”);
plus.webview.show(page, “fade-in”, 100);
})
表示通过css选择器找到 (".mui-bar-tab"). 相关的dom对象，然后呢，对于里面的a标签，一旦点击，就执行下面的操作——获取相关的href，然后渐变的显示。
若多个元素执行相同逻辑，则建议使用事件绑定(on())。