事件委托性能优化

事件委托与性能优化

 1 <ul>
 2     <li>第1个li</li>
 3     <li>第2个li</li>
 4     <li>第3个li</li>
 5     <li>第4个li</li>
 6     <li>第5个li</li>
 7     <li>第6个li</li>
 8 </ul>
 9 <script>
10 //    li的事件委托给父元素ul
11     $(‘ul‘).click(function(event){
12         console.log($(event.target).text());
13     });
14 </script>
15 <script>
16 //    事件直接绑定给点击元素
17     $(‘ul‘).click(function(){
18         console.log($(this).text());
19     });
20 </script>
时间: 2024-08-01 10:36:40

事件委托性能优化的相关文章

事件委托能够优化js性能

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>面试题练习img居中</title> <style type="text/css"> img { /*display: table-cell; vertical-align: middle;*/ } html,body{ height: 100%; } div{ w

深入理解-事件委托

深入理解-事件委托 2016-11-20 15:02javascript.web开发综合.性能优化JS性能优化.事件冒泡.事件委托.事件委托优化.事件委托导致性能损失 65 views 很多人是在使用事件委托的,那对于一个使用者来说,只要能正确的使用好事件委托,完成工作,就算可以了,那么你有认真的考虑过事件委托的原理,以及你的使用场景是否适合使用事件委托呢,如果需要使用事件委托,那么你是否有正确的使用呢?这里我想简单的说一下我对事件委托的理解,希望可以有机会多多交流. 概述 事件委托有哪些好处,

性能优化之-reflow,repaint.

前端性能控制是衡量一个前端工程师的重要参考点,一个作品的成功离不开不断追求性能的优化,为什么三星手机出现了爆炸事件之后销量急剧下降,为什么德国的工艺产品收到世界的推举.这些一定离不开不断的优化产品,提高产品的性能指标.作为一个工程师,你一定要在能做到的基础上去追求如何去做的更好.提升性能也是提升自己. 1.什么是reflow,repaint. 我们知道页面渲染是这样进行的首先确定页面的位置即position,然后进行render,即dom的颜色,text-align等等.那么由此我们可以推断出什

javascript事件监听与事件委托

事件监听与事件委托 在js中,常用到element.addEventListener()来进行事件的监听.但是当页面中存在大量需要绑定事件的元素时,这种方式可能会带来性能影响.此时,我们可以用事件委托的方式来进行事件的监听. 每个事件都经历三个阶段 捕获 到达目标 冒泡 事件委托需要用到事件的冒泡,冒泡就是事件发生时,上层会一层一层的接收这个事件. 如下页面结构: <body> <div id="div1"> <div id="div2"

javaScript绑定事件委托 demo

事件绑定通常发生在 onload 或 DOMContentReady , 事件绑定占用 处理时间 占用内存, 而且不是每个事件都会被 点击执行. 由此 事件委托 可以优化事件绑定行为.. 事件逐层冒泡 直到被父级元素捕获. 事件代理  给外层元素绑定一个处理事件, 就可以处理子元素上出发所有事件. DOM 标准 事件三个阶段: 捕获 到达目标. 冒泡 IE 不支持捕获, 但冒泡够用了. event.currentTarget 事件处理程序当前正在处理事件的那个元素 event.target 事件

js性能优化-事件委托(2)

<!DOCTYPE HTML><html><head> <meta charset="utf-8" /> <title>js性能优化</title> <script type="text/javascript" src="script/jquery.js"></script></head><body><ul id='lis

js性能优化-事件委托

js性能优化-事件委托 考虑一个列表,在li的数量非常少的时候,为每一个li添加事件侦听当然不会存在太多性能方面的问题,但是当列表非常的长,长到上百上千甚至上万的时候(当然只是一个解释,实际工作中很少遇到这么多li的情况),为每个li添加事件侦听就会对页面性能产生很大的影响. 就像下面这段代码: <!DOCTYPE HTML><html><head><meta charset="utf-8" /><title>js性能优化&l

JavaScript性能优化之事件委托

1 内存和性能 在JavaScript中,添加到页面上的事件处理程序的数量直接关系到页面的整体运行性能: 首先,每个函数都是对象,都会占用内存:内存中的对象越多,性能就越差. 其次,必须事先指定所有事件处理程序,会导致DOM访问次数增加,会延迟整个页面的交互就绪时间. 2 事件委托 事件委托就是事件目标本身不处理事件,而是把处理任务委托给其父元素或祖先元素.事件委托利用了事件冒泡,只指定一个事件处理程序,就可以管理某一类型的所有事件. 事件委托解决了"事件处理程序过多"的问题. 假定现

提升性能-事件委托技术

--- title: 提升性能——事件委托技术 date: 2016-05-11 22:13:43 tags: [javascript,improving performance, font-end] --- 提升页面性能之事件委托技术 (整理摘选自<Javascript高级程序设计>)概述 利用事件冒泡,只指定一个事件处理程序,就可以管理某一类型的所有事件. 实际例子 HTML部分 <ul id = "mylinks"> <li id = "g