Mui --- 事件管理及自定义事件详解
<!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" />
<script src="js/mui.min.js"></script>
<script type="text/javascript">
mui.init()
mui.plusReady(function(){
//addEventListener 有两个参数，一个是你要做是什么（事件），二是具体的操作
document.getElementById('btn1').addEventListener('tap',function(){
mui.toast('Ok');
});
//on元素批量绑定事件
mui('#list1').on('tap','li',function(){
//mui.toast('Ok');
//获取点击的内容
//这个this代表点击那个li
mui.toast(this.innerHTML);
});
//off去掉事件
mui('#list1').off('tap','li');
});
</script>
</head>
<body>
<div class="mui-content">
<button id="btn1" type="button" class="mui-btn mui-btn-blue mui-btn-block">按钮</button>
<ul class="mui-table-view" id="list1">
<li class="mui-table-view-cell">1</li>
<li class="mui-table-view-cell">2</li>
<li class="mui-table-view-cell">3</li>
<li class="mui-table-view-cell">4</li>
<li class="mui-table-view-cell">5</li>
</ul>
</div>
</body>
</html>
<script type="text/javascript"> mui.init() mui.plusReady(function(){ //如果用mui给btn绑定事件，这样是不行的 // mui('#btn1').addEventListener('tap',function(){ // mui.toast('ok'); // }) //必须要用 document.getElementById('btn1').addEventListener('tap',function(){ mui.toast('ok'); }); }); </script> </head>
事件触发
使用mui.trigger()方法可以动态触发特定的Dom元素上的事件
<!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" />
<script src="js/mui.min.js"></script>
<script type="text/javascript">
mui.init()
mui.plusReady(function(){
document.getElementById('btn1').addEventListener('tap',function(){
mui.toast('OK');
});
//获取按钮对象
var btns = document.getElementById('btn1');
//模拟点击事件
mui.trigger(btns,'tap');
});
//页面加载完后就会自动执行tap点击事件
</script>
</head>
<body>
<div class="mui-content">
<button id="btn1" type="button" class="mui-btn mui-btn-blue mui-btn-block">按钮</button>
</div>
</body>
</html>
手势事件
在开发移动端的应用时，会用到很多的手势操作，比如滑动、长按等，为了方便开放者快速集成这些手势，mui内置了常用的手势事件，目前支持的手势事件见如下列表：
点击
tap 单击屏幕
doubletap 双击屏幕
长按
longtap 长按屏幕
hold 按住屏幕
release 离开屏幕
滑动
swipeleft 向左滑动
swiperight 向右滑动
swipeup 向上滑动
swipedown 向下滑动
拖动
dragstart 开始拖动
drag 拖动中
dragend 拖动结束
自定义事件
在App开发中，经常会遇到页面间传值的需求，比如从新闻列表页进入详情页，需要将新闻id传递过去； Html5Plus规范设计了evalJS方法来解决该问题； 但evalJS方法仅接收字符串参数，涉及多个参数时，需要开发人员手动拼字符串； 为简化开发，mui框架在evalJS方法的基础上，封装了自定义事件，通过自定义事件，用户可以轻松实现多webview间数据传递。
添加自定义事件监听操作和标准js事件监听类似，可直接通过window对象添加，如下：
//子页面处理方式
window.addEventListener('customEvent',function(event){mui.toast('ok');});
完整例子：
主页面
<!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" />
<script src="js/mui.min.js"></script>
<script type="text/javascript">
mui.init()
mui.plusReady(function() {
//1、进行预加载
var prpage = mui.preload({ url: 'info.html', id: 'info.html' }); //预加载方法
//使用on方法统一绑定tap事件
mui('#list1').on('tap','a', function() {
//myEvent自定义事件
mui.fire(prpage,'myEvent',{'title':this.innerHTML,'id':this.getAttribute('id')});//这里传递是li中的文字
mui.openWindow({url:'info.html',id:'info.html'});
});
});
</script>
</head>
<body>
<div class="mui-content">
<ul class="mui-table-view" id="list1">
<li class="mui-table-view-cell">
<a class="mui-navigate-right" id="1">
Item 1
</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right" id="2">
Item 2
</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right" id="3">
Item 3
</a>
</li>
</ul>
</div>
</body>
</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" />
<script src="js/mui.min.js"></script>
<script type="text/javascript">
mui.init()
mui.plusReady(function(){
//myEvent是自定义的事件
//e任性写的，是一个传递过来对象
window.addEventListener('myEvent',function(e){
var title1 = mui('#title1');
title1[0].innerHTML = e.detail.title;
mui.toast(e.detail.id);
})
})
</script>
</head>
<body>
<header class="mui-bar mui-bar-nav">
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
<h1 id="title1" class="mui-title">标题</h1>
</header>
</body>
</html>
浙公网安备 33010602011771号