clipboard.js代码分析(3)- good-listener

上一篇文章介绍了clipboard.js这个工具库中的第二个依赖tiny-emitter，这个工具库主要完成了一个简易的事件订阅发布器。这次介绍一下clipboard.js源码中的最后一个依赖的轻型工具库good-listener，这个工具库主要用来对dom的事件绑定进行一层封装，支持事件委托delegate，和jquery的写法非常类似，源码简洁且清晰易懂，对理解事件绑定模型和原理非常有帮助。

快速用法

const listen = require('good-listener')

good-listener支持常见的三种方式来绑定事件

• node节点事件绑定

var logo = document.getElementById('logo');

listen(logo, 'click', function(e) {
    console.log(e);
});

• nodeList多个节点遍历事件绑定

var anchors = document.querySelectorAll('a');

listen(anchors, 'click', function(e) {
    console.log(e);
});

• 字符串形式的委托事件绑定(默认委托的对象document.body)

listen('.btn', 'click', function(e) {
    console.log(e);
});

代码实现

good-listener的实现大致如下

function listen(target, type, callback) {
  if (is.node(target)) {
    return listenNode(target, type, callback);
  } else if (is.nodeList(target)) {
    return listenNodeList(target, type, callback);
  } else if (is.string(target)) {
    return listenSelector(target, type, callback);
  } else {
    throw new TypeError(`argument must be a
    String, HTMLElement, HTMLCollection, or NodeList`);
  }
}

对于node和nodeList节点的实现比较简单，一笔带过，这里主要分析一下delegate委托的实现。

node节点事件绑定

判断一个元素是否是node节点，是通过构造函数constructor和nodeType属性来判断的。

value !== undefined && value instanceof HTMLElement && value.nodeType === 1;

listenNode实现,返回了一个对象，为事件绑定扩展了一个取消绑定的方法destroy

function listenNode(node, type, callback) {
  node.addEventListener(type, callback);

  return {
    destroy: function() {
      node.removeEventListener(type, callback);
    }
  }
}

nodeList多个节点遍历事件绑定

判断一个元素是否是nodeList节点，是通过构造函数constructor和length属性来判断的。且需要保证类数组中的元素都是有效的dom节点

var type = Object.prototype.toString.call(value)

value !== undefined &&
    (type === '[object NodeList]' || type === '[object HTMLCollection]') &&
    ('length' in value) &&
    (value.length === 0 || exports.node(value[0]))

listenNodeList实现， 遍历一下类数组，一次执行事件绑定即可

function listenNodeList(nodeList, type, callback) {
  Array.prototype.forEach.call(nodeList, function(node) {
    node.addEventListener(type, callback);
  });

  return {
    destroy: function() {
      Array.prototype.forEach.call(nodeList, function(node) {
        node.removeEventListener(type, callback);
      });
    }
  }
}

事件委托的实现

简单回顾一下事件委托，比如有以下场景

<div class="wrapper">
    <p class='delegate'>
        <span>1</span>
    </p>
    <p class='delegate'>
        <span>2</span>
    </p>
    <p class='delegate'>
        <span>3</span>
    </p>
    <p class='delegate'>
        <span>4</span>
    </p>
</div>

需要把p标签的点击事件委托到父元素div上面，jquery中的写法是

$('.wrapper').on('click', '.delegate', function(e) {...})

如果我们自己去实现，是不能单纯的去判断点击的target是不是包含delegate,因为点击的元素有可能是子元素span，所以子元素可以通过冒泡找到delegate，那么委托也是应该可以触发的。

再介绍一个方法，下面要用到，Element的原型上有一个matches方法，接受一个selector字符串，如果element元素被指定的字符串选择，那么返回true.

1.首先来模拟这个冒泡的过程

// document节点
const DOCUMENT_NODE_TYPE = 9
function closet (element, selector) {
    while(element && element.nodeType !== DOCUMENT_NODE_TYPE) {
        if (typeof element.matches === 'function' && element.matches(selector)) {
            return element
        }
        element = element.parentNode
    }
}

这个函数就是判断点击的元素是否能够向上冒泡（不断的获取父元素）匹配到指定的委托元素。
结合上面例子就是span能否向上找到delegate

2.使用代理模式为事件的回调函数封装一层判断逻辑，当符合委托逻辑的时候，才去执行回调函数
并且为event对象添加一个属性delegateTarget，这样在event中可以拿到对应的三个对象

• this和e.currentTarget 是被委托的元素
• e.delegateTarget 是委托元素
• e.target 是点击元素

function listener(element, selector, type, callback) {
  return function(e) {
    e.delegateTarget = closest(e.target, selector);

    if (e.delegateTarget) {
      callback.call(element, e);
    }
  }
}

3.delegate内部封装

let _delegate = (element, selector, type, callback, useCapture) => {
  // 将element和selector封装一层
  let listenerFn = listener.apply(this, arguments)
  element.addEventListener(type, listenerFn, useCapture)
  return {
    destroy () {
      element.removeListener(type, listenerFn, useCapture) 
    }
  }
}

4.delegate
分为两种情况，被委托可以是一个dom元素，也可以是css选择器字符串，如下所示

delegate(document.body, '.btn', 'click', function(e) {
    console.log(e.delegateTarget);
}, false);

delegate('.container', '.btn', 'click', function(e) {
    console.log(e.delegateTarget);
}, false);

分别处理即可

let delegate = (elements, selector, type, callback, useCapture) => {
  if (typeof elements.addEventListener === 'function') {
    return _delegate.apply(null, arguments)
  }

  if (typeof elements === 'string') {
    elements = document.querySelectorAll(elements)
  }
  return Array.prototype.map.call(elements, function (element) {
    return _delegate(element, selector, type, callback, useCapture)
  })
}

结语

本次介绍的good-listener这个工具库的用法和源码分析，介绍了node，nodeList的事件绑定封装的实现，尤其探求了一下委托的实现方法，用不多的代码实现了兼容性很好的delegate，至此clipboard.js的依赖都介绍完了，下一篇文章会整合代码，将完整的clipboard.js实现展现出来。