<!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>