导读:添加自定义事件监听操作和标准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. 一台电脑上配置多个tomcat同时运行

    好使 1 1.配置运行tomcat 首先要配置java的jdk环境,这个就不在写了  不懂去网上查查,这里主要介绍再jdk环境没配置好的情况下 如何配置运行多个tomcat 2.第一个tomcat: ...

  2. MySQL 之 MHA + ProxySQL + keepalived 实现读写分离,高可用(一)

    准备服务器: docker network create --subnet=192.168.0.0/16 staticnetdocker run -d --privileged -v `pwd`/my ...

  3. IIS小知识

    1.IIS的默认配置路径 IIS5.0默认配置文件路径C:\WINNT\system32\inetsrv\MetaBase.binIIS6.0默认配置文件路径C:\WINDOWS\system32\i ...

  4. 【.NET架构】BIM软件架构01:Revit插件产品架构梳理

    一.前言        BIM:Building Information Modeling 建筑信息模型,就是将建筑的相关信息附着于模型中,以管理该建筑在设计.算量.施工.运维全生命周期的情况.创建模 ...

  5. ios怎么让状态栏颜色和导航栏背景图片颜色一样

    ios7 图片作为导航的背景的话,如果想实现状态栏和导航栏一体化,那么图片高度需要增加22,也就是64,retina是128

  6. Maven私服(Nexus)启动创建Windows服务

    sc create lutao-maven-nexus binpath= D:\maven-server\nexus--\bin\nexus.exe type= own start= auto dis ...

  7. JEECG-Swagger UI的使用说明

    一.代码生成 (此步骤为代码生成器的使用,如不清楚请查阅相关文档视频) 1.进入菜单[在线开发]-->[Online表单开发],选中一张单表/主表,点击代码生成按钮. 2.弹出页面中填写代码生成 ...

  8. poi横纵动态导入

    dao层 <insert id ="saveInTarget" parameterType="java.util.List" > INSERT IN ...

  9. BUILDING WITH BOOTSTRAP

    BUILDING WITH BOOTSTRAP Bootstrap Generalizations You just built an impressive webpage using the Boo ...

  10. 26.Hibernate-主键和映射.md

    目录 1.复合主键映射 [toc] 2.集合映射 2.1Set集合 2.2其他集合 [toc] 3.集合数据的读取 [toc] 4.一对多和多对一映射 4.1概念 4.2配置和开发 4.2.1关键点 ...