事件机制&事件代理（事件委托）

事件代理&原理

把原本需要绑定在子元素的响应事件（click、keydown......）委托给父元素，让父元素担当事件监听的职务。
事件代理的原理是DOM元素的事件冒泡。

为什么要用事件委托

减少DOM操作：不断的与dom节点进行交互，访问dom的次数越多，引起浏览器重绘与重排的次数也就越多，就会延长整个页面的交互就绪时间；用事件委托，就会将所有的操作放到js程序里面，只对它的父级对象进行操作，与dom的操作就只需要交互一次，就能大大的减少与dom的交互次数，提高性能；

事件委托的优点&作用

【1】可以大量节省内存占用，减少事件注册，JavaScript和DOM节点之间的关联变少了

比如在ul上代理所有li的click事件就非常棒；
如果给每个li列表项都绑定一个函数，那对内存的消耗是非常大的，因此较好的解决办法就是将li元素的点击事件绑定到它的父元素ul身上，执行事件的时候再去匹配判断目标元素。

【2】方便地动态添加和修改元素，不需要因为元素的改动而修改事件绑定。实现当新增子对象时无需再次对其绑定（动态绑定事件）

通过 AJAX 或者用户操作动态的增加或者删除列表项li元素，那么在每一次改变的时候都需要重新给新增的元素绑定事件，给即将删去的元素解绑事件；

如果用事件委托就没有这种麻烦，因为事件是绑定在父层的，和目标元素的增减是没有关系的，执行到目标元素是在真正响应执行事件函数的过程中去匹配的；所以使用事件在动态绑定事件的情况下是可以减少很多重复工作的。

事件机制

事件，在触发时执行；（烧水例子：烧水时不影响人做其他事情，水壶开了会响—相当于触发事件，进而有了人过来关火行为事件）

事件流：事件捕获和事件冒泡
事件源：在哪个元素上发生的，p、a、div、form表单
事件：到底发生了什么事件，click、mouseover、load、submit、focus
监听器：如何应对事件的发生，如何回应发生的事件，通常以函数的形式来出现。