mui---事件小結

時間 2019-11-09

標籤 mui 事件小結简体版

原文原文鏈接

給單個HTML DOM綁定事件應使用原生js的addEventListener()方法

格式：<js對象>.addEventListener('事件',<回調函數>)javascript

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

格式：<jq對象>.on('事件',<回調函數>)css

$("#button1").on('click',function  () {
      alert(2);
})

注意：html

mui('選擇器').on() 方法適合mui對象中的給多個子對象綁定事件，若是給單個對象綁定事件，不能使用java

mui('選擇器').on('事件',<回調函數>) （錯誤）web

mui('選擇器').addEventListener('事件',<回調函數>) （錯誤）函數

給多個對象綁定事件使用mui().on()方法

格式：mui('選擇器').on('事件名','選擇器',<回調函數>)ui

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

觸發自定義事件

一、window監聽自定義事件this

window.addEventListener('自定義事件名',function(e) {
    //e.detail.參數名可接受fire方法中傳來的參數;
});

二、mui.fire觸發自定義事件 url

mui.fire(webview對象,'自定義事件名',{key:value});

完整的代碼以下：spa

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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。