MUI框架—事件管理

事件绑定

除了可以使用 addEventListener() 方法监听某个特定元素上的事件外，也可以使用 .on() 方法实现批量元素的事件绑定。

//on(event, selector, handler)
//event：需监听的事件名称
//selector：选择器
//handler：事件触发时的回调函数，通过回调中的event参数可以获得事件详情

//点击新闻列表，获取当前列表项的id，并将该id传给新闻详情页面，然后打开新闻详情页面。
mui(".mui-table-view").on('tap','.mui-table-view-cell',function(){
  //获取id
  var id = this.getAttribute("id");
  //传值给详情页面，通知加载新数据
  mui.fire(detail,'getDetail',{id:id});
  //打开新闻详情
  mui.openWindow({
    id:'detail',
    url:'detail.html'
  });
}) 

事件取消
使用 on() 方法绑定事件后，若希望取消绑定，则可以使用 off() 方法。off() 方法根据传入参数的不同，有不同的实现逻辑。

//off(event, selector, handler)
//event：需取消绑定的事件名称
//selector：选择器
//handler：之前绑定到该元素上的事件函数

//off(event, selector)
//event：需取消绑定的事件名称
//selector：选择器

//off(event)
//event：需取消绑定的事件名称

//off()
//空参数，删除该元素上所有事件

//点击li时，不再执行function函数
mui("#list").off("tap","li",function(){});

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

//trigger(element, event, data)
//element：触发事件的DOM元素
//event：事件名字
//data：需要传递给事件的业务参数
//自动触发按钮的点击事件
var btn = document.getElementById("submit");
//监听点击事件
btn.addEventListener("tap",function () {
  console.log("tap event trigger");
});
//触发submit按钮的点击事件
mui.trigger(btn,'tap');

手势事件（我们在 init() 方法中已经阐述过了）

自定义事件
在APP开发中，经常会遇到页面传值的需求，比如从新闻列表进入详情页，需要将新闻id传递过去；H5+ API规范设计了 evalJS 方法来解决该问题；但 evalJS 方法仅接收字符串参数，涉及多个参数时，需要手动拼接字符串；为化简开发，MUI框架在 evalJS 方法的基础上，封装了自定义事件，通过自定义事件，用户可以轻松实现多 webview 间数据传递。

监听自定义事件

添加自定义事件监听操作和标准JS事件监听类似，可直接通过window对象添加。

window.addEventListener('customEvent',function(event){
  //通过event.detail可获得传递过来的参数内容
  ....
});

• 触发自定义事件
  通过 mui.fire() 方法可触发目标窗口的自定事件：

//fire(target, event, data)
//target 需传值的目标webview
//event 自定义事件名称
//data json格式的数据
//目标webview必须触发loaded事件后才能使用自定义事件

``示例：` 从新闻列表页面进入新闻详情页面，新闻详情页面为共用页面，通过传递新闻ID通知详情页面需要显示具体哪个新闻。

• 在列表页面中预加载详情页面
• 列表页面在点击新闻标题时，首先，获得该新闻id，触发详情页面的newsId事件，并将新闻id作为事件参数传递过去；然后打开详情页面；
• 详情页面监听newsId自定义事件

//列表页面代码：
//初始化预加载详情页面
mui.init({
  preloadPages:[{
    id:'detail.html',
    url:'detail.html'           
  }
  ]
});

var detailPage = null;
//添加列表项的点击事件
mui('.mui-content').on('tap', 'a', function(e) {
  var id = this.getAttribute('id');
  //获得详情页面
  if(!detailPage){
    detailPage = plus.webview.getWebviewById('detail.html');
  }
  //触发详情页面的newsId事件
  mui.fire(detailPage,'newsId',{
    id:id
  });
//打开详情页面          
  mui.openWindow({
    id:'detail.html'
  });
});  
//详情页面代码
//添加newId自定义事件监听
window.addEventListener('newsId',function(event){
  //获得事件参数
  var id = event.detail.id;
  //根据id向服务器请求新闻详情
  .....
});

参考文档

• MUI官方文档

上一章	下一章