Mui --- 事件管理及自定义事件详解

<!doctype html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
        <link href="css/mui.min.css" rel="stylesheet" />
        <script src="js/mui.min.js"></script>
        <script type="text/javascript">
            mui.init()
            mui.plusReady(function(){
                //addEventListener 有两个参数，一个是你要做是什么（事件），二是具体的操作
                document.getElementById('btn1').addEventListener('tap',function(){
                    mui.toast('Ok');
                });
                
                //on元素批量绑定事件
                mui('#list1').on('tap','li',function(){
                    //mui.toast('Ok');
                    //获取点击的内容
                    //这个this代表点击那个li
                    mui.toast(this.innerHTML);
                });
                
                //off去掉事件
                mui('#list1').off('tap','li');
                
                 
                
            });
            
            
        </script>
    </head>

    <body>
        <div class="mui-content">
            <button id="btn1" type="button" class="mui-btn mui-btn-blue mui-btn-block">按钮</button>
            <ul class="mui-table-view" id="list1">
                <li class="mui-table-view-cell">1</li>
                <li class="mui-table-view-cell">2</li>
                <li class="mui-table-view-cell">3</li>
                <li class="mui-table-view-cell">4</li>
                <li class="mui-table-view-cell">5</li>
            </ul>
        </div>
    </body>

</html>

    <script type="text/javascript">
            mui.init()
            mui.plusReady(function(){
                 //如果用mui给btn绑定事件，这样是不行的
//                 mui('#btn1').addEventListener('tap',function(){
//                     mui.toast('ok');
//                 })
                //必须要用
                document.getElementById('btn1').addEventListener('tap',function(){
                    mui.toast('ok');
                });
            });
            
            
        </script>
    </head>

事件触发

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

<!doctype html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
        <link href="css/mui.min.css" rel="stylesheet" />
        <script src="js/mui.min.js"></script>
        <script type="text/javascript">
            mui.init()
            mui.plusReady(function(){
                document.getElementById('btn1').addEventListener('tap',function(){
                    mui.toast('OK');
                });
                
                //获取按钮对象
                  var btns = document.getElementById('btn1');
                  //模拟点击事件
                  mui.trigger(btns,'tap');
            });
            
            //页面加载完后就会自动执行tap点击事件
        </script>
    </head>

    <body>
        <div class="mui-content">
            <button id="btn1" type="button" class="mui-btn mui-btn-blue mui-btn-block">按钮</button>
             
        </div>
    </body>

</html>

手势事件

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

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

自定义事件

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

//子页面处理方式
window.addEventListener('customEvent',function(event){mui.toast('ok');});

完整例子：

主页面

<!doctype html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
        <link href="css/mui.min.css" rel="stylesheet" />
        <script src="js/mui.min.js"></script>
        <script type="text/javascript">
            mui.init()
            mui.plusReady(function() {

                //1、进行预加载
                var prpage = mui.preload({ url: 'info.html', id: 'info.html' }); //预加载方法

                //使用on方法统一绑定tap事件
                mui('#list1').on('tap','a', function() {
                    //myEvent自定义事件
                    mui.fire(prpage,'myEvent',{'title':this.innerHTML,'id':this.getAttribute('id')});//这里传递是li中的文字
                    mui.openWindow({url:'info.html',id:'info.html'});
                });
            });
        </script>
    </head>

    <body>
        <div class="mui-content">
            <ul class="mui-table-view" id="list1">
                <li class="mui-table-view-cell">
                    <a class="mui-navigate-right" id="1">
                        Item 1
                    </a>
                </li>
                <li class="mui-table-view-cell">
                    <a class="mui-navigate-right" id="2">
                        Item 2
                    </a>
                </li>
                <li class="mui-table-view-cell">
                    <a class="mui-navigate-right" id="3">
                        Item 3
                    </a>
                </li>
            </ul>

        </div>
    </body>

</html>

子页面

<!doctype html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
        <link href="css/mui.min.css" rel="stylesheet" />
        <script src="js/mui.min.js"></script>
        <script type="text/javascript">
            mui.init()
            mui.plusReady(function(){
                //myEvent是自定义的事件
                //e任性写的，是一个传递过来对象
                window.addEventListener('myEvent',function(e){
                    var title1 = mui('#title1');
                    title1[0].innerHTML = e.detail.title;
                    mui.toast(e.detail.id);
                })
            })
        </script>
    </head>

    <body>
        <header class="mui-bar mui-bar-nav">
            <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
            <h1 id="title1" class="mui-title">标题</h1>
        </header>
        
    </body>

</html>