Zepto-touch event&form表单&ajax案例

Zepto

touch event

• 同jquery类似事件

  ​ on() 绑定事件处理程序
  ​ off() 方法移除用目标元素on绑定的事件处理程序。
  ​ bind() 为每个匹配元素的特定事件绑定事件处理函数，可同时绑定多个事件，也可以自定义事件。
  ​ one() 为每一个匹配元素的特定事件（像click）绑定一个一次性的事件处理函数。只执行一次。
  ​ trigger() 触发有bind定义的事件（通常是自定义事件）
  ​ unbind() bind的反向操作，删除匹配元素所绑定的bind事件。

          $(function () {
             $('.btn1').on('touchstart',function () {
                 alert('on触发的事件');
             }) ;
             $('.btn1').off();
             $('.btn2').bind('myTouch',function () {
                 alert('bind触发的事件');//页面加载时触发
             });
             $('.btn2').unbind();//把自定义函数关掉
             $('.btn2').trigger('myTouch');
             $('.btn3').one('touchstart',function () {
                  alert( '我只执行一次');
              });
          });
  

• 不同事件

  zepto touch方法

  tap() 点击事件 利用在document上绑定touch事件来模拟tap事件的，并且tap事件会冒泡到document上

  singleTap() 点击事件

  doubleTap() 双击事件

  longTap() 当一个元素被按住超过750ms触发。

  swipe, swipeLeft, swipeRight, swipeUp, swipeDown — 当元素被划过（同一个方向大于30px）时触发。(可选择给定的方向)
  在一个方向滑动大于30px即为滑动。否则算点击。

   $(function () {
        //tap()点击事件---真机测没问题
  
  //      $('#box').tap(function () {
  //          alert('tap事件');
  //      });
        $('#box').on('tap',function () {
          alert('tap事件');
        });
        
        //singleTap()单击事件
        $('#box2').singleTap(function () {
          alert('我单击了一下');
        });
  
        //doubleTap()  双击事件
        $('#box2').doubleTap(function () {
          alert('我双击了一下');
        });
  
        //longTap()长按事件----按住屏幕时间超过750ms触发
        $('#box3').longTap(function () {
          alert('我长按了一下box3');
        });
  
        //swipe()滑动事件---在同一个方向连续滑动超过30px
  
  //      $('#btn').swipe(function () {
  //          alert('我滑动了超过30px');
  //      });
        $('#btn').swipeLeft(function () {
          alert('我向左滑动了');
        });
      });
  

事件处理机制

• /*
   * zepto有自己的一套事件机制，并且对不同的浏览器做了兼容的内部封装处理。
   * 1、像新版本的zepto中已经舍弃了bind，delegate，die，同样jquery中舍弃了live等。
   * 2、现在统一使用on，off标准事件来绑定事件。
   */
  
  $(function () {
      //事件绑定
    $('#box').on('touchstart',function () {
        alert('on事件');
    });
  
    //$('#box').off();
  
    //事件委托
    $('#box1').on('touchstart','p',function () {
      alert($(this).html());
    });
  });
  

form表单

• 1、serialize()
  在Ajax post请求中将用作提交的表单元素的值编译成 URL-encoded 字符串。key(name)/value
  不能使用的表单元素，buttons，未选中的radio buttons/checkboxs 将会被跳过。
  2、serializeArray()
  将用作提交的表单元素的值编译成拥有name和value对象组成的数组。
  不能使用的表单元素，buttons，未选中的radio buttons/checkboxs 将会被跳过。
  3、submit()
  为 “submit” 事件绑定一个处理函数，或者触发元素上的 “submit” 事件。
  当参数function没有给出时，触发当前表单“submit”事件，并且执行默认的提交表单行为，除非阻止默认行为。

• <form method="post">
      <input type="text" name="val" value="kobe"/>
      <input type="password" name="pw" value="123"/>
      <input type="checkbox" checked="checked"  name="rember"/>
      <input type="submit" value="按钮" name="anniu"/>
  </form>
  <script type="text/javascript">
      $(function () {
          var result=$('form').serialize();
          console.log(result);//val=kobe&pw=123&rember=on
          result=$('form').serializeArray();
          console.log(result);
                              /*
                              (3) [{…}, {…}, {…}]
                              0: {name: "val", value: "kobe"}
                              1: {name: "pw", value: "123"}
                              2: {name: "rember", value: "on"}
                              length: 3
                              __proto__: Array(0)
                               */
          $('form').submit(function (event) {
              event.preventDefault();
              if(confirm('你是否要提交')){
                  console.log('提交额');
              }
          });
      });
  </script>
  

ajax案例_剖析

• 如何取消一个ajax请求 ----abort()方法–取消当前请求。
  场景：点击获取验证码的按钮，用户十秒时候可以再次获取，当十秒过后第一次请求没有返回，用户再次点击获取
  然后因为网速好或者其他原因，两次请求同时返回，该怎么解决
  //需求用户可以再次点击的时候取消之前的请求。

  disabled 禁止用户点击，操作按钮，表单项的时候只是针对click事件，并没有对touch事件作出处理。

发送ajax请求实现限制多次点击

        <script type="text/javascript">
          $(function () {
            var xmlHttp = null;//初始化xmlHttp对象
            var isSend = false;//初始化判断按钮是否可以点击
            $('#btn').on('touchstart', function () {
              if(isSend === true){//如果不能点击，直接返回
                  return;
              }
              $(this).css('background', 'gray');
              isSend = true;//修改为不能点击
              if(xmlHttp === null){//如果用户首次点击，发送请求
                  xmlHttp = sendXmlHttp();
              }else{
                  xmlHttp.abort();//再次点击的时候取消上一次请求
                  xmlHttp = sendXmlHttp();//再次发送最新的请求
              }
              setTimeout(function () {
                  $('#btn').css('background', 'red');
                  isSend = false;//2s以后用户可以再次点击
              }, 2000);

            });
            //发送ajax请求的函数;
            function sendXmlHttp() {
              var xmlHttp = null;
              xmlHttp = $.ajax({
                type : 'GET',
                url : 'http://localhost:3000/',
                dataType : 'json',
                success : function (msg) {
                  console.log(msg);
                },
                error : function (error) {
                  console.log(error);
                }
              });
              return xmlHttp;
            }
          });
        </script>

如图所示，当快速点击时，上一个请求就失效，发送一个新的请求