> > 12 MUI – 事件管理及自定义事件详解
gebilaowang

12 MUI – 事件管理及自定义事件详解

12 MUI – 事件管理及自定义事件详解

袄常腐杆环卫讲繁叛狡娜伎岔

参考文档

12 MUI - 事件管理及自定义事件详解第1张

12 MUI - 事件管理及自定义事件详解第2张

12 MUI - 事件管理及自定义事件详解第3张

12 MUI - 事件管理及自定义事件详解第4张

12 MUI - 事件管理及自定义事件详解第5张

12 MUI - 事件管理及自定义事件详解第6张

12 MUI - 事件管理及自定义事件详解第7张

12 MUI - 事件管理及自定义事件详解第8张

实际操作

1.原始的点击事件 

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title></title>
    <script src="js/mui.min.js"></script>
    <link href="css/mui.min.css" rel="stylesheet"/>
    <script type="text/javascript" charset="utf-8">
      	mui.init();
    </script>
</head>
<body>
	<div class="mui-content">
		<button type="button" onclick="mshow()">测试</button>
	</div>
	<script type="text/javascript">
		function mshow()
		{
			mui.toast('ok');
		}
	</script>
</body>
</html>

点击按钮

12 MUI - 事件管理及自定义事件详解第9张

2.事件绑定，进行点击事件的监听（推荐使用这种方式） 

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title></title>
    <script src="js/mui.min.js"></script>
    <link href="css/mui.min.css" rel="stylesheet"/>
    <script type="text/javascript" charset="utf-8">
      	mui.init();
    </script>
</head>
<body>
	<div class="mui-content">
		<button type="button" id="btn1">测试</button>
	</div>
	<script type="text/javascript">
		mui.plusReady(function(){//这个函数只有真机或者模拟器才生效
			//监听点击事件
			document.getElementById('btn1').addEventListener('tap',function(){
				mui.toast("ok");
			});
		});
	</script>
</body>
</html>

执行：

12 MUI - 事件管理及自定义事件详解第9张

on()方法，批量元素绑定

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title></title>
    <script src="js/mui.min.js"></script>
    <link href="css/mui.min.css" rel="stylesheet"/>
    <script type="text/javascript" charset="utf-8">
      	mui.init();
    </script>
</head>
<body>
	<div class="mui-content">
		<ul class="mui-table-view">
			<li class="mui-table-view-cell">Item 1</li>
			<li class="mui-table-view-cell">Item 2</li>
			<li class="mui-table-view-cell">Item 3</li>
		</ul>
	</div>
	<script type="text/javascript">
		mui.plusReady(function(){//这个函数只有真机或者模拟器才生效

		});
	</script>
</body>
</html>

执行：

12 MUI - 事件管理及自定义事件详解第11张

批量绑定点击事件 

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title></title>
    <script src="js/mui.min.js"></script>
    <link href="css/mui.min.css" rel="stylesheet"/>
    <script type="text/javascript" charset="utf-8">
      	mui.init();
    </script>
</head>
<body>
	<div class="mui-content">
		<ul class="mui-table-view" id="lists">
			<li class="mui-table-view-cell">Item 1</li>
			<li class="mui-table-view-cell">Item 2</li>
			<li class="mui-table-view-cell">Item 3</li>
		</ul>
	</div>
	<script type="text/javascript">
		mui.plusReady(function(){//这个函数只有真机或者模拟器才生效
			//先选中父元素,再选择子元素的点击事件即可
			mui("#lists").on('tap','li',function(){
				mui.toast("ok");
			});
		});
	</script>
</body>
</html>

执行，点击任意一个item都会弹出ok：

12 MUI - 事件管理及自定义事件详解第12张

点击某个元素就显示某个元素的内容 

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title></title>
    <script src="js/mui.min.js"></script>
    <link href="css/mui.min.css" rel="stylesheet"/>
    <script type="text/javascript" charset="utf-8">
      	mui.init();
    </script>
</head>
<body>
	<div class="mui-content">
		<ul class="mui-table-view" id="lists">
			<li class="mui-table-view-cell">Item 1</li>
			<li class="mui-table-view-cell">Item 2</li>
			<li class="mui-table-view-cell">Item 3</li>
		</ul>
	</div>
	<script type="text/javascript">
		mui.plusReady(function(){//这个函数只有真机或者模拟器才生效
			//先选中父元素,再选择子元素的点击事件即可
			mui("#lists").on('tap','li',function(){
				mui.toast(this.innerHTML);
			});
		});
	</script>
</body>
</html>

执行：

12 MUI - 事件管理及自定义事件详解第13张

2、事件取消
使用on()方法绑定事件后，若希望取消绑定，则可以使用off()方法。

使用场景，某些按钮只允许点击一次，下次不允许再点击时使用。

3、事件触发
使用mui.trigger()方法可以动态触发特定DOM元素上的事件。 

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title></title>
    <script src="js/mui.min.js"></script>
    <link href="css/mui.min.css" rel="stylesheet"/>
    <script type="text/javascript" charset="utf-8">
      	mui.init();
    </script>
</head>
<body>
	<div class="mui-content">
		<button type="button" id="btn1">点击这里</button>
	</div>
	<script type="text/javascript">
		mui.plusReady(function(){
			document.getElementById('btn1').addEventListener('tap',function(){
				mui.toast("ok");
			});
		});
	</script>
</body>
</html>

执行：

12 MUI - 事件管理及自定义事件详解第14张

mui.trigger()方法可以动态触发特定DOM元素上的事件

即模拟点击事件 

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title></title>
    <script src="js/mui.min.js"></script>
    <link href="css/mui.min.css" rel="stylesheet"/>
    <script type="text/javascript" charset="utf-8">
      	mui.init();
    </script>
</head>
<body>
	<div class="mui-content">
		<button type="button" id="btn1">点击这里</button>
	</div>
	<script type="text/javascript">
		mui.plusReady(function(){
			document.getElementById('btn1').addEventListener('tap',function(){
				mui.toast("ok");
			});
			var btn=document.getElementById('btn1');
			mui.trigger(btn,'tap'); 
		});
	</script>
</body>
</html>

执行，此时点击，仍然弹出ok,这就是mui.trigger模拟的点击事件

12 MUI - 事件管理及自定义事件详解第14张

除了可以模拟单击，还可以模拟双击，长按，滑动等等操作，只需要将tap换为相应的英文即可

自定义事件

index.html 

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title></title>
    <script src="js/mui.min.js"></script>
    <link href="css/mui.min.css" rel="stylesheet"/>
    <script type="text/javascript" charset="utf-8">
      	mui.init();
    </script>
</head>
<body>
	<div class="mui-content">
		<ul class="mui-table-view" id="lists">
			<li class="mui-table-view-cell">新闻1</li>
			<li class="mui-table-view-cell">新闻2</li>
			<li class="mui-table-view-cell">新闻3</li>
		</ul>
	</div>
	<script type="text/javascript">
		mui.plusReady(function(){
			
		});
	</script>
</body>
</html>

执行：

12 MUI - 事件管理及自定义事件详解第16张

目标：点击新闻标题，打开新界面跳转到新闻详情页面

info.html

12 MUI - 事件管理及自定义事件详解第17张 

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title></title>
    <script src="js/mui.min.js"></script>
    <link href="css/mui.min.css" rel="stylesheet"/>
    <script type="text/javascript" charset="utf-8">
      	mui.init();
    </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 class="mui-title"></h1>
	</header>
	<div class="mui-content">
		
	</div>
</body>
</html>

index.html 

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title></title>
    <script src="js/mui.min.js"></script>
    <link href="css/mui.min.css" rel="stylesheet"/>
    <script type="text/javascript" charset="utf-8">
      	mui.init();
    </script>
</head>
<body>
	<div class="mui-content">
		<ul class="mui-table-view" id="lists">
			<li class="mui-table-view-cell">新闻1</li>
			<li class="mui-table-view-cell">新闻2</li>
			<li class="mui-table-view-cell">新闻3</li>
		</ul>
	</div>
	<script type="text/javascript">
		mui.plusReady(function(){
			//1.进行预加载
			var prPage=mui.preload({url:'info.html',id:'info.html'});
			//2.监听点击事件
			mui("#lists").on('tap','li',function(){
				mui.fire(prPage,'newsinfoEvent',{'title':this.innerHTML});
				mui.openWindow({url:'info.html',id:'info.html'});
			});
		});
	</script>
</body>
</html>

执行，此时点击列表能够跳转到info.html界面

12 MUI - 事件管理及自定义事件详解第18张

12 MUI - 事件管理及自定义事件详解第19张

在info.html监听自定义的事件 

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title></title>
    <script src="js/mui.min.js"></script>
    <link href="css/mui.min.css" rel="stylesheet"/>
    <script type="text/javascript" charset="utf-8">
      	mui.init();
    </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 class="mui-title" id="title1"></h1>
	</header>
	<div class="mui-content">
		
	</div>
	<script type="text/javascript">
		mui.plusReady(function(){
			window.addEventListener('newsinfoEvent',function(e){
				var title1=mui('#title1');
				title1[0].innerHTML=e.detail.title;
			});
		});
	</script>
</body>
</html>

执行

12 MUI - 事件管理及自定义事件详解第20张

12 MUI - 事件管理及自定义事件详解第21张

在传递title的同时传递id

index.html 

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title></title>
    <script src="js/mui.min.js"></script>
    <link href="css/mui.min.css" rel="stylesheet"/>
    <script type="text/javascript" charset="utf-8">
      	mui.init();
    </script>
</head>
<body>
	<div class="mui-content">
		<ul class="mui-table-view" id="lists">
			<li class="mui-table-view-cell" id="1">新闻1</li>
			<li class="mui-table-view-cell" id="2">新闻2</li>
			<li class="mui-table-view-cell" id="3">新闻3</li>
		</ul>
	</div>
	<script type="text/javascript">
		mui.plusReady(function(){
			//1.进行预加载
			var prPage=mui.preload({url:'info.html',id:'info.html'});
			//2.监听点击事件
			mui("#lists").on('tap','li',function(){
				mui.fire(prPage,'newsinfoEvent',{'title':this.innerHTML, 'id' : this.getAttribute('id')});
				mui.openWindow({url:'info.html',id:'info.html'});
			});
		});
	</script>
</body>
</html>

info.html 

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title></title>
    <script src="js/mui.min.js"></script>
    <link href="css/mui.min.css" rel="stylesheet"/>
    <script type="text/javascript" charset="utf-8">
      	mui.init();
    </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 class="mui-title" id="title1"></h1>
	</header>
	<div class="mui-content">
		
	</div>
	<script type="text/javascript">
		mui.plusReady(function(){
			window.addEventListener('newsinfoEvent',function(e){
				var title1=mui('#title1');
				title1[0].innerHTML="id:"+e.detail.id+" 标题："+e.detail.title;
			});
		});
	</script>
</body>
</html>

执行：

12 MUI - 事件管理及自定义事件详解第22张

12 MUI - 事件管理及自定义事件详解第23张

艘清抛离停蚕鞋计供公磁兰谓