导读:添加自定义事件监听操作和标准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
});
//打开详情页面 www.bcty365.com
mui.openWindow({
id:'detail.html'
});
});

详情页面代码如下:

//添加newId自定义事件监听
window.addEventListener('newsId',function(event){
//获得事件参数
var id = event.detail.id;
//根据id向服务器请求新闻详情
.....
});

使用mui.trigger()方法可以动态触发特定DOM元素上的事件。

.trigger( element , event , data )

element:Type: Element,触发事件的DOM元素

event:Type: String,事件名字,例如:‘tap‘、‘swipeleft‘

data:Type: Object,需要传递给事件的业务参数

示例

自动触发按钮的点击事件:

var btn = document.getElementById("submit");
//监听点击事件
btn.addEventListener("tap",function () {
console.log("tap event trigger");
});
//触发submit按钮的点击事件
mui.trigger(btn,'tap');

部分mui控件监听的事件无法通过mui.trigger触发,比如无法实现自动触发mui返回图标,实现关闭当前页面的功能,该部分逻辑正在优化中

mui.fire() 和 mui.trigger()的更多相关文章

  1. mui.fire()触发自定义事件

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

  2. mui.fire 目标页无法监听到 触发事件

    //获得详情页面 if(!detailPage){ detailPage = plus.webview.getWebviewById('detail.html'); } //触发详情页面的newsId ...

  3. mui.fire()用法,触发目标窗口的自定义事件

    mui.fire( 目标窗口的webview , '自定义事件名' ,{参数列表}:) 目标窗口监听这个自定义事件 window.addEventListener('自定义事件名',function( ...

  4. mui.fire()用法

    作用: mui.fire() 可以触发目标窗口的自定义事件 mui.fire( 目标窗口的webview , '自定义事件名' ,{参数列表}:) 目标窗口监听这个自定义事件 window.addEv ...

  5. 讨论mui 的 mui.init 与 mui.plusReady

    先来看一段代码 (function(m, doc) { mui.plusReady(function(){ var self = plus.webview.currentWebview(); olti ...

  6. mui.init()和mui.plusReady()

    1.每个用到mui的页面都调用下mui.init.2.如果需要使用大H5+对象,就写到plusReady中,如plus对象. HTML5+扩展api是针对手机APP的,只有才手机应用(比如手机浏览器) ...

  7. 一个mui扩展插件mui.showLoading加载框【转】

    转:http://ask.dcloud.net.cn/article/12856 写在前面:好像mui目前dialog系列唯独缺少showLoading加载框(加载中)组件,为了统一组件样式和体验,写 ...

  8. 解决在vue_cli上使用mui或引入mui.js各种报错及问题

    原文:https://blog.csdn.net/u012815877/article/details/81187826 在main.js里添加 import mui from './assets/j ...

  9. MUI - sortable在mui.js前端框架不兼容的解决方案

    关于sortable看这 兼容的解决方案看这 http://www.cnblogs.com/phillyx/ 示例代码已更到github

随机推荐

  1. win32 读取文本文件,并进行字符串分割和存储

    //分割字符      char *p;//p存放临时行指针 q存放临时每一行的列指针      char *hang[100]={0};//存储第一行      char *lie[300]={0} ...

  2. k8s的存储Volume

    1.Volume简介 我们经常会说:容器和 Pod 是短暂的.其含义是它们的生命周期可能很短,会被频繁地销毁和创建.容器销毁时,保存在容器内部文件系统中的数据都会被清除. 为了持久化保存容器的数据,可 ...

  3. node.js的全局变量的注意

    在node.js中,如果一个变量没有用var来声明,就会变为全局变量: 看如下代码: 1)6.js function myadd(a) { return a+abc; } function conta ...

  4. python 输入 与如何查看文档 小结

    Python 2 中的输入小结 转载请声明本文的引用出处:仰望大牛的小清新 1.raw_input(prompt = None)与input(prompt = None) 两个都是默认参数类型,这个参 ...

  5. Django项目静态文件加载失败问题

    在我们平时的开发过程中,为了方便调试程序,我们都是打开开发者模式,即Debug=True,当我们正式上线的时候肯定就需要把开发者模式关掉,用uwsgi部署上去以后,突然发现我们平时辛苦做的项目的静态文 ...

  6. Disjoint Sets

    Disjoint Sets Disjoint Sets的意思是一堆集合們,它們相互之間都沒有交集.沒有交集是指:各個集合之間沒有擁有共同.相同的元素.中文稱作「分離集」. Disjoint Sets的 ...

  7. 36、Django实战第36天:首页功能开发

    1.编辑users.views.py ... class IndexView(View): """ 首页 """ def get(self, ...

  8. luogu P1026 统计单词个数

    题目链接 luogu P1026 统计单词个数 题解 贪心的预处理母本串从i到j的最大单词数 然后dp[i][j] 表示从前i个切了k次最优解 转移显然 代码 #include<cstdio&g ...

  9. 【二分答案】bzoj1639 [Usaco2007 Mar]Monthly Expense 月度开支

    #include<cstdio> using namespace std; #define N 100001 int n,m,a[N]; bool check(int x) { int n ...

  10. 【置换群】CH Round #63 - OrzCC杯#2省选热身赛 exchange

    第一问置换群裸题. 第二问单独考虑某个循环,任意交换两个元素,稍微画一下就会发现,把该循环拆成了2个,剩下所需的交换次数减少了1,也就是说,第一步我们任意交换,都能够保证交换次数最少.于是一个循环的答 ...