js之事件委托

在js的事件流模型中，事件的触发分为3个阶段：

1、捕获阶段：由外向内传播，寻找目标元素；
2、目标阶段：找到事件触发的目标元素；
3、冒泡阶段：事件由内向外冒泡

事件委托也被称为事件代理，那么是事件委托呢？用一个例子来说明。

<div id='app'>
	<div id='app1'></div>
</div>
假如我们需要为app1添加onclick点击事件，通常做法直接在app1上监听点击事件，
而事件委托的做法是，将事件绑定在app上（父元素），然后利用e.target获取触发事件的元素。
这种就是所谓的事件委托。

事件委托的原理就是依赖于事件流模型，即绑定在app1上的点击事件，由于冒泡关系，实际上都相当于触发了app的点击事件。

事件委托的优点和缺点？

优点：
1、将事件绑定到父元素上，可以扩大点击区域(比如子元素存在padding的情形，或者存在别的标签)，从而增加用户体验。(一种场景：登陆时，我们可以通过点击账号，而在输入框内输入账号，而不是只能点击输入框才行)
2、减少了dom处理时间，原本需要冒泡，而现在可以直接触发事件了。
缺点：
1、当标签层级嵌套很深(比如在祖父元素进行事件委托)，可能会存在性能问题；
2、有些事件如foucs、blus，没有冒泡机制，无法进行事件委托；
3、频繁触发的事件如mouseover等，不适合做事件委托。
//比如mouseover事件中，我们往往需要计算坐标，利用事件委托不好处理。