一 事件绑定监听

1 事件绑定的方法：

除了可以使用addEventListener()方法监听某个特定元素上的事件外， 也可以使用.on()方法实现批量元素的事件绑定。

2 事件绑定示例：

点击图片轮播，获取当前轮播项元素的data-id执行bookDetails(res)方法，跳转到对应的小说详情页。

  1. //点击进入图书信息详情页
  2. mui('.mui-slider').on('tap','.mui-slider-item',function(){
  3.     bookDetails(this);
  4. });
  6. /*
  7.  * 点击打开图书信息页面
  8.  */
  9. function bookDetails(res){
  10.     var bookid = res.getAttribute('data-id');
  11.     //非plus环境，直接走href跳转
  12.     if(!mui.os.plus) {
  13.         location.href = 'details.html?id='+bookid;
  14.         return;
  15.     }
  16.     //plus环境，APP环境下执行……
  17. }

3 事件绑定及监听对比

1.单击事件绑定
单击Class类名为’bot’元素下的不同id响应不同的事件

  1. //单击
  2. mui('.bot').on('tap','#fontSizePlus',function(){
  3.     fontSizePlus();
  4. });
  5. mui('.bot').on('tap','#fontSizeMinus',function(){
  6.     fontSizeMinus();
  7. });

2.单击事件监听
addEventListener监听Class类名为’bot’元素下的不同id被单击时响应不同的事件

  1. document.getElementById('fontSizePlus').addEventListener('tap', function() {
  2.     fontSizePlus();
  3. });
  4. document.getElementById('fontSizeMinus').addEventListener('tap', function() {
  5.     fontSizeMinus();
  6. });

二 手势事件

在开发移动端的应用时，会用到很多的手势操作，比如滑动、长按等，为了方便开放者快速集成这些手势，mui内置了常用的手势事件，详见官网API(http://dev.dcloud.net.cn/mui/event/#gesture )。

1 目前支持的手势事件见如下列表：

分类 参数 描述
点击 tap 单击屏幕
doubletap 双击屏幕
长按 longtap 长按屏幕
hold 按住屏幕
release 离开屏幕
滑动 swipeleft 向左滑动
swiperight 向右滑动
swipeup 向上滑动
swipedown 向下滑动
拖动 dragstart 开始拖动
drag 拖动中
dragend 拖动结束

2 手势事件配置

根据使用频率，mui默认会监听部分手势事件，如点击、滑动事件；为了开发出更高性能的moble App，mui支持用户根据实际业务需求，通过mui.init方法中的gestureConfig参数，配置具体需要监听的手势事件。

  1. mui.init({
  2.   gestureConfig:{
  3.    tap: true, //默认为true
  4.    doubletap: true, //默认为false
  5.    longtap: true, //默认为false
  6.    swipe: true, //默认为true
  7.    drag: true, //默认为true
  8.    hold:false,//默认为false，不监听
  9.    release:false//默认为false，不监听
  10.   }
  11. });

注意:dragstart、drag、dragend共用drag开关，swipeleft、swiperight、swipeup、swipedown共用swipe开关