正文

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

zepto的event

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

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

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

on為開始（add）

6

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

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

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

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