给单个HTML DOM绑定事件应使用原生js的addEventListener()方法
格式：<js对象>.addEventListener('事件',<回调函数>)
document.getElementById("button1").addEventListener('tap',function() {
//...
})
格式：<jq对象>.on('事件',<回调函数>)
$("#button1").on('click',function () {
alert(2);
})
注意：
mui('选择器').on() 方法适合mui对象中的给多个子对象绑定事件，如果给单个对象绑定事件，不能使用
mui('选择器').on('事件',<回调函数>) （错误）
mui('选择器').addEventListener('事件',<回调函数>) （错误）
给多个对象绑定事件使用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>