导读:添加自定义事件监听操作和标准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发送微信消息

    针对此 需要安装itchat第三方模块 采用pip安装就可以了   pip install itchat import itchatimport time#引入时间函数进行测试time_format= ...

  2. Windows下,python pip安装时ReadTimeoutError解决办法

    一般情况下PIP出现ReadTimeoutError都是因为被GFW给墙了,所以一般遇到这种问题,我们可以选择国内的镜像来解决问题. 在Windows下: C:\Users\Administrator ...

  3. mybatis的简单使用调用mapper接口

    mybatis 是apache下的一个面向sql编程的半自动化的ORM持久层的框架.特点:面向sql编程,达到高性能的使用目的. 下面是简单使用 现导入jar包,只有mybatis和数据库驱动包(这里 ...

  4. Postgres——pgadmin复制无主键单表至本地数据库

    数据库中存在无主键单表gongan_address_all ,需要将余杭区数据导出成另外一张表,因为数据量太大,sql语句效率太差. 通过sql语句查询出余杭区数据,并导出成csv,sql等格式,再导 ...

  5. oracle用户的管理

    用户登陆 sql>conn 用户名/密码 给用户修改密码 如果给自己修改密码可以直接使用 sql>password 用户名; 如果给别人修改密码则需要具有dba的权限,或是拥有alter ...

  6. Python 多线程、进程

    本节内容 操作系统发展史介绍 进程.与线程区别 python GIL全局解释器锁 线程 语法 join 线程锁之Lock\Rlock\信号量 将线程变为守护进程 Event事件 queue队列 生产者 ...

  7. 阿里云RDS读写分离数据查询延迟解决

    mysql使用RDS做数据主从读写分离.在使用的过程中发现部分业务对其他服务以来严重.但是由于系统不是采用微服务的架构,造成部分数据插入数据库后,后续操作读取数据库没有查询到前面插入的数据.查看阿里云 ...

  8. 【FZSZ2017暑假提高组Day1】确定小组

    [问题描述] 有n个人坐成一排,这n个人都在某一个小组中,同一个小组的所有人所坐的位置一定是连续的. 有一个记者在现场进行采访,他每次采访都会询问一个人其所在的小组有多少人,被询问的每个人都给出了正确 ...

  9. mvc:view-controller标签使用

    mvc:view-controller可以在不需要Controller处理request的情况,转向到设置的View,完成无Controller的path和view的直接映射. 1.重定向 <m ...

  10. LeetCode OJ 117. Populating Next Right Pointers in Each Node II

    题目 Given a binary tree struct TreeLinkNode { TreeLinkNode *left; TreeLinkNode *right; TreeLinkNode * ...