十四.MUI - 事件管理及自定义事件详解

时间:2022-12-01 22:20:49

1、事件绑定
可以使用addEventListener()方法监听某个特定元素上的事件外, 也可以使用.on()方法实现批量元素的事件绑定。
addEventListener示例(单个元素事件绑定):

mui.plusReady(function(){
    document.getElementById('but1').addEventListener('tap',function(){
	alert(1);
    });
});

on()示例,适用于批量元素绑定。演示代码:

<div class="mui-content">
  <ul id="list1">
    <li>小明</li>
    <li>小花</li>
    <li>小萌</li>
  </ul>
</div>
</body>
<script type="text/javascript">
mui.plusReady(function(){
  mui('#list1').on('tap', 'li', function(){
    var thisHtml = this.innerHTML;
    alert(thisHtml);
  });
});
</script>


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

mui('#list1').off('tap', 'li');


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

var btn = document.getElementById("submit");
//监听点击事件
btn.addEventListener("tap",function () {console.log("tap event trigger");});
//触发submit按钮的点击事件
mui.trigger(btn,'tap');


4、手势事件
在开发移动端的应用时,会用到很多的手势操作,比如滑动、长按等,为了方便开放者快速集成这些手势,mui内置了常用的手势事件,目前支持的手势事件见如下列表:

点击 	
tap 	单击屏幕
doubletap 	双击屏幕
长按 	
longtap 	长按屏幕
hold 	按住屏幕
release 	离开屏幕
滑动 	
swipeleft 	向左滑动
swiperight 	向右滑动
swipeup 	向上滑动
swipedown 	向下滑动
拖动 	
dragstart 	开始拖动
drag 	拖动中
dragend 	拖动结束


5、自定义事件
在App开发中,经常会遇到页面间传值的需求,比如从新闻列表页进入详情页,需要将新闻id传递过去; Html5Plus规范设计了evalJS方法来解决该问题; 但evalJS方法仅接收字符串参数,涉及多个参数时,需要开发人员手动拼字符串; 为简化开发,mui框架在evalJS方法的基础上,封装了自定义事件,通过自定义事件,用户可以轻松实现多webview间数据传递。
添加自定义事件监听操作和标准js事件监听类似,可直接通过window对象添加,如下:

window.addEventListener('customEvent',function(event){mui.toast('ok');});


6、触发自定义事件
通过mui.fire()方法可触发目标窗口的自定义事件:
参数

target
Type: WebviewObject
需传值的目标webview
event
Type: String
自定义事件名称
data
Type: JSON
json格式的数据

自定义事件完整例子
主页面:

<div class="mui-content">
  <ul id="list1">
    <li id="1">新闻1</li>
    <li id="2">新闻2</li>
    <li id="3">新闻3</li>
  </ul>
</div>
</body>
<script type="text/javascript">
mui.init();
mui.plusReady(function(){
  var detailPage = mui.preload({url:'sub.html',id:'sub.html'});
  mui('#list1').on('tap', 'li', function(e){
    mui.fire(detailPage,'newsId',{id:this.getAttribute('id')});
    mui.openWindow({id:'sub.html'});
  });
});
</script>

子页面

mui.plusReady(function(){
    window.addEventListener('newsId',function(event){
        console.log(event.detail.id);
    });
});