HTML应用开发基础篇 - MUI 框架（三）MUI 事件与窗口管理

本文链接：https://blog.csdn.net/qq_43305922/article/details/105314116

1、事件

1、事件

MUI 内置了常用的手势事件，具体如下表：

事件绑定方法：

(1) 选择器.addEventListener(“event”,function) ；(2) mui(选择器).on() ：可实现批量元素的事件绑定，参数：.on( event , selector , handler ) 。

自定义事件：

监听自定义事件

window.addEventListener('customEvent',function(event){

     //通过event.detail可获得传递过来的参数内容

});

触发自定义事件： mui.fire( target , event , {data} ) ，target:需传值的目标webview 。

见一个例子：

<!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>
		<script src="js/mui.min.js"></script>
		<script type="text/javascript">
			mui.init()
		</script>
		<header class="mui-bar mui-bar-nav">
		    <h1 class="mui-title">事件</h1>
		</header>
		<div class="mui-content">
		    <ul class="mui-table-view" id="ul">
		            <li class="mui-table-view-cell">
		                <a class="mui-navigate-right">
		                    Item 1
		                </a>
		            </li>
		            <li class="mui-table-view-cell">
		                <a class="mui-navigate-right">
		                     Item 2
		                </a>
		            </li>
		            <li class="mui-table-view-cell">
		                <a class="mui-navigate-right">
		                     Item 3
		                </a>
		            </li>
		        </ul>
		        <button id="btn" type="button" class="mui-btn mui-btn-blue">消息发送</button>
		</div>
		<script type="text/javascript">
			mui("#ul").on("tap","li a",function(){				
				alert(this.innerHTML);
			});			
			//自定义事件过程
			mui.plusReady(function(){
				document.getElementById("btn").addEventListener("tap",function(){
					var currW=plus.webview.currentWebview(); //当前窗体对象
					mui.fire(currW,"tempEvt",{id:"007",name:"syl"});
				});
				
				window.addEventListener("tempEvt",function(evt){
					alert(evt.detail.name);
				});
			});	
		</script>
	</body>

</html>

效果图就不放了，毕竟是手势事件，执行后才能看到效果。