zoukankan      html  css  js  c++  java
  • mui---mui.fire触发自定义事件传事件对象中的参数

    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>
  • 相关阅读:
    堆和栈的区别
    九度OJ 1108 堆栈的使用
    九度OJ 1201 二叉排序树
    jQuery笔记——基础知识
    JavaScript笔记——事件
    一些知识
    JavaScript笔记——BOM的操作和浏览器的检测
    JavaScript笔记——面向对象与原型
    JavaScript笔记——基础知识(二)
    JavaScript笔记——正则表达式
  • 原文地址:https://www.cnblogs.com/beast-king/p/9113630.html
Copyright © 2011-2022 走看看