zepto 事件分析3(add函数)
在上一篇的分析中，最后$.on方法返回了一个add方法函数的执行，在这里先看一下其代码：
function add(element, events, fn, data, selector, delegator, capture){
var id = zid(element), set = (handlers[id] || (handlers[id] = []))
events.split(/\s/).forEach(function(event){
if (event == 'ready') return $(document).ready(fn)
var handler = parse(event)
handler.fn = fn
handler.sel = selector
console.log(handler.e)
// emulate mouseenter, mouseleave
if (handler.e in hover) fn = function(e){
var related = e.relatedTarget
if (!related || (related !== this && !$.contains(this, related)))
return handler.fn.apply(this, arguments)
}
handler.del = delegator
var callback = delegator || fn
handler.proxy = function(e){
e = compatible(e)
if (e.isImmediatePropagationStopped()) return
e.data = data
var result = callback.apply(element, e._args == undefined ? [e] : [e].concat(e._args))
if (result === false) e.preventDefault(), e.stopPropagation()
return result
}
handler.i = set.length
set.push(handler)
if ('addEventListener' in element)
element.addEventListener(realEvent(handler.e), handler.proxy, eventCapture(handler, capture))
})
}在这里先跳过id以及handler部分（handler.e的值即为事件的type属性），该函数主要作用就是将事件添加进元素的事件队列里。
首先是对events进行分割成多个事件，并通过each函数逐个绑定。先来看一下函数里面的条件判定：
hover = { mouseenter: 'mouseover', mouseleave: 'mouseout' }
if (handler.e in hover) fn = function(e){
var related = e.relatedTarget
if (!related || (related !== this && !$.contains(this, related)))
return handler.fn.apply(this, arguments)
}如果事件的type属性是mouseenter或者mouseleave，那么需要重新定义绑定函数fn，什么是relatedTarget呢?
relatedTarget 属性用于在一个事件中查找另外一个元素。有些事件比如 mouseover 通常侧重处理一个特定的目标，而有些有也可能会涉及到第二目标，比如当目标退出第一目标的 mouseover 事件.
获得relatedTarget元素后，zepto对其进行判断，if (!related || (related !== this && !$.contains(this, related)))，假设我们有两个div。
<div class="out">
<div class="in"></div>
</div>我们对div.out定义mouseenter事件后，当我们鼠标从div.in移出来，但鼠标仍然在div.out,那么鼠标自始至终都在div.out中，但还是触发了mouseenter事件，这可能与预期中不同，所以zepto在这里加了判断，如果relatedTarget元素不存在，或者relatedTarget元素不是我们想要触发的元素本身，并且不包含在其中，即返回一个调用原来的fn函数。
接下来就是handler.proxy函数了，该函数的作用就是通过apply调用绑定的事件函数，并返回结果。
最后通过原生addEvent来绑定函数。
最后，总结一下zepto中绑定事件的思路：
1.找到目标元素。 即match = $(e.target).closest(selector, element).get(0)，如果没有selector即跳过。
2.事件委托。如果存在selector，即重新生成一个事件，并通过compitable，createProxy对其进行修改，并改变其currentTarget属性，如果不存在selector，即对要绑定的dom执行compitable，添加eventMethod中的方法。
3.事件绑定，当存在selector触发时，实际触发的是$对象中的dom元素，只是通过事件委托使得像在符合selector条件元素中执行一样。
ps：当存在selector时，假设绑定了click事件，但点击的是$对象中的dom元素并且区域不在selector中，同样触发了事件对象，只是上一篇中的delegator函数里，如果找不到selector，那么跳过，不执行我们绑定的函数。$中的dom元素绑定的是handler.proxy函数,handler.proxy返回的是delegator的执行结果，而delegator如果找不到selector,那么就不执行我们绑定的函数。