MUI开发指南mui事件处理

Posted 2020-10-10

http://dev.dcloud.net.cn/mui/event/

1》在元素属性上添加onclick事件
<div class="mui-content">
    <button class="mui-btn-blue" type="button" onclick="mshow();"></button>
</div>

function mshow() {
    console.log(‘xxxx‘);
    mui.toast(‘OK‘);
}
           
2》addEventListener()方法监听某个特定元素上的事件   
mui.plusReady(function() {
    document.getElementById(‘btn1‘).addEventListener(‘tap‘, function() {
        mui.toast(‘测试‘);
    });
});

3》使用.on()方法实现批量元素的事件绑定。

4》事件取消使用on()方法绑定事件后，若希望取消绑定，则可以使用off()方法。off()方法根据传入参数的不同，有不同的实现逻辑。

5》trigger
var btn1 = document.getElementById(‘btn1‘);
mui.trigger(btn1, ‘tap‘);

6》自定义事件 mui.fire()
在App开发中，经常会遇到页面间传值的需求，比如从新闻列表页进入详情页，需要将新闻id传递过去； html5Plus规范设计了evalJS方法来解决该问题； 但evalJS方法仅接收字符串参数，涉及多个参数时，需要开发人员手动拼字符串； 为简化开发，mui框架在evalJS方法的基础上，封装了自定义事件，通过自定义事件，用户可以轻松实现多webview间数据传递。

<div class="mui-content">
    <ul id="lists" class="mui-table-view">
        <li class="mui-table-view-cell">新闻1</li>
        <li class="mui-table-view-cell">新闻2</li>
        <li class="mui-table-view-cell">新闻3</li>
    </ul>
</div>

mui.plusReady(function() {
            var detailPage = mui.preload({
                url: ‘ws3.html‘,
                id: ‘ws3.html‘
            });
            mui(‘#lists‘).on(‘tap‘, ‘li‘, function(e) {
                mui.fire(detailPage, ‘newsEvent‘, {
                    ‘title‘: this.innerHTML
                });
                mui.openWindow({
                    url: ‘ws3.html‘,
                    id: ‘ws3.html‘
                });
            });
});

 

<header class="mui-bar mui-bar-nav">
    <h1 id="title1" class="mui-title">WS3</h1>
</header>

mui.init();
mui.plusReady(function() {
    window.addEventListener(‘newsEvent‘, function(e) {
        var title = mui(‘#title1‘);
        console.log(title);
        title[0].innerHTML = e.detail.title;
    });
});