zepto與focus/blur與事件委派

時間 2019-11-06

標籤 zepto focus blur 事件委派简体版

原文原文鏈接

---	focusin、focusout	focus、blur
冒泡支持	支持	不支持
瀏覽器支持	如今全部瀏覽器都支持，但之前firefox52如下不支持	全部瀏覽器都支持

註冊focus事件

如下是經簡化後zepto處理註冊focus事件的代碼。運行代碼，能夠觀察到當input得到焦點時觸發了form註冊focus時的回調函數。html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>foucus事件委派</title>
</head>
<body>
<div>
    <form action="" style="padding: 50px;background-color: #00b4fd;width: 200px;height: 200px">
        <input type="text" value="helloworld">
    </form>
</div>
</body>
<script>
    //除了IE,其餘瀏覽器的window對象中都沒有onfocusin屬性，可是其餘瀏覽器addEventListener('focusin')有效
    var focusinSupported = 'onfocusin' in window,
        form = document.forms[0],
        focus = {focus: 'focusin', blur: 'focusout'}

    function callback(event) {
         console.log(event.target.tagName)//INPUT
        console.log(event.type,event.bubbles)//event.bubbles爲false代表當前事件不會向上冒泡
        this.style.background = "red"
    }

    //當type爲focus且瀏覽器支持onfocusin，則focus -> focusin
    function realEvent(type) {
        return focusinSupported && focus[type] || type
    }

    function eventCapture() {
        //不支持onfocusin則在捕獲階段觸發事件
        return !focusinSupported ? true : false
    }

    form.addEventListener(realEvent('focus'), callback, eventCapture());
//    form.addEventListener(realEvent('focus'), callback, false);//focus不會向上冒泡，這樣寫不會觸發回調
</script>
</html>

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

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事件this

var focusinSupported = 'onfocusin' in window

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

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

在捕獲階段獲取目標對象一樣能夠實現事件委派，緣由能夠參考如下引用firefox

即便"DOM2級事件"規範明確要求捕獲階段不會涉及事件目標(做者註釋：即event.target)，但IE九、Safari、Chrome、Firefox 和 Opera9.5及更高版本都會在捕獲階段觸發事件對象上的事件。結果，就是有兩個機會在目標對象上面操做事件。
<<Javascript高級編程>>第三版 13.1.3 DOM事件流 p3483d