DCloud-MUI：事件管理

ylbtech-DCloud-MUI：事件管理

极简的JS函数

1.返回顶部

一、事件绑定

除了可使用 addEventListener()方法监听某个特定元素上的事件外， 也可使用 .on()方法实现批量元素的事件绑定。

.on( event , selector , handler )

• event
  Type: String
  需监听的事件名称，例如：'tap'
• selector
  Type: String
  选择器
• handler
  Type: Function( Event event )
  事件触发时的回调函数，经过回调中的event参数能够得到事件详情

示例

点击新闻列表，获取当前列表项的id，并将该id传给新闻详情页面，而后打开新闻详情页面

mui(".mui-table-view").on('tap','.mui-table-view-cell',function(){
  //获取id
  var id = this.getAttribute("id");
  //传值给详情页面，通知加载新数据
  mui.fire(detail,'getDetail',{id:id});
  //打开新闻详情
  mui.openWindow({
    id:'detail',
    url:'detail.html'
  });
}) 

二、事件取消

使用 on()方法绑定事件后，若但愿取消绑定，则可使用 off()方法。  off()方法根据传入参数的不一样，有不一样的实现逻辑。

• .off( event , selector , handler )

  • event
    Type:  String
    需取消绑定的事件名称，例如：'tap'
  • selector
    Type:  String
    选择器
  • handler
    Type:  Function
    以前绑定到该元素上的事件函数，不支持匿名函数

• .off( event , selector)

  • event
    Type:  String
    需取消绑定的事件名称，例如：'tap'
  • selector
    Type:  String
    选择器

• .off( event )

  • event
    Type:  String
    需取消绑定的事件名称，例如：'tap'

• .off( )

  • 空参数，删除该元素上全部事件

示例

off(event,selector,handle)适用于取消对应选择器上特定事件所执行的特定回调，例如：

//点击li时，执行foo_1函数
mui("#list").on("tap","li",foo_1);
//点击li时，执行foo_2函数
mui("#list").on("tap","li",foo_2);

function foo_1(){
  console.log("foo_1 execute");
}

function foo_2(){
  console.log("foo_2 execute");
}
//点击li时，再也不执行foo_1函数，但会继续执行foo_2函数
mui("#list").off("tap","li",foo_1);

 off(event,selector)适用于取消对应选择器上特定事件的全部回调，例如：

//点击li时，执行foo_1函数
mui("#list").on("tap","li",foo_1);
//点击li时，执行foo_2函数
mui("#list").on("tap","li",foo_2);

function foo_1(){
  console.log("foo_1 execute");
}

function foo_2(){
  console.log("foo_2 execute");
}
//点击li时，foo_二、foo_2两个函数均再也不执行
mui("#list").off("tap","li");

off(event)适用于取消当前元素上绑定的特定事件的全部回调，例如：

//点击li时，执行foo_1函数
mui("#list").on("tap","li",foo_1);
//点击p时，执行foo_3函数
mui("#list").on("tap","p",foo_3);

function foo_1(){
  console.log("foo_1 execute");
}

function foo_3(){
  console.log("foo_3 execute");
}
//点击li时，再也不执行foo_1函数；点击p时，也再也不执行foo_3函数
mui("#list").off("tap");

off()适用于取消当前元素上绑定的全部事件回调，例如：

//点击li时，执行foo_1函数
mui("#list").on("tap","li",foo_1);
//双击li时，执行foo_4函数
mui("#list").on("doubletap","li",foo_4);
//点击p时，执行foo_3函数
mui("#list").on("tap","p",foo_3);

function foo_1(){
  console.log("foo_1 execute");
}

function foo_3(){
  console.log("foo_3 execute");
}

function foo_4(){
  console.log("foo_4 execute");
}
//点击li时，再也不执行foo_1函数；点击p时，也再也不执行foo_3函数；双击li时，也再也不执行foo_4函数；
mui("#list").off(); 

三、事件触发

使用 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内置了经常使用的手势事件，目前支持的手势事件见以下列表：

分类	参数	描述
点击	tap	单击屏幕
	doubletap	双击屏幕
长按	longtap	长按屏幕
	hold	按住屏幕
	release	离开屏幕
滑动	swipeleft	向左滑动
	swiperight	向右滑动
	swipeup	向上滑动
	swipedown	向下滑动
拖动	dragstart	开始拖动
	drag	拖动中
	dragend	拖动结束

手势事件配置

根据使用频率，mui默认会监听部分手势事件，如点击、滑动事件；为了开发出更高性能的moble App，mui支持用户根据实际业务需求，经过mui.init方法中的gestureConfig参数，配置具体须要监听的手势事件，。

mui.init({
  gestureConfig:{
   tap: true, //默认为true
   doubletap: true, //默认为false
   longtap: true, //默认为false
   swipe: true, //默认为true
   drag: true, //默认为true
   hold:false,//默认为false，不监听
   release:false//默认为false，不监听
  }
});

 注意:dragstart、drag、dragend共用drag开关，swipeleft、swiperight、swipeup、swipedown共用swipe开关

事件监听

单个元素上的事件监听，直接使用addEventListener()便可，以下：

elem.addEventListener("swipeleft",function(){
     console.log("你正在向左滑动");
});

若多个元素执行相同逻辑，则建议使用事件绑定(on())。

五、自定义事件

在App开发中，常常会遇到页面间传值的需求，好比重新闻列表页进入详情页，须要将新闻id传递过去； Html5Plus规范设计了evalJS方法来解决该问题； 但evalJS方法仅接收字符串参数，涉及多个参数时，须要开发人员手动拼字符串； 为简化开发，mui框架在evalJS方法的基础上，封装了自定义事件，经过自定义事件，用户能够轻松实现多webview间数据传递。

仅能在5+ App及流应用中使用

由于是多webview之间传值，故没法在手机浏览器、微信中使用；

监听自定义事件

添加自定义事件监听操做和标准js事件监听相似，可直接经过window对象添加，以下：

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

触发自定义事件

经过mui.fire()方法可触发目标窗口的自定义事件：

• .fire( target , event , data )

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

目标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向服务器请求新闻详情
  .....
});

六、

2.返回顶部

 

3.返回顶部

 

4.返回顶部

 

5.返回顶部

一、

http://dev.dcloud.net.cn/mui/event/

二、

 

6.返回顶部

 

做者：ylbtech 出处：http://ylbtech.cnblogs.com/ 本文版权归做者和博客园共有，欢迎转载，但未经做者赞成必须保留此段声明，且在文章页面明显位置给出原文链接，不然保留追究法律责任的权利。