子節點含有表單元素的div元素的blur事件

1.div元素的blur事件

blur事件一般在表單元素如input元素纔是存在的，對div、span等元素時無效的，但是可以給div元素加上tabindex屬性，也可以讓div等元素有焦點，所以blur事件就有效了，如：

    <div id="divblur" tabindex="2">
        <span>類型：</span>
    </div>

    document.querySelector('#divblur').addEventListener('blur', function(e){
        console.log('blur event')
    })

點擊div元素，就會觸發blur事件，控制檯會打印日誌 "blur event"

但是，會有一個問題，由於添加了‘tabindex’屬性，當你點擊div元素的時候，div元素周圍會有一個藍色的焦點輪廓，如下圖：

這樣對有些人來說是不可接受的，那麼怎麼把它去掉呢，很簡單，直接在div元素上加上'outline: none' 的樣式就可以了。如：

    <style>
        #divblur{
            outline: none;
        }
    </style>

2.子節點含有表單元素如input元素的div的blur事件

如果你有這樣的需求：div元素包裹有input元素，當你在input框中輸入一些文本後，點擊這個div元素區域外側，這時你想讓整個div失去焦點觸發blur事件，在blur事件中進行一些邏輯處理。但是你直接給div綁定blur事件，或者給div加上tabindex屬性然後再綁定blur事件，你發現都不會觸發div元素的blur事件。

    <div id="divblur" tabindex="2">
        <span>div元素的blur事件</span>
        <input type="text" />
    </div>

    document.querySelector('#divblur').addEventListener('blur', function(e){
        console.log('blur event')
    })

這是因爲blur事件不支持冒泡，你在input中輸入文字後，然後點擊外側區域失去焦點，此時如果input元素綁定了blur事件，就會觸發該事件，但是不會冒泡到父元素div上，也就不會觸發blur事件。

那麼，有什麼辦法可以達到目的呢，有兩種方法：

（1）既然blur事件不支持冒泡, 那就啓用捕獲，在捕獲階段觸發div的blur事件

    <div id="divblur" tabindex="2">
        <span>div元素的blur事件</span>
        <input type="text" />
    </div>
    // 第三個參數設爲true，開啓捕獲
    document.querySelector('#divblur').addEventListener('blur', function(e){
        console.log('blur event')
    }, true)

（2）使用focusout事件替代blur事件，focusout事件和blur事件基本上效果是一樣的，不同的是，focusout事件支持冒泡。

    <div id="divblur" tabindex="2">
        <span>div元素的blur事件</span>
        <input type="text" />
    </div>
    // focusout事件代替blur事件
    document.querySelector('#divblur').addEventListener('focusout', function(e){
        console.log('blur event')
    })

最後需要說明的是，這兩種方法，div元素tabindex屬性都需要加上，因爲div本身沒有焦點屬性。