mui---mui.fire触发自定义事件传事件对象中的参数

时间：2021-09-19 09:42:55

fire_event_send_page.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>
        <button id="btn_send" type="button" class="mui-btn mui-badge-danger">使用mui.fire触发自定义事件传递参数</button>
        <script src="js/mui.min.js"></script>
        <script type="text/javascript">
            mui.init();
            var ws=null;
            mui.plusReady(function  () {
                ws=plus.webview.create('fire_event_recieve_page.html','fire_event_recieve_page');
            });
            document.getElementById("btn_send").addEventListener('tap',function() {
                //'my_event'是自定义事件名称，name是事件参数 ,监听事件中回调用函数可用event.detail.name获取
                mui.fire(ws,'my_event',{name:'zyz'});
                ws.show();
            });
        </script>
    </body>

</html>

 

fire_event_recieve_page.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>
        <script src="js/mui.min.js"></script>
        <script type="text/javascript">
            mui.init();
            //监听事件my_event
            window.addEventListener('my_event',function(event) {
                //event是事件对象，可以得到触发时的事件参数
                document.getElementById("div1").innerText='hi,'+event.detail.name;
            })
        </script>
    </body>

</html>

 

标签：

相关文章