mui---事件小结

92 阅读 0 评论 61 点赞

我是靠谱客的博主粗犷小海豚，最近开发中收集的这篇文章主要介绍mui---事件小结，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

给单个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>