美文网首页
事件代理

事件代理

作者: stefanie_lucky | 来源:发表于2017-08-30 17:30 被阅读0次

为什么要使用事件代理?

抽取相同的事件处理函数或者是对象,提高程序的工作效率。

添加到页面上的事件处理程序数量将直接关系到页面的整体运行性能,因为需要不断的与dom节点进行交互,访问dom的次数越多,引起浏览器重绘与重排的次数也就越多,就会延长整个页面的交互就绪时间,这就是为什么性能优化的主要思想之一就是减少DOM操作的原因;如果要用事件委托,就会将所有的操作放到js程序里面,与dom的操作就只需要交互一次,这样就能大大的减少与dom的交互次数,提高性能;

每个函数都是一个对象,是对象就会占用内存,对象越多,内存占用率就越大,自然性能就越差了。

什么是事件代理?

事件委托实际上是使用了事件冒泡的原理:从事件最深层的节点开始,逐步向上传播事件。

将不好完成的事件交给另一方完成。经常使用的是为了提高性能,将子对象的事件提交给父对象,根据冒泡原理,让父对象完成,减少相应的dom操作。

事件委托最好用的地方在于,新添加的子节点,由于是冒泡向父节点来完成事件,不用再单独给子节点添加事件或是改变原有的dom结构。

ps:如何寻找事件源

js提供了target函数来指向事件源。

function getEventTarget(e) {

e = e || window.event;

vartarget = ev.target ||ev.srcElement;

}

相关文章

  • 第二十天web前端面试题

    1,什么是事件代理且描述事件代理的原理及为什么要用事件代理? 事件委托也叫事件代理。利用事件冒泡,让自己的触发的事...

  • 概念

    事件委托,事件代理 事件代理又称之为事件委托。是JavaScript中常用绑定事件的常用技巧。顾名思义,“事件代理...

  • Block和代理协议

    代理协议: 1.要确定谁是代理对象,谁是被代理对象。 事件在哪里产生,谁就被代理对象。 事件在哪里响应,谁就是代理...

  • dom事件代理

    实现一个js事件代理的模块,帮助用户快速实现事件代理。

  • 【事件代理】 动态数据列表里,如何监听每条数据的点击?

    前言 在问题前,需要先清楚关于事件冒泡、事件代理的定义 事件冒泡 事件代理 原理: 事件冒泡机制实现方式:可用ad...

  • 前端面试题套路

    套路一:事件代理 1、事件代理基本原理 事件代理的基本原理简单来说就是将子元素的事件通过冒泡的形式交由父元素来执行...

  • 事件代理

    1.问题描述 双击文章栏目中的单词可以添加到生词栏目中,我们可以给每个单词添加一个dblclick事件,那么这里就...

  • 事件代理

    javascript和jQuery的事件代理不同写法 首先思考一下:为什么我们要用到事件代理??? 举个栗子父元素...

  • 事件代理

    简单情况的事件代理写法 假设是这个么结构,然后现在要监听的是 父容器 ul : 那么我们的监听代码可以这么写: 点...

  • 事件代理

    事件代理(事件委托):利用了事件冒泡,只指定一个事件处理程序,就可以管理某一类型的所有事件。 事件委托就是利用冒泡...

网友评论

      本文标题:事件代理

      本文链接:https://www.haomeiwen.com/subject/xdqxjxtx.html