事件代理&原理
把原本需要绑定在子元素的响应事件(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
监听器:如何应对事件的发生,如何回应发生的事件,通常以函数的形式来出现。