mui---事件小结
Posted beast-king
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了mui---事件小结相关的知识,希望对你有一定的参考价值。
给单个html DOM绑定事件应使用原生js的addEventListener()方法
格式:<js对象>.addEventListener(‘事件‘,<回调函数>)
document.getElementById("button1").addEventListener(‘tap‘,function() { //... })
给多个对象绑定事件使用mui().on()方法
格式:mui(‘选择器‘).on(‘事件名‘,‘选择器‘,<回调函数>)
mui(".mui-table-view").on(‘tap‘,‘a‘,function(){ //... })
触发自定义事件
1、window监听自定义事件
window.addEventListener(‘自定义事件名‘,function(e) { //e.detail.参数名可接受fire方法中传来的参数; });
2、mui.fire触发自定义事件
mui.fire(webview对象,‘自定义事件名‘,{key:value});
完整的代码如下:
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>
以上是关于mui---事件小结的主要内容,如果未能解决你的问题,请参考以下文章