事件委托给我带来的第一印象是,如果可以的话请尝试得经常使用它,性能好!
通过字符串拼接后,并进行DOM插入,不会复制事件,此时需要进行事件委托了!!!

优点

事件委托对于web应用程序的性能有如下几个优点:

1.需要管理的函数变少了

2.占用的内存少了

3.javascript代码和Dom结构之间的关联更少了

4.在改变DOM结构中的innerHTML时,不需要改动事件处理函数

使用方法:
     1.给一组元素的父级添加事件(通过冒泡机制)
          oUl.onclick=function(){};
     2.寻找事件源(促发事件的源元素)
          var oSrc=oEvent.srcElement||oEvent.target;
     3.判断事件源(一个父级下所有的自己都可以促发这个事件,如果只能特定的事件源促发委托的事件的话,需要判断tagName)
oSrc.tagName == 'INPUT'&&oSrc.value == '删除'
     4.事件源执行事件逻辑
          例如:oSrc.style.background='red';

事件委托(event delegation)的更多相关文章

  1. javascript 事件委托 event delegation

    事件委托 event delegation 一.概念: 假设我们有很多个子元素,每个元素被点击时都会触发相应事件,普通的做法是给每个子元素添加一个事件监听. 而,事件委托则是给它们的父元素添加一个事件 ...

  2. 事件委托(event delegation) 或叫 事件代理

    比较好的介绍文章: 关于事件委托的整理 ,另附bind,live,delegate,on区别:https://www.cnblogs.com/MagicZhao123/p/5980957.html j ...

  3. javascript事件代理(Event Delegation)

    看了几篇文章,放上来供参考 司徒正美的文章,Event Delegation Made Easy --------------------------------------------------- ...

  4. JavaScript 事件委托的技术原理

    如今的 JavaScript 技术界里最火热的一项技术应该是‘事件委托(event delegation)’了.使用事件委托技术能让你避免对特定的每个节点添加事件监听器:相反,事件监听器是被添加到它们 ...

  5. JavaScript事件委托的技术原理

    如今的JavaScript技术界里最火热的一项技术应该是‘事件委托(event delegation)’了.使用事件委托技术能让你避免对特定的每个节点添加事件监听器:相反,事件监听器是被添加到它们的父 ...

  6. jQuey事件委托

    javascript的事件模型,采用"冒泡"模式,子元素的事件会逐级向上"冒泡",成为父元素的事件. 在需要为较多的元素绑定事件时应该使用事件委托 event ...

  7. js的事件委托机制

    如今的JavaScript技术界里最火热的一项技术应该是‘事件委托(event delegation)’了.使用事件委托技术能让你避免对特定的每个节点添加事件监听器:相反,事件监听器是被添加到它们的父 ...

  8. 关于事件委托的整理 ,另附bind,live,delegate,on区别

    随着DOM结构的复杂化和Ajax等动态脚本技术的运用导致如今的js界里最火热的一项技术应该是‘事件委托(event delegation)’了,什么是事件委托呢?小七给你娓娓道来,说白了就是想给子元素 ...

  9. javascript中的事件委托

    这几天看到一个面试题,大概就是,让你给1000个li都添加一个click事件,应该怎么添加?大多数人第一开始的感觉可能就是,每个li上边都添加一个呗,那要是这样的话,估计面试的时候就会GG了,这里就是 ...

随机推荐

  1. find a filename from a filehandle in Perl

    my $filename='/tmp/tmp.txt';open my $fh, '>', $filename;my $fd = fileno $fh;print readlink(" ...

  2. VMware虚拟机中的常用文件介绍

    虚拟机的文件管理由VMware Workstation来执行.一个虚拟机一般以一系列文件的形式储存在宿主机中,这些文件一般在由workstation为虚拟机所创建的那个目录中. 如下图所示:(< ...

  3. 《OD大数据实战》Oozie环境搭建

    一.Oozie环境搭建 1. 下载oozie-4.0.0-cdh5.3.6.tar.gz 下载地址:http://archive.cloudera.com/cdh5/cdh/5/ 2. 解压 tar ...

  4. URAL1748. The Most Complex Number

    1748 反素数 素数的个数随大小的递增而递减 可以相同 注意各种超啊 #include <iostream> #include<cstdio> #include<cst ...

  5. win7下搭建opengles2.0编程环境

    原帖地址:http://sixgod.org/archives/72   1.下载AMD的OpenGL ES2.0的模拟器,地址: http://www.opengles-book.com/ESEmu ...

  6. Qt之QHeaderView自定义排序(QSortFilterProxyModel)

    简述 对以上节的排序,我们衍伸了两点: 把一个字符串前面的数据按照字符串比较,而后面的数据按照整形比较. 将整形显示为字符串,而排序依然正常呢. 为了分别描述,这里我们先解决问题1. 简述 效果 处理 ...

  7. poj 3353 Road Construction tarjan 边双联通分支 缩点+结论

    题意:一个连通的无向图,求至少需要添加几条边,救能保证删除任意一条边,图仍然是连通的. 链接:http://poj.org/problem?id=3352 思路:边的双连通图.其实就是要求至少添加几条 ...

  8. IOS中UICollectionView和UICollectionViewController的用法

    1.新建一个xib描述UICollectionViewCell(比如DealCell.xib),设置好resuse identifier(比如deal) 2.控制器继承UICollectionView ...

  9. erl_0011 erlang 定时器相关

    转自:http://blog.chinaunix.net/xmlrpc.php?r=blog/article&uid=20764167&id=4470124 3.1  The time ...

  10. 【原创】牛顿法和拟牛顿法 -- BFGS, L-BFGS, OWL-QN

    数据.特征和数值优化算法是机器学习的核心,而牛顿法及其改良(拟牛顿法)是机器最常用的一类数字优化算法,今天就从牛顿法开始,介绍几个拟牛顿法算法.本博文只介绍算法的思想,具体的数学推导过程不做介绍. 1 ...