Passive Event Listeners 这个东西其实有一段时间了，关注 2016 Google I/O 的 Mobile Talk 的同学应该有些印象。

1、它有什么用？

A new feature in the DOM spec that enable developers to opt-in to better scroll performance by eliminating the need for scrolling to block on touch and wheel event listeners.

Developers can annotate touch and wheel listeners with {passive: true} to indicate that they will never invoke preventDefault.

提高页面的滑动流畅度。

如何使用：

function handler () {
  console.log('DDFE');
}
document.addEventListener('mousewheel', handler, {passive: true})

其实变化就是：前端 DOM 中常用常考的 addEventListener 的第三个参数：之前都是 true | false

写了一个聊天程序。
DEMO

主要是了解WebSocket相关知识。

核心思路：监听被委托人相关事件，通过当前taget判断当前是否是委托人，是的就执行相关回调。

<ul>
  <li class='target'>
      <span>test</span>
 </li>
</ul>

点击class为 target 的li可以 alert 出其所含内容（如上方代码点击弹出“test”）
在ul动态新增li元素的情况下，也要有相同效果
使用原生js实现，不使用jQuery

    var ul = document.querySelector('ul');
    ul.addEventListener('click', function (e) {
        var target = e.target,
            f = function (t) { console.log(t);
                var className = t.className;
                if (t.tagName === 'LI' && className && className.indexOf('target') >= 0) {
                    alert(t.innerHTML)
                } else if(t != ul) {
                    f(t.parentNode)
                }
            };
        f(target)
    }, false)

现在有一个按钮 $btn，我们给它绑定了点击事件，让它点一次就发一次POST请求去后端提交统计数据：

 var $btn = $('#btn');
    $btn.click(function(){
        $.ajax({ url: "a.php", type: 'POST', success: function(){
            console.log(ret);
        }});
    });

但是如果用户在很短的时间内点了好几下按钮（比如在1s里快速地点了5下），会向服务器发送很多条数据，这样并发量大的情况下服务器可能吃不消。
而且有时候我们也希望当前一条请求结束了（服务器返回数据了）之后才可以发起第二条请求。

所以请你封装一个叫 $.smartAjax 方法来做防抖处理，它可以有一个参数smartType用于确定防抖方式——如果其值为 0 则要求在 500ms 内只允许发出一条请求；
如果参数smarType值为 1 则表示只允许在前一条收到服务器响应（包括失败的响应）后才可以继续发送新请求。

示例：

    var $btn1 = $('#btn1');
    var $btn2 = $('#btn2');

    $btn1.click(function(){
        //每500ms最多只会发出一条请求
        $.smartAjax({ smartType: 0, url: "a.php", type: 'POST', success: function(){
            console.log(ret);
        }});
    });
    $btn2.click(function(){
        //只有当前一条请求收到服务器响应了，才能再发出新的请求
        $.smartAjax({ smartType: 1, url: "a.php", type: 'POST', success: function(){
            console.log(ret);
        }});
    });

    $.smartAjax = ....   //实现它

实现

$.smartAjax = (function () {
      var _time_start = 0,
          _flag = 1; //用于判断是否可以发送请求

      return function (opt) {
        var noop = function () {},
            validFun = function (f) {
              return typeof f === 'function' ? f : null
            },
            smartType = opt && opt.smartType,
            processResponse = function (callback) {
              ['success', 'error'].forEach(function (resFunName) {
                var resFun = validFun(opt[resFunName]) || noop;
                opt[resFunName] = function () {
                  callback();
                  resFun.call(this, arguments)
                }
              });
            },
            typeCallback = {
              0: function () {
                _flag && (_time_start = Date.now());
                if(_flag==0 && Date.now() - _time_start > 300) {
                  _flag = 1;
                  _time_start = Date.now()
                }
              },
              1: function () {
                if(_time_start) { //防止先调用smartType=0再调用smartType=1会失效
                  _flag = 1;
                  _time_start = 0
                }
                processResponse(function(){
                  _flag = 1;
                })
              }
            };
        var hasSmartType = typeCallback[smartType];
        hasSmartType && typeCallback[smartType]();
        if(_flag) {
          hasSmartType && (_flag = 0);
          return $.ajax(opt);
        } else {
          return $.Deferred()
        }
      }
    })();

简介

hammer.js是一个多点触摸手势库，能够为网页添加多点触摸事件，免去自己监听底层touchstart、touchmove、touchend事件。hammer.js不但支持触摸事件的浏览器，在桌面浏览器也能将鼠标点击事件当做触摸，方便开发人员进行调试。

特点

不需要依赖任何其他的框架，并且整个框架非常小。

事件架构

hammer.js主要对触屏的六大事件进行监听。

1.pan事件：在指定的dom区域内，一个手指放下并移动时间，即触屏中的拖动事件。这个事件在触屏中比较常用。该事件还可以对以下事件进行监听并处理：
panstart拖动开始、panmove拖动过程、panend拖动结束、pancancel拖动取消、panleft向左拖动、panright向右拖动、panup向上拖动、pandown向下拖动。
2.pinch事件：在指定区域内两个手指（默认）或多个手指相对移动（越来越近）或相对移动（越来越远）事件。该事件分别对以下事件进行监听:
pinchstart多点触控开始、pinchmove多点触控过程、pinchend多点触控结束、pinchcancel多点触控取消、pinchin多点触控手指靠近、pinchout多点触控手指越来越远。
3.press事件：在指定的dom区域内按压，该事件不能包含移动，最小按压时间为500毫秒。常用于手机上的“复制、粘贴”等功能。该事件对以下事件进行监听处理：
pressup按压事件离开时触发
4.rotate事件：在指定的dom区域内，当两个手指或更多手指呈圆形旋转的时候触发。该事件对以下事件进行监听：
rotatestart旋转开始、rotatemove旋转过程、rotateend旋转结束、rotatecancel旋转取消。
5.swipe事件：一个手指在屏幕上滑动，即滑动事件。该事件对以下事件进行监听：
Swipeleft：向左滑动、Swiperight：向右滑动、Swipeup：向上滑动、Swipedown：向下滑动。
6.tap事件：在指定dom事件区域内，一个手指轻拍或点击时触发该事件(类似PC端的click)。该事件最大点击时间为250毫秒，如果超过250毫秒则按Press事件进行处理。

注意点

tap和click在安卓系统上可以同时触发，但click事件会有几百毫秒的延迟判断是否是点击事件，即tap事件先触发，过一段时间在触发click事件。

使用方法

<script>
//创建一个新的hammer对象并且在初始化时，指定要处理的dom元素
var hammertime=new Hammer(document.getElementById('test'))
//为该dom元素添加指定的事件，如触屏移动事件
hammertime.on('pan',function(e){
    console.log(e)
})
</script>
rotate,pinch需要手动添加事件监听程序。

//如
 var hammertime = new Hammer(document.getElementById("test"));
 hammertime.add(new Hammer.rotate());
 hammertime.on("rotate",function(){.......})