美文网首页
DOM 事件委托

DOM 事件委托

作者: Sharpe | 来源:发表于2020-05-28 00:24 被阅读0次

事件代理又叫事件委托,JavaScript高级程序设计上讲:事件委托就是利用事件冒泡,只指定一个事件处理程序,就可以管理某一类型的所有事件。

为什么要用事件委托:
一般来说,dom需要有事件处理程序,我们都会直接给它设事件处理程序就好了,那如果是很多的dom需要添加事件处理呢?比如我们有100个li,每个li都有相同的click点击事件,可能我们会用for循环的方法,来遍历所有的li,然后给它们添加事件,那这么做会存在什么影响呢?

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

每个函数都是一个对象,是对象就会占用内存,对象越多,内存占用率就越大,自然性能就越差了(内存不够用,是硬伤,哈哈),比如上面的100个li,就要占用100个内存空间,如果是1000个,10000个呢,那只能说呵呵了,如果用事件委托,那么我们就可以只对它的父级(如果只有一个父级)这一个对象进行操作,这样我们就需要一个内存空间就够了,是不是省了很多,自然性能就会更好。

事件委托的原理:
事件委托的原理就是利用事件的冒泡原理实现的,事件触发的过程就是从document开始一级一级的找到触发事件的元素,当找到要触发的事件的元素时,事件会冒泡就是从触发事件元素到document的过程,这个过程会触发所有同事件。

相关文章

  • js事件委托(事件代理)

    定义:事件委托就是在DOM事件的冒泡阶段,把具体dom上发生的事件委托给父元素或祖先元素去处理。原理:要了解委托的...

  • JavaScript Events事件汇总

    事件参数、事件捕获冒泡 事件委托 事件默认行为 DOM 1 、DOM 2、DOM 3模型 实现遮罩功能(点击穿透、...

  • DOM事件委托

    事件代理又叫事件委托,JavaScript高级程序设计上讲:事件委托就是利用事件冒泡,只指定一个事件处理程序,就可...

  • DOM事件委托

    使用场景 监听重复的事件===>用于节省监听数(内存小) 监听当前暂时还没有的元素===>动态监听元素 使用方法

  • DOM 事件委托

    事件代理又叫事件委托,JavaScript高级程序设计上讲:事件委托就是利用事件冒泡,只指定一个事件处理程序,就可...

  • DOM事件委托

    事件委托就是利用事件冒泡,只指定一个事件处理程序,就可以管理某一类型的所有事件。事件委托:不监听元素 C 自身,而...

  • DOM 事件委托

    什么是事件委托? 对"事件处理程序过多"问题的解决方案,就是需要触发子事件时,只用给某父元素指定一个事件处理程序,...

  • dom 事件委托

    1. 作用 事件委托指的是:当事件触发时,把要做的事委托给父元素来处理。在学它的用法之前,先了解一下它的作用: 节...

  • DOM事件委托

    什么是事件委托? 事件委托就是利用冒泡机制,将事件添加在目标元素的父元素或祖辈元素上,触发执行效果。也就是就是监听...

  • DOM事件委托

    什么是事件委托 由于事件会在冒泡阶段向上传播到父节点,因此可以把子节点的监听函数定义在父节点上,由父节点的监听函数...

网友评论

      本文标题:DOM 事件委托

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