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

mui.plusReady(function(){

document.getElementById('but1').addEventListener('tap',function(){

alert(1);

});

});

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

  • 小明
  • 小花
  • 小萌

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格式的数据

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

  • 新闻1
  • 新闻2
  • 新闻3

子页面

mui.plusReady(function(){

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

console.log(event.detail.id);

});

});

原文:http://www.hcoder.net/tutorials/info_95.html