事件管理

事件绑定

• 除了可使用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格式的数据