3MUI文档-事件绑定

事件绑定除了可以使用addEventListener()方法监听某个特定元素上的事件外，也可以使用.on()方法实现批量元素的事件绑定。.on(event,selector,handler)oeventType:String需监听的事件名称，例如：'tap'oselectorType:String选择器ohandlerType:Function(Eventevent)事件触发时的回调函数，通过回调中的event参数可以获得事件详情示例点击新闻列表，获取当前列表项的id，并将该id传给新闻详情页面，然后打开新闻详情页面mui(.mui-table-view).on('tap','.mui-table-view-cell',function(){//获取idvarid=this.getAttribute(id);//传值给详情页面，通知加载新数据mui.fire(detail,'getDetail',{id:id});//打开新闻详情mui.openWindow({id:'detail',url:'detail.html'});})事件取消使用on()方法绑定事件后，若希望取消绑定，则可以使用off()方法。off()方法根据传入参数的不同，有不同的实现逻辑。versionadded:2.0.0.off(event,selector,handler)oeventType:String需取消绑定的事件名称，例如：'tap'oselectorType:String选择器ohandlerType:Function之前绑定到该元素上的事件函数，不支持匿名函数versionadded:2.0.0.off(event,selector)oeventType:String需取消绑定的事件名称，例如：'tap'oselectorType:String选择器versionadded:2.2.0.off(event)oeventType:String需取消绑定的事件名称，例如：'tap'versionadded:2.2.0.off()o空参数，删除该元素上所有事件示例off(event,selector,handle)适用于取消对应选择器上特定事件所执行的特定回调，例如：//点击li时，执行foo_1函数mui(#list).on(tap,li,foo_1);//点击li时，执行foo_2函数mui(#list).on(tap,li,foo_2);functionfoo_1(){console.log(foo_1execute);}functionfoo_2(){console.log(foo_2execute);}//点击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);functionfoo_1(){console.log(foo_1execute);}functionfoo_2(){console.log(foo_2execute);}//点击li时，foo_2、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);functionfoo_1(){console.log(foo_1execute);}functionfoo_3(){console.log(foo_3execute);}//点击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);functionfoo_1(){console.log(foo_1execute);}functionfoo_3(){console.log(foo_3execute);}functionfoo_4(){console.log(foo_4execute);}//点击li时，不再执行foo_1函数；点击p时，也不再执行foo_3函数；双击li时，也不再执行foo_4函数；mui(#list).off();事件触发使用mui.trigger()方法可以动态触发特定DOM元素上的事件。.trigger(element,event,data)oelementType:Element触发事件的DOM元素oeventType:String事件名字，例如：'tap'、'swipeleft'odataType:Object需要传递给事件的业务参数示例自动触发按钮的点击事件：varbtn=document.getElementById(submit);//监听点击事件btn.addEventListener(tap,function(){console.log(tapeventtrigger);});//触发submit按钮的点击事件mui.trigger(btn,'tap');部分mui控件监听的事件无法通过mui.trigger触发比如无法实现自动触发mui返回图标，实现关闭当前页面的功能，该部分逻辑正在优化中手势事件在开发移动端的应用时，会用到很多的手势操作，比如滑动、长按等，为了方便开放者快速集成这些手势，mui内置了常用的手势事件，目前支持的手势事件见如下列表：分类参数描述点击tap单击屏幕doubletap双击屏幕长按longtap长按屏幕hold按住屏幕release离开屏幕滑动swipeleft向左滑动swiperight向右滑动swipeup向上滑动swipedown向下滑动拖动dragstart开始拖动drag拖动中dragend拖动结束手势事件配置根据使用频率，mui默认会监听部分手势事件，如点击、滑动事件；为了开发出更高性能的mobleApp，mui支持用户根据实际业务需求，通过mui.init方法中的gestureConfig参数，配置具体需要监听的手势事件，。mui.init({gestureConfig:{tap:true,//默认为truedoubletap:true,//默认为falselongtap:true,//默认为falseswipe:true,//默认为truedrag:true,//默认为truehold:false,//默认为false，不监听release:false//默认为false，不监听}});注意:dragstart、drag、dragend共用drag开关，swipeleft、swiperight、swipeup、swipedown共用swipe开关事件监听单个元素上的事件监听，直接使用addEventListener(0即可，如下：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)otargetType:WebviewObject需传值的目标webviewoeventType:String自定义事件名称odataType:JSONjson格式的数据目标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'}]});vardetailPage=null;//添加列表项的点击事件mui('.mui-content').on('tap','a',function(e){varid=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){//获得事件参数varid=event.detail.id;//根据id向服务器请求新闻详情.....});