focus如何實現事件委託

事件委託是利用事件冒泡機制的一種優化手段，若是有不少列表元素要綁定事件，那麼就能夠用事件委託來優化（不須要給每一個元素都綁定事件）。可是對於focus這種特殊的表單事件，它不會冒泡，那麼又該如何實現這一優化呢？有的人會說這個會同時觸發click，可是若是我是經過tab切換呢？

js事件機制

js的事件機制有兩種，事件冒泡和事件捕獲，冒泡呢就是從觸發事件的節點開始一層一層的往父節點傳播；而事件捕獲偏偏相反，是從根節點（document）往子節點中傳播。

dom事件

1.DOM0級事件處理
dom.onclick = function(){//code}
這些事件會在事件冒泡階段來處理，注意綁定事件必需要再dom節點存在以後。在函數中this關鍵字將指向目標元素，能夠經過this訪問全部的屬性、方法。
刪除綁定事件：直接從新綁定事件便可。
2.DOM2級事件處理
主要使用addEventListener/removeEventListener
dom.addEventListener(type, fn, option)
這裏基本就是三個參數，第一個表示事件類型（click...），第二個事件處理函數，這個函數默認有個參數event，能夠經過參數event獲取一些信息，也能夠經過this來獲取，第三個就有些區別了能夠是一個對象，也能夠是一個boolean。
若是是個對象的時候：

options{
        capture:Boolean //表示會在捕獲階段傳播到該EventTarget上執行。
        once:Boolean//表示只調用一次
        passive：Boolean //表示listener永遠不會調用preventDefault.默認是false，可是監聽touch等事件chrome54以後版本會自動轉爲true。
}

若是是一個Boolean時，表示是否在捕獲階段處理事件。
解除綁定要注意，函數必需要和以前綁定的要一致，這裏的一致是指向一致，並非寫成同樣的就能夠，函數是引用類型，因此經過變量來處理便可。

let fn = function (){}
//綁定
obj.addEventListener('click', fn, false)
//解除
obj.removeEventListener('click', fn, false)

固然對於IE8及一下須要用attachEvent/detachEvent來處理，不一樣點就在於只有兩個參數，第一個參數一樣是事件類型，可是要加上'on'，第二個就是處理函數，沒有第三個參數由於它支持事件冒泡。
函數中的參數event有不少屬性方法，其中eventPhase能夠判斷事件的觸發狀況，1表示捕獲，2表示處於目標，3表示冒泡，而一個完整的事件流程大體就是捕獲->事件目標->冒泡
經過上面的知識咱們很容易就想到在捕獲階段去獲取事件就能夠實現事件委託的效果。

parentObj.addEventListener('focus', fn, true)