mui自定义事件实例

监听自定义事件(接收页面应用)

添加自定义事件监听操作和标准js事件监听类似,可直接通过window对象添加,如下:

window.addEventListener('customEvent',function(event){
  //通过event.detail可获得传递过来的参数内容
  ....
});

触发自定义事件(传参页面应用)
通过mui.fire()方法可触发目标窗口的自定义事件:
参数

target
Type: WebviewObject
需传值的目标webview
event
Type: String
自定义事件名称
data
Type: JSON
json格式的数据

自定义事件完整例子
传参页面:

<div class="mui-content">
  <ul id="list1">
    <li id="1">新闻1</li>
    <li id="2">新闻2</li>
    <li id="3">新闻3</li>
  </ul>
</div>
</body>
<script type="text/javascript">
mui.init();
mui.plusReady(function(){
  var detailPage = mui.preload({url:'sub.html',id:'sub.html'});
  mui('#list1').on('tap', 'li', function(e){
    mui.fire(detailPage,'newsId',{id:this.getAttribute('id')});
    mui.openWindow({id:'sub.html'});
  });
});
</script>

接收页面

mui.plusReady(function(){
    window.addEventListener('newsId',function(event){//这里的newsId是自定义事件的事件名称
 console.log(event.detail.id); }); });


posted @ 2017-07-24 21:13  卖女孩的小火柴2号  阅读(395)  评论(0编辑  收藏  举报