資訊專欄INFORMATION COLUMN
摘要：的處理事件注冊(cè)流程大致如下為了有事件冒泡以完成事件委派，一般情況下用代替在瀏覽器不支持的情況下，只能用在捕獲階段觸發(fā)回調(diào)，間接做到事件委派。結(jié)果，就是有兩個(gè)機(jī)會(huì)在目標(biāo)對(duì)象上面操作事件。
| --- | focusin、focusout | focus、blur |
|---|---|---|
| 冒泡支持 | 支持 | 不支持 |
| 瀏覽器支持 | 現(xiàn)在所有瀏覽器都支持，但以前firefox52以下不支持 | 所有瀏覽器都支持 |
以下是經(jīng)簡(jiǎn)化后zepto處理注冊(cè)focus事件的代碼。運(yùn)行代碼，可以觀察到當(dāng)input獲得焦點(diǎn)時(shí)觸發(fā)了form注冊(cè)focus時(shí)的回調(diào)函數(shù)。
foucus事件委派
代碼比較少，下面說(shuō)一下重點(diǎn)。
zepto的處理focus事件注冊(cè)流程大致如下
為了有事件冒泡以完成事件委派，一般情況下zepto用focusin、focusout代替focus、blur
在瀏覽器不支持focusin、focusout的情況下，只能用focus、blur在捕獲階段觸發(fā)回調(diào)，間接做到事件委派。
IE9開始使用DOM事件模型，zepto統(tǒng)一用addEventListener注冊(cè)事件，不支持IE9以下的版本，zepto中的on方法內(nèi)部調(diào)用add方法，add方法經(jīng)過(guò)多步處理，最后是這樣注冊(cè)一個(gè)事件的
form.addEventListener(realEvent("focus"), callback, eventCapture());
zepto是用以下方式來(lái)判斷瀏覽器是否支持focusin事件
var focusinSupported = "onfocusin" in window
除了IE,其他瀏覽器的window對(duì)象中都沒(méi)有onfocusin屬性，其他瀏覽器中focusinSupported為false，但其他瀏覽器也支持focusin，用addEventListener("focusin")是有效的。下表是zepto注冊(cè)focus事件的兩個(gè)重要判斷
| --- | IE9+ | FF、Chrome |
|---|---|---|
| realEvent | focusinSupported:true， focus 轉(zhuǎn)換為 focusin | focusinSupported:false，focus 不作轉(zhuǎn)換 |
| eventCapture | false，冒泡階段觸發(fā)回調(diào) | true，捕獲階段觸發(fā)回調(diào) |
在捕獲階段獲取目標(biāo)對(duì)象同樣可以實(shí)現(xiàn)事件委派，原因可以參考以下引用
