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>
  • 相关阅读:
    常用数据结构的应用场景
    数组与链表的对比
    [LeetCode 293] Flip Game
    [Leetcode] Palindrome Permutation 回文变换
    九大排序算法再总结
    query函数的可查询数据
    Column常用的参数
    sqlalchemy的常用字段
    sqlalchemy基本的增删改查
    sqlalchemy映射数据库
  • 原文地址:https://www.cnblogs.com/beast-king/p/9113630.html
Copyright © 2011-2022 走看看