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)