十四.MUI

1、事件绑定
可以使用addEventListener()方法监听某个特定元素上的事件外， 也可以使用.on()方法实现批量元素的事件绑定。
addEventListener示例（单个元素事件绑定）：

mui.plusReady(function(){    document.getElementById('but1').addEventListener('tap',function(){alert(1);    });});

on()示例，适用于批量元素绑定。演示代码：

<div class="mui-content">  <ul id="list1">    <li>小明</li>    <li>小花</li>    <li>小萌</li>  </ul></div></body><script type="text/javascript">mui.plusReady(function(){  mui('#list1').on('tap', 'li', function(){    var thisHtml = this.innerHTML;    alert(thisHtml);  });});</script>

2、事件取消
使用on()方法绑定事件后，若希望取消绑定，则可以使用off()方法。

mui('#list1').off('tap', 'li');

3、事件触发
使用mui.trigger()方法可以动态触发特定DOM元素上的事件。

var btn = document.getElementById("submit");//监听点击事件btn.addEventListener("tap",function () {console.log("tap event trigger");});//触发submit按钮的点击事件mui.trigger(btn,'tap');

4、手势事件
在开发移动端的应用时，会用到很多的手势操作，比如滑动、长按等，为了方便开放者快速集成这些手势，mui内置了常用的手势事件，目前支持的手势事件见如下列表：

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

5、自定义事件
在App开发中，经常会遇到页面间传值的需求，比如从新闻列表页进入详情页，需要将新闻id传递过去； Html5Plus规范设计了evalJS方法来解决该问题； 但evalJS方法仅接收字符串参数，涉及多个参数时，需要开发人员手动拼字符串； 为简化开发，mui框架在evalJS方法的基础上，封装了自定义事件，通过自定义事件，用户可以轻松实现多webview间数据传递。
添加自定义事件监听操作和标准js事件监听类似，可直接通过window对象添加，如下：

window.addEventListener('customEvent',function(event){mui.toast('ok');});

6、触发自定义事件
通过mui.fire()方法可触发目标窗口的自定义事件：
参数

targetType: WebviewObject需传值的目标webvieweventType: String自定义事件名称dataType: JSONjson格式的数据

自定义事件完整例子
主页面:

<div class="mui-content">  <ul id="list1">    <li id="1">新闻1</li>    <li id="2">新闻2</li>    <li id="3">新闻3</li>  </ul></div></body><script type="text/javascript">mui.init();mui.plusReady(function(){  var detailPage = mui.preload({url:'sub.html',id:'sub.html'});  mui('#list1').on('tap', 'li', function(e){    mui.fire(detailPage,'newsId',{id:this.getAttribute('id')});    mui.openWindow({id:'sub.html'});  });});</script>

子页面

mui.plusReady(function(){    window.addEventListener('newsId',function(event){        console.log(event.detail.id);    });});