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)