导读:添加自定义事件监听操作和标准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. C#获取当前路径的七种方法

    //1.获取模块的完整路径. string path1 = System.Diagnostics.Process.GetCurrentProcess().MainModule.FileName; // ...

  2. 使用fdisk进行分区

    fdisk进行分区 1.首先使用fdisk -l 发现待分区磁盘/dev/vdb  大小为1TB 2.fdisk /dev/vdb 对该磁盘进行分区,输入m并回车 3.输入n并回车,n是“new”新建 ...

  3. VS2015密匙--VS2015打开丢失msvcp140.dll--cannot find one or more components ,please reinstall the application

    win7旗舰版 64位 + vs2015 专业版 1.安装VS2015过程中可能需要用到的VS2015专业版钥匙:(测试,可用) HMGNV-WCYXV-X7G9W-YCX63-B98R2 2.VS2 ...

  4. Java double 加、减、乘、除

    double类型的数值接相加的时候,结果可能出现精度误差为此Java提供了高精度计算的方法:java.math.*里面提供了BigDecimal类 import org.junit.Test; imp ...

  5. python 修改dataframe的列名

    1. 修改全部列名 df.columns base_data_model.columns = [u'有效率',u'提交率',u'参与度',u'回放占比',u'主好评率',u'辅好评率',u'是否付费' ...

  6. spring 之 注入之 by name or by type, or both ?

    @Autowired 和  @Qualifier 使用xml 注入的时候, 我们可以指定 autowire=“byType” 或“byName” . 但是使用 注解的时候, @Autowired  只 ...

  7. session and cookie简析

    无状态应用程序(cookies.session等机制出现的背景) Web应用程序服务器通常是“无状态的”: 每个HTTP请求都是独立的; 服务器无法判断2个请求是来自同一个浏览器还是用户. Web服务 ...

  8. <记录>TP5 关联模型使用(嵌套关联、动态排序以及隐藏字段)

    在数据库设计中,常常会有如下这种关联模型,分类表中一条分类对应多个商品表中的商品 如果要获得分类表中每条分类 以及 对应的商品的信息,则需要先查询分类表中的数据,然后根据结果遍历查询商品表,最后把数据 ...

  9. Eclipse 安装中文简体语言包

    Installing the language packs Open the install wizard with 'Help' > 'Install new software...' Add ...

  10. 1.Ansible安装以及配置

    本节内容以Centos7为系统环境进行讲解: 1.安装epel源,方便直接yum安装: wget -O /etc/yum.repos.d/epel.repo http://mirrors.aliyun ...