zepto與focus/blur與事件委派

TNFE 發布于2019-08-22 14:04 / 1593人閱讀

摘要：的處理事件注冊流程大致如下為了有事件冒泡以完成事件委派，一般情況下用代替在瀏覽器不支持的情況下，只能用在捕獲階段觸發回調，間接做到事件委派。結果，就是有兩個機會在目標對象上面操作事件。

---	focusin、focusout	focus、blur
冒泡支持	支持	不支持
瀏覽器支持	現在所有瀏覽器都支持，但以前firefox52以下不支持	所有瀏覽器都支持

注冊focus事件

以下是經簡化后zepto處理注冊focus事件的代碼。運行代碼，可以觀察到當input獲得焦點時觸發了form注冊focus時的回調函數。




    
    foucus事件委派

代碼比較少，下面說一下重點。

zepto的處理focus事件注冊流程大致如下

為了有事件冒泡以完成事件委派，一般情況下zepto用focusin、focusout代替focus、blur

在瀏覽器不支持focusin、focusout的情況下，只能用focus、blur在捕獲階段觸發回調，間接做到事件委派。

IE9開始使用DOM事件模型，zepto統一用addEventListener注冊事件，不支持IE9以下的版本，zepto中的on方法內部調用add方法，add方法經過多步處理，最后是這樣注冊一個事件的

form.addEventListener(realEvent("focus"), callback, eventCapture());

zepto是用以下方式來判斷瀏覽器是否支持focusin事件

var focusinSupported = "onfocusin" in window

除了IE,其他瀏覽器的window對象中都沒有onfocusin屬性，其他瀏覽器中focusinSupported為false，但其他瀏覽器也支持focusin，用addEventListener("focusin")是有效的。下表是zepto注冊focus事件的兩個重要判斷

---	IE9+	FF、Chrome
realEvent	focusinSupported:true， focus 轉換為 focusin	focusinSupported:false，focus 不作轉換
eventCapture	false，冒泡階段觸發回調	true，捕獲階段觸發回調

在捕獲階段獲取目標對象同樣可以實現事件委派，原因可以參考以下引用

即使"DOM2級事件"規范明確要求捕獲階段不會涉及事件目標(作者注釋：即event.target)，但IE9、Safari、Chrome、Firefox 和 Opera9.5及更高版本都會在捕獲階段觸發事件對象上的事件。結果，就是有兩個機會在目標對象上面操作事件。

<>第三版 13.1.3 DOM事件流 p348

注冊focusin事件

除了IE9-，在zepto中，其他主流瀏覽器都可以注冊focusin事件

總結

現在所有瀏覽都已經支持foucsin，未來屬于支持冒泡的focusin

參考

MDN focusin瀏覽器支持

<>第三版 13.1.3 DOM事件流

云服務器 GPU云服務器事件委派委派事件事件與動畫權限委派

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/92830.html

讀Zepto源碼之Event模塊

摘要：不支持事件冒泡帶來的直接后果是不能進行事件委托，所以需要對和事件進行模擬。調用函數，分隔出參數的事件名和命名空間。這里判斷是否為函數，即第一種傳參方式，調用函數的方法，將上下文對象作為的第一個參數，如果存在，則與的參數合并。 Event 模塊是 Zepto 必備的模塊之一，由于對 Event Api 不太熟，Event 對象也比較復雜，所以乍一看 Event 模塊的源碼，有點懵，細看下...

vpants 2019-08-20 18:06 評論0 收藏0
向zepto.js學習如何手動(trigger)觸發DOM事件

摘要：好啦我們已經解決了是啥的疑問了，現在回去開始一步步解讀如何實現手動觸發事件。我們主要看看這里面幾乎含有如何手動觸發一個事件的大部分步驟和內容。前言前端在最近幾年實在火爆異常，vue、react、angular各路框架層出不窮，咱們要是不知道個雙向數據綁定，不曉得啥是虛擬DOM，也許就被鄙視了。火熱的背后往往也是無盡的浮躁，學習這些先進流行的類庫或者框架可以讓我們走的更快，但是靜下心...

spacewander 2019-08-20 17:04 評論0 收藏0
向zepto.js學習如何手動(trigger)觸發DOM事件

摘要：好啦我們已經解決了是啥的疑問了，現在回去開始一步步解讀如何實現手動觸發事件。我們主要看看這里面幾乎含有如何手動觸發一個事件的大部分步驟和內容。前言前端在最近幾年實在火爆異常，vue、react、angular各路框架層出不窮，咱們要是不知道個雙向數據綁定，不曉得啥是虛擬DOM，也許就被鄙視了。火熱的背后往往也是無盡的浮躁，學習這些先進流行的類庫或者框架可以讓我們走的更快，但是靜下心...

fuyi501 2019-08-29 12:44 評論0 收藏0
向zepto.js學習如何手動(trigger)觸發DOM事件

摘要：好啦我們已經解決了是啥的疑問了，現在回去開始一步步解讀如何實現手動觸發事件。我們主要看看這里面幾乎含有如何手動觸發一個事件的大部分步驟和內容。前言前端在最近幾年實在火爆異常，vue、react、angular各路框架層出不窮，咱們要是不知道個雙向數據綁定，不曉得啥是虛擬DOM，也許就被鄙視了。火熱的背后往往也是無盡的浮躁，學習這些先進流行的類庫或者框架可以讓我們走的更快，但是靜下心...

Julylovin 2019-08-01 16:57 評論0 收藏0
窺探zepto的事件模塊

摘要：寫在前面通過本文，您可以了解的事件模塊，之后到底發生了什么樣的事情，如何實現的事件委托，如何實現的自定義事件等問題。個人理解這么做目的在于便于移除事件，這樣就可以使用匿名函數，而且仍可以將該匿名函數移除。寫在前面通過本文，您可以了解zepto的事件模塊，$(selector).on之后到底發生了什么樣的事情，如何實現的事件委托【$(selector).delegate】，如何實現的...

frolc 2019-08-21 11:18 評論0 收藏0