事件机制&事件代理(事件委托)

事件代理&原理

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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容