导读:添加自定义事件监听操作和标准js事件监听类似,可直接通过window对象添加,通过mui.fire()方法可触发目标窗口的自定义事件.

监听自定义事件

  添加自定义事件监听操作和标准js事件监听类似,可直接通过window对象添加,如下:

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

触发自定义事件

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

  目标webview必须触发loaded事件后才能使用自定义事件
  若新创建一个webview,不等该webview的loaded事件发生,就立即使用webview.evalJS()或mui.fire(webview,'eventName',{}),则可能无效

假设如下场景:从新闻列表页面进入新闻详情页面,新闻详情页面为共用页面,通过传递新闻ID通知详情页面需要显示具体哪个新闻,详情页面再动态向服务器请求数据,mui要实现类似需求可通过如下步骤实现:
在列表页面中预加载详情页面(假设为detail.html)
列表页面在点击新闻标题时,首先,获得该新闻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.fire()触发自定义事件的更多相关文章

  1. C#中如何截取Windows消息来触发自定义事件

    原文 C#中如何截取Windows消息来触发自定义事件 在c#windows开发中,我们常常会遇到拦截windows消息,来触发某个特定任务的问题. 由于目前使用c#的开发人员非常多,而且大多数c#程 ...

  2. Vue自定义事件:触发自定义事件

    一 项目结构 二 子组件(Mongo.vue) <template> <button @click="eat">按钮</button> < ...

  3. mui自定义事件实例

    监听自定义事件(接收页面应用) 添加自定义事件监听操作和标准js事件监听类似,可直接通过window对象添加,如下: window.addEventListener('customEvent',fun ...

  4. 转: JS自定义事件的定义和触发(createEvent, dispatchEvent)

    四.伪DOM自定义事件 这里的“伪DOM自定义事件”是自己定义的一个名词,用来区分DOM自定义事件的.例如jQuery库,其是基于包装器(一个包含DOM元素的中间层)扩展事件的,既与DOM相关,又不直 ...

  5. jquery的自定义事件通过on绑定trigger触发

    jquery绑定自定义事件,可以实现预先绑定好一个处理方法,当需要使用的时候利用jquery trigger来触发自定义事件,以达到方便快捷的目的.我们来假设一个这样的场景,一个textarea中的字 ...

  6. 自定义事件的触发dispatchEvent

    1. 对于标准浏览器,其提供了可供元素触发的方法:element.dispatchEvent(). 不过,在使用该方法之前,我们还需要做其他两件事,及创建和初始化.因此,总结说来就是: documen ...

  7. (转)js原生自定义事件的触发dispatchEvent

    1. 对于标准浏览器,其提供了可供元素触发的方法:element.dispatchEvent(). 不过,在使用该方法之前,我们还需要做其他两件事,及创建和初始化.因此,总结说来就是: 1 2 3 d ...

  8. mui.fire() 和 mui.trigger()

    导读:添加自定义事件监听操作和标准js事件监听类似,可直接通过window对象添加,通过mui.fire()方法可触发目标窗口的自定义事件 监听自定义事件 添加自定义事件监听操作和标准js事件监听类似 ...

  9. javascript和jquey的自定义事件小结

    “通过事件机制,可以将类设计为独立的模块,通过事件对外通信,提高了程序的开发效率.” 可以把多个关联但逻辑复杂的操作利用自定义事件的机制灵活地控制好 对象之间通过直接方法调用来交互 1)对象A直接调用 ...

随机推荐

  1. python开发购物车

    1 业务需求 商品中心 显示库存的商品 商品能够加入到购物车 个人中心 购物车 修改购物车的商品 下单 完成的订单 订单详情 账户余额 2 代码实现 # 定义全局变量信息 # 商品编号信息 goods ...

  2. Webservices部署在IIS6.0上的一个小问题

    部署方式还是跟网站的部署方式一样,可是通过localhost访问一直提示400(bad request)错误. 可以在iis上预览到.在vs上引用的时候怎么都预览不到. 换个思路,把localhost ...

  3. SQLServer 清空某个库所有表

    select @n=1 insert #temp(tablename) SELECT distinct sobjects.name FROM sysobjects sobjects WHERE sob ...

  4. jquery:获取checked复选框的问题

    jquery:获取checked复选框的问题 功能描述:要完成一个全选的功能,但总是获取不到复选框的被选中的个数,究其原因,是Jquery中length和checked使用不当所造成的. // 获取所 ...

  5. 用GDB调试程序(五)

    查看运行时数据———————        在你调试程序时,当程序被停住时,你可以使用print命令(简写命令为p),或是同义命令inspect来查看当前程序的运行数据.print命令的格式是:    ...

  6. 多线程之sleep和wait的区别

    它们最大本质的区别是:sleep()不释放同步锁,wait()释放同步锁. 还有用法的上的不同是:sleep(milliseconds)可以用时间指定来使他自动醒过来,如果时间不到你只能调用inter ...

  7. 总结http状态码和200,304状态码

    状态码  响应类别  中文意思 1XX  信息性状态码(Informational) 服务器正在处理请求 2XX 成功状态码(Success) 请求已正常处理完毕 3XX 重定向状态码(Redirec ...

  8. Spring再接触 IOC DI

    直接上例子 引入spring以及Junite所需要的jar包 User.java package com.bjsxt.model; public class User { private String ...

  9. 作为一名程序员,在面试中如何展现你Python的coding能力?

    来源商业新知,原文标题:如何在一场面试中展现你对Python的coding能力? 如果你已经通过了招聘人员的电话面试,那么下面正是该展现你代码能力的时候了.无论是练习,作业,还是现场白板面试,这都是你 ...

  10. 《Effective C++》笔记

    01:视c++为一个语言联邦 为了理解C++,必须要认识其主要的次语言: C 说到底C++仍是以C为基础.区块,语句,预处理器,内置数据类型,数组,指针统统来自C. Object-Oreinted C ...