赞助商

事件管理

发布时间:2019-02-10 发布网站:脚本之家
脚本之家收集整理的这篇文章主要介绍了事件管理脚本之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

<h3 id="事件绑定">事件绑定

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

      .on(event,selector,handler)
    
      event
      Type:String
      选择器
    
      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'
        });
      }) 

<h3 id="事件取消">事件取消

  • 使用on()方法绑定事件后,若希望取消绑定,则可以使用off()方法。 off()方法根据传入参数的不同,有不同的实现逻辑。

      .off(event,handler)
      event
      Type:String
      需取消绑定的事件名称,例如:'top'
    
      selector
      Type:String
      选择器
    
      handler
      Type:Function
      之前绑定到该元素上的事件函数,不支持匿名函数
  • off(event,handle)适用于取消对应选择器上特定事件所执行的特定回调,例如:

      //点击li时,执行foo_1函数
      mui("#list").on("tap","li",foo_1);
      //点击li时,执行foo_2函数
      mui("#list").on("tap",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",foo_1);

``

.off(event,selector)
event
Type:String
需取消绑定的事件名称,例如:'top'

selector
Type:String
选择器
  • off(event,selector)适用于取消对应选择器上特定事件的所有回调,例如:

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

``

.off(event)

event
Type:String
需取消绑定的事件名称,例如:'top'
  • off(event)适用于取消当前元素上绑定的特定事件的所有回调,例如:

      //点击li时,执行foo_1函数
      mui("#list").on("tap",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()
空参数,删除该元素上所有事件
  • off()适用于取消当前元素上绑定的所有事件回调,例如:

      //点击li时,执行foo_1函数
      mui("#list").on("tap",foo_1);
      //双击li时,执行foo_4函数
      mui("#list").on("doubletap",foo_4);
      //点击p时,执行foo_3函数
      mui("#list").on("tap",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();

<h3 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');

<h3 id="手势事件">手势事件

  • 在开发移动端的应用时,会用到很多的手势操作,比如滑动、长按等,为了方便开放者快速集成这些手势,mui内置了常用的手势事件,目前支持的手势事件见如下列表:

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

<h4 id="手势事件配置">手势事件配置

  • 根据使用频率,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开关

<h3 id="事件监听">事件监听

  • 单个元素上的事件监听,直接使用addEventListener()即可,如下:

      elem.addEventListener("swipeleft",function(){
           console.log("你正在向左滑动");
      });
  • 若多个元素执行相同逻辑,则建议使用事件绑定(on())。

<h3 id="自定义事件">自定义事件

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

      仅能在5+ App及流应用中使用
      因为是多webview之间传值,故无法在手机浏览器、微信中使用;

<h4 id="监听自定义事件">监听自定义事件

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

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

<h5 id="触发自定义事件">触发自定义事件

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

      .fire( target,data )
      target
      Type:WebviewObject
    
      event
      Type:String
      自定义事件名称
    
      data
      Type:JSON
      json格式的数据

总结

以上是脚本之家为你收集整理的事件管理全部内容,希望文章能够帮你解决事件管理所遇到的程序开发问题。

如果觉得脚本之家网站内容还不错,欢迎将脚本之家网站推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:76874919,请注明来意。
标签: