上面的博文介紹的都是原始碼src下的zepto.js檔案，接著我們來看看zepto的事件模組，對應檔案是event.js

1.繫結事件

例項Demo

    <div id="foo1">foo1</div>
    <div id="foo2">foo2</div>
    <div id="foo3">foo3
        <div id="foo31">foo31</div>
    </div>
    <a href="demo1.html" class="my-a">
 
demo1.html</a>
    <script src="zepto.js"></script>
    <script type="text/javascript">
    var div1 = $('#foo1');
    var div2 = $('#foo2');
    $('body').on('click', '#foo1', function(event) {
        console.log(event);
        event.preventDefault();
        alert("點選");
    });
    $('body'
 
).on('click', '#foo2', 'test',function(event) {
        event.preventDefault();
        alert("點選foo2"+event.data);//點選foo2test
    });
    $('#foo3').on('click', function(event) {
        alert("點選");
    });
    $('body').on('click', '.my-a', false);//不跳轉
    </script>

1.1 handlers物件

handlers

{
  1: [ // handlers的值為DOM元素的_zid
    {
      del: function() {}, // 實現事件代理的函式
      e: "click", // 事件名稱
      fn: function() {}, // 使用者傳入的回撥函式
      i: 0, // 該物件在數組裡的下標
      ns: "", // 事件的名稱空間，只用使用$.fn.triggerHandler時可用，$.fn.trigger不能使用。
      proxy: function(e) {}, // 真正繫結事件時的回撥函式，裡面判斷呼叫del或者fn
      sel: undefined // 要進行事件代理時傳入的selector
    }
  ]
}

1.2 全域性變數

var _zid = 1, //用來生成標示元素和回撥函式的id，每標示一個就+1
    undefined,
    handlers = {},
    slice = Array.prototype.slice,
    isFunction = $.isFunction,
    isString = function(obj) {
        return typeof obj == 'string';
    },
    specialEvents = {},
    focusinSupported = 'onfocusin' in window,
    focus = { focus: 'focusin', blur: 'focusout' },
    hover = { mouseenter: 'mouseover', mouseleave: 'mouseout' };

1.3 新增三個方法：isDefaultPrevented、isDefaultPrevented和isPropagationStopped

• 如果preventDefault()被該事件的例項呼叫，那麼返回true。 這可作為跨平臺的替代原生的defaultPrevented屬性，如果defaultPrevented缺失或在某些瀏覽器下不可靠的時候
• 如果stopImmediatePropagation()被該事件的例項呼叫，那麼返回true。Zepto在不支援該原生方法的瀏覽器中實現它（例如老版本的Android）
• 如果stopPropagation()被該事件的例項呼叫，那麼返回true

通過改寫原生的preventDefault、stopImmediatePropagation和stopPropagation方法實現新增三個方法

新增的三個方法：

var returnTrue = function() {
        return true;
    },
    returnFalse = function() {
        return false;
    }, // 構建事件物件時所不要的幾個屬性：returnValue、layerX和layerY(還有以大寫字母開頭的屬性？)
    ignoreProperties = /^([A-Z]|returnValue$|layer[XY]$)/,
    // 事件物件需要新增的三個方法名
    eventMethods = {
        preventDefault: 'isDefaultPrevented',
        stopImmediatePropagation: 'isImmediatePropagationStopped',
        stopPropagation: 'isPropagationStopped'
    };
// 新增eventMethods裡面的三個方法：isDefaultPrevented、isDefaultPrevented和isPropagationStopped
function compatible(event, source) {
    if (source || !event.isDefaultPrevented) {
        source || (source = event);
        //遍歷eventMethods物件，name是key，predicate是value
        $.each(eventMethods, function(name, predicate) {
            var sourceMethod = source[name];
            event[name] = function() {
                this[predicate] = returnTrue;
                return sourceMethod && sourceMethod.apply(source, arguments);
            }
            event[predicate] = returnFalse;
        })
        try {
            event.timeStamp || (event.timeStamp = Date.now())
        } catch (ignored) {}
        // 設定isDefaultPrevented預設指向的函式
        // 如果有defaultPrevented屬性，就根據defaultPrevented的值來判斷
        if (source.defaultPrevented !== undefined ? source.defaultPrevented :
            'returnValue' in source ? source.returnValue === false :
            //getPreventDefault和defaultPrevented屬性類似，不過是非標準的。為了相容沒有defaultPrevented引數的瀏覽器
            source.getPreventDefault && source.getPreventDefault())
            event.isDefaultPrevented = returnTrue;
    }
    return event;
}

1.4 $.fn.on實現

/**呼叫形式：
 *on(type, [selector], function(e){ ... })
 *on(type, [selector], [data], function(e){ ... })
 *on({ type: handler, type2: handler2, ... }, [selector]) 
 *on({ type: handler, type2: handler2, ... }, [selector], [data])
 */
$.fn.on = function(event, selector, data, callback, one) {
    var autoRemove, delegator, $this = this;
    //event 為物件，批量繫結事件
    if (event && !isString(event)) {
        $.each(event, function(type, fn) {
            $this.on(type, selector, data, fn, one);
        })
        return $this;
    }
    //處理引數
    //沒傳selector引數 callback不是函式，且不為false
    if (!isString(selector) && !isFunction(callback) && callback !== false)
        callback = data, data = selector, selector = undefined;
    //沒傳data
    if (callback === undefined || data === false)
        callback = data, data = undefined;

    if (callback === false) callback = returnFalse;
    // 給每一個Z物件裡面的元素繫結事件
    return $this.each(function(_, element) {
        // 繫結一次，自動解綁
        if (one) autoRemove = function(e) {
                remove(element, e.type, callback);
                return callback.apply(this, arguments);
            }
            //有selector選擇符，使用代理
        if (selector) delegator = function(e) {
                var evt, match = $(e.target).closest(selector, element).get(0);
                if (match && match !== element) {
                    evt = $.extend(createProxy(e), { currentTarget: match, liveFired: element });
                    return (autoRemove || callback).apply(match, [evt].concat(slice.call(arguments, 1)));
                }
            }
            //繫結事件在這裡
        add(element, event, callback, data, selector, delegator || autoRemove);
    })
}

1.5 核心函式add remove

/**
 * 新增事件的實際方法
 * @param {元素}   element   DOM元素
 * @param {String}   events    事件字串
 * @param {Function} fn        回撥函式
 * @param {All}      data      繫結事件時傳入的data，可以是各種型別   
 * @param {String}   selector  被代理元素的css選擇器
 * @param {[type]}   delegator 進行事件代理的函式
 * @param {[type]}   capture   指定捕獲或者冒泡階段
 */
function add(element, events, fn, data, selector, delegator, capture) {
    var id = zid(element),
        set = (handlers[id] || (handlers[id] = []));
    //多個事件以空格為間隔
    events.split(/\s/).forEach(function(event) {
        //為ready
        if (event == 'ready') return $(document).ready(fn);
        //*************************構建handler*************************
        var handler = parse(event);
        handler.fn = fn;
        handler.sel = selector;

        // emulate mouseenter, mouseleave
        // mouseenter、mouseleave通過mouseover、mouseout來模擬realEvent函式處理
        // hover = { mouseenter: 'mouseover', mouseleave: 'mouseout' }
        if (handler.e in hover) fn = function(e) {
            //http://www.w3school.com.cn/jsref/event_relatedtarget.asp
            // relatedTarget為相關元素，只有mouseover和mouseout事件才有
            // 對mouseover事件而言，相關元素就是那個失去游標的元素;
            // 對mouseout事件而言，相關元素則是獲得游標的元素。
            var related = e.relatedTarget;
            if (!related || (related !== this && !$.contains(this, related)))
                return handler.fn.apply(this, arguments);
        };
        handler.del = delegator;
        // 需要進行事件代理時，呼叫的是封裝了fn的delegator函式
        var callback = delegator || fn;
        handler.proxy = function(e) {
            e = compatible(e); //無第二個引數，其實就是e = e;
            if (e.isImmediatePropagationStopped()) return;
            e.data = data;
            var result = callback.apply(element, e._args == undefined ? [e] : [e].concat(e._args))
                //當事件處理函式返回false時，阻止預設操作和冒泡
            if (result === false) e.preventDefault(), e.stopPropagation();
            return result;
        }
        handler.i = set.length; // 把handler在set中的下標賦值給handler.i
        set.push(handler);
        //*************************構建handler end*************************
        if ('addEventListener' in element)
        //addEventListener -- https://developer.mozilla.org/zh-CN/docs/Web/API/EventTarget/addEventListener
        //使用`addEventListener`所傳入的真正回撥函式就是proxy函式
            element.addEventListener(realEvent(handler.e), handler.proxy, eventCapture(handler, capture));
    })
}
//刪除handler
function remove(element, events, fn, selector, capture) {
    var id = zid(element);
    (events || '').split(/\s/).forEach(function(event) {
        findHandlers(element, event, fn, selector).forEach(function(handler) {
            delete handlers[id][handler.i];
            if ('removeEventListener' in element)
                element.removeEventListener(realEvent(handler.e), handler.proxy, eventCapture(handler, capture));
        })
    })
}

$.event = { add: add, remove: remove };

1.6 工具函式

1.6.1 zid函式

//通過一個_zid而不是通過DOM物件的引用來連線handler是因為：防止移除掉DOM元素後，
//handlers物件還儲存著對這個DOM元素的引用。通過使用_zid就可以防止這種情況發生，
//避免了記憶體洩漏
function zid(element) {
    return element._zid || (element._zid = _zid++);
}

1.6.2 focus和blur事件的冒泡問題

//focus和blur事件本身是不冒泡的，如果需要對這兩個事件進行事件代理，就要運用一些小技巧。
//首先，如果瀏覽器支援focusin和focusout，就使用這兩個可以冒泡事件來代替。
//如果瀏覽器不支援focusion和focusout，就利用focus和blur捕獲不冒泡的特性，
//傳入addEventListener中的第三個引數設定true，以此來進行事件代理
function eventCapture(handler, captureSetting) {
    return handler.del &&
        (!focusinSupported && (handler.e in focus)) ||
        !!captureSetting;
}

1.6.3 實際傳入到addEventListener第二個引數

// 構建事件代理中的事件物件
function createProxy(event) {
    var key, proxy = { originalEvent: event }; // 新的事件物件有個originalEvent屬性指向原物件
    // 將原生事件物件的屬性複製給新物件，除了returnValue、layerX、layerY和值為undefined的屬性
    // returnValue屬性為beforeunload事件獨有
    for (key in event)
        if (!ignoreProperties.test(key) && event[key] !== undefined) proxy[key] = event[key];
        // 新增eventMethods裡面的幾個方法，並返回新的事件物件
    return compatible(proxy, event);
}

1.6.4 其餘工具函式

// 根據給定的引數在handlers變數中尋找對應的handler
function findHandlers(element, event, fn, selector) {
    event = parse(event); // 解析event引數，分離出事件名和ns
    if (event.ns) var matcher = matcherFor(event.ns);
    // 取出所有屬於element的handler，並且根據event、fn和selector引數進行篩選
    return (handlers[zid(element)] || []).filter(function(handler) {
        return handler && (!event.e || handler.e == event.e) // 事件名不同的過濾掉
            && (!event.ns || matcher.test(handler.ns)) // 名稱空間不同的過濾掉
            && (!fn || zid(handler.fn) === zid(fn)) // 回撥函式不同的過濾掉(通過_zid屬性判斷是否同一個函式)
            && (!selector || handler.sel == selector); // selector不同的過濾掉
    })
}
//解析event引數，如 "click.abc"，abc作為ns(名稱空間)
function parse(event) {
    var parts = ('' + event).split('.');
    return { e: parts[0], ns: parts.slice(1).sort().join(' ') }
}
// 生成匹配的namespace表示式：'abc def' -> /(?:^| )abc .* ?def(?: |$)/
function matcherFor(ns) {
    return new RegExp('(?:^| )' + ns.replace(' ', ' .* ?') + '(?: |$)')
}

function realEvent(type) {
    return hover[type] || (focusinSupported && focus[type]) || type;
}

2.取消事件繫結

示例：

 $('body').off('click', '#foo1');

 $.fn.off = function(event, selector, callback) {
     var $this = this;
     if (event && !isString(event)) {
         $.each(event, function(type, fn) {
             $this.off(type, selector, fn);
         })
         return $this;
     }

     if (!isString(selector) && !isFunction(callback) && callback !== false)
         callback = selector, selector = undefined;

     if (callback === false) callback = returnFalse;

     return $this.each(function() {
         remove(this, event, callback, selector);
     })
 }

3.觸發事件

$.Event:建立並初始化一個指定的DOM事件。如果給定properties物件，使用它來擴展出新的事件物件。預設情況下，事件被設定為冒泡方式；這個可以通過設定bubbles為false來關閉。
通過document.createEvent建立事件物件，然後通過dispatchEvent（原始碼中在$.fn.trigger和$.fn.triggerHandler中處理）來出發。

// Create the event.
var event = document.createEvent('Event');

// Define that the event name is 'build'.
event.initEvent('build', true, true);

// Listen for the event.
elem.addEventListener('build', function (e) {
  // e.target matches elem
}, false);

// target can be any Element or other EventTarget.
elem.dispatchEvent(event);

上面有點要注意的就是當建立滑鼠相關的事件時要在document.createEvent的第一個引數中傳入MouseEvents，以提供更多的事件屬性。滑鼠相關的事件指的是：click、mousedown、mouseup和mousemove
示例：

$(document).on('mylib:change', function(e, from, to) {
        console.log('change on %o with data %s, %s', e.target, from, to)
    })
$(document.body).trigger('mylib:change', ['one', 'two'])

原始碼實現：

$.fn.trigger = function(event, args) {
    event = (isString(event) || $.isPlainObject(event)) ? $.Event(event) : compatible(event);
    event._args = args;
    return this.each(function() {
        // handle focus(), blur() by calling them directly
        // 過直接呼叫focus()和blur()方法來觸發對應事件，這算是對觸發事件方法的一個優化
        if (event.type in focus && typeof this[event.type] == "function") {
            this[event.type]();
        }
        // items in the collection might not be DOM elements
        else if ('dispatchEvent' in this) {
            this.dispatchEvent(event);
        } else {
            $(this).triggerHandler(event, args);
        }
    });
};

// triggers event handlers on current element just as if an event occurred,
// doesn't trigger an actual event, doesn't bubble
// 直接觸發事件的回撥函式，而不是直接觸發一個事件，所以也不冒泡
$.fn.triggerHandler = function(event, args) {
    var e, result;
    this.each(function(i, element) {
        e = createProxy(isString(event) ? $.Event(event) : event);
        e._args = args;
        e.target = element;
        $.each(findHandlers(element, event.type || event), function(i, handler) {
            result = handler.proxy(e);
            if (e.isImmediatePropagationStopped()) return false;
        });
    });
    return result;
};
//生成一個模擬事件，如果是滑鼠相關事件，document.createEvent傳入的第一個引數為'MouseEvents'
$.Event = function(type, props) {
    if (!isString(type)) props = type, type = props.type;
    var event = document.createEvent(specialEvents[type] || 'Events'),
        bubbles = true
    if (props)
        for (var name in props)(name == 'bubbles') ? (bubbles = !!props[name]) : (event[name] = props[name]);
    event.initEvent(type, bubbles, true);
    return compatible(event);
};

4.bind，unbind，one實現

 $.fn.bind = function(event, data, callback) {
     return this.on(event, data, callback)
 }
 $.fn.unbind = function(event, callback) {
     return this.off(event, callback)
 }
 $.fn.one = function(event, selector, data, callback) {
     return this.on(event, selector, data, callback, 1)
 }