码迷,mamicode.com
首页 > 其他好文 > 详细

mui---事件小结

时间:2018-08-04 11:49:20      阅读:146      评论:0      收藏:0      [点我收藏+]

标签:type   mini   scale   绑定   ref   open   detail   监听   table   

给单个HTML DOM绑定事件应使用原生js的addEventListener()方法

格式:<js对象>.addEventListener(‘事件‘,<回调函数>)

document.getElementById("button1").addEventListener(‘tap‘,function() {
    //...
})

给多个对象绑定事件使用mui().on()方法

格式:mui(‘选择器‘).on(‘事件名‘,‘选择器‘,<回调函数>)

mui(".mui-table-view").on(‘tap‘,‘a‘,function(){
    //...
})

触发自定义事件

1、window监听自定义事件

window.addEventListener(‘自定义事件名‘,function(e) {
    //e.detail.参数名可接受fire方法中传来的参数;
});

2、mui.fire触发自定义事件 

mui.fire(webview对象,‘自定义事件名‘,{key:value});

完整的代码如下:

a.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" />
    </head>

    <body>
        <div id="div1">类型</div>
        <button id="button1" type="button" class="mui-btn mui-btn-blue">选择</button>
        <script src="js/mui.min.js"></script>
        <script type="text/javascript">
            mui.init();
            
            document.getElementById("button1").addEventListener(tap,function() {
                mui.openWindow({
                    url:b.html,
                    id:b.html,
                    extras:{
                        pid:a
                    }//这整个的都属于b这个webview
                })
            })
            window.addEventListener(getProductType,function(e) {
                console.log(myevent);
                document.getElementById("div1").innerText=e.detail.productType;
            });
        </script>
    </body>

</html>

b.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" />
    </head>

    <body>
        <ul class="mui-table-view">
                <li class="mui-table-view-cell">
                    <a class="mui-navigate-right">
                        白酒
                    </a>
                </li>
                <li class="mui-table-view-cell">
                    <a class="mui-navigate-right">
                        啤酒
                    </a>
                </li>
                <li class="mui-table-view-cell">
                    <a class="mui-navigate-right">
                         红酒
                    </a>
                </li>
            </ul>
        <script src="js/mui.min.js"></script>
        <script type="text/javascript">
            mui.init();
            mui.plusReady(function() {
                mui(".mui-table-view").on(tap,a,function(){
                    var mainView=plus.webview.currentWebview().opener();
                    console.log(plus.webview.currentWebview().pid);
                    mui.fire(mainView,getProductType,{productType:this.innerText});
                    mui.back();
                });
            })
        </script>
    </body>

</html>

 

mui---事件小结

标签:type   mini   scale   绑定   ref   open   detail   监听   table   

原文地址:https://www.cnblogs.com/beast-king/p/9417316.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!