正文

作者打字速度實在不咋地，源碼部分就用圖片代替了，都是截圖，本文講解的Zepto版本是1.2.0，在該版本中的event模塊與1.1.6基本一致。此文的fastclick理解上在看過博客園各個大神的文章后對我確實有很大的幫助，當(dāng)然，我的某些觀點可能不是很準確甚至有錯誤，歡迎討論，白天基本在線。

zepto的event

可以結(jié)合上一篇JavaScript事件詳解-原生事件基礎(chǔ)（一）綜合考慮
源碼暫且不表，github里還有中文網(wǎng)站都能下到最新版的zepto。整個event模塊不長，274行，我們可以看到，整個event模塊，事件綁定核心就是on和off，還有一個trigger用來觸發(fā)，類觀察者模式，可以先看看湯姆大叔的深入理解JavaScript系列（32）：設(shè)計模式之觀察者模式，其余皆為實現(xiàn)的處理函數(shù)。
首先來個demo： 

$("#btn").on("click",function(event){ console.log(event);
})

一個簡單的click事件監(jiān)聽示例。
根據(jù)event模塊中對于事件的使用來看：
7
8

on為開始（add）

6

可以看到，綁定函數(shù)有五個參數(shù):

  • event:事件類型，可以通過空格的字符串方式添加("click mousedown")，或者事件類型為鍵，函數(shù)為值的方式({click:function(),mousedown:function()})。
  • selector:事件委托的節(jié)點選擇器，可不傳
  • data:事件處理程序中的event.data屬性
  • callback:事件處理程序的回調(diào)函數(shù)
  • one:綁定事件后，只觸發(fā)一次回調(diào)

根據(jù)參數(shù)，我們可以很輕易的將on分為幾部分（上圖所示）:

  1. 遞歸序列，處理event為鍵值對的情況
  2. 簡寫方式，如果只是簡單的事件和回調(diào)的話（$("#btn").on("click",function(){})）,one參數(shù)不參與簡寫形式，有單獨的one()方法。