导读:添加自定义事件监听操作和标准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. Oracle中存储图片的类型为BLOB类型,Java中如何将其读取并转为字符串?

    一,读取图片转为String类型: 需要使用Sun公司提供的Base64工具 String str = ((Map) list1.get(0)).get("EINVOICEFILE" ...

  2. JVM内部细节之一:synchronized关键字及实现细节(轻量级锁Lightweight Locking)

    在C程序代码中我们可以利用操作系统提供的互斥锁来实现同步块的互斥访问及线程的阻塞及唤醒等工作.然而在Java中除了提供Lock API外还在语法层面上提供了synchronized关键字来实现互斥同步 ...

  3. 通过eclipse打开jdk native源码

    1.下载 eclipse http://www.eclipse.org/downloads/eclipse-packages/ 建议下载 Eclipse IDE for Eclipse Committ ...

  4. [java,2017-05-04] 创建word文档

    package test; import java.text.SimpleDateFormat; import java.util.Date; import com.aspose.words.Data ...

  5. Maven私服(Nexus)资源上传下载

    1.settings.xml (向私服上传资源需要) <!-- Snapshot包的管理/Releases包的管理/第三方包管理--> <server> <id>l ...

  6. leetcode239

    class Solution: def maxSlidingWindow(self, nums: 'List[int]', k: int) -> 'List[int]': n = len(num ...

  7. win10 KMS命令激活步骤<转>

    三.win10 KMS命令激活步骤如下: 1.右键点击开始图标,弹出这个菜单,选择[windows powershell(管理员)],或者命令提示符管理员: 2.打开命令窗口,复制这个命令slmgr ...

  8. 深度学习VS机器学习——到底什么区别

    转自:https://baijiahao.baidu.com/s?id=1595509949786067084&wfr=spider&for=pc 最近在听深度学习的课,老师提了一个基 ...

  9. ps命令详解

    1.简介: ps 命令有两种不同的语法风格 —— BSD 与 UNIX 两种风格.新手常常对这两种形式产生误解,因此我们有必要在这里作一个简单的说明: ps aux 与 ps -aux 是不同的,例如 ...

  10. SAP 图形页面

    话不多说,先上炫图. *&---------------------------------------------------------------------* *& Repor ...