事件委托给我带来的第一印象是,如果可以的话请尝试得经常使用它,性能好!
通过字符串拼接后,并进行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. linux学习之centos(三):网卡配置

    Linux系统版本:Centos 6.5 在linux学习之centos(二):虚拟网络三种连接方式和SecureCRT的使用中,使用远程工具SecureCRT,通过“ifconfig eth0 + ...

  2. CSS 滤镜(IE浏览器专属其他浏览器不支持)

    Filter 属性介绍: 设置或检索对象所应用的滤镜或滤镜集合.此属性仅作用于有布局的对象,如块对象.内联要素要使用该属性,必须先设定对象的 height 或 width 属性,或者设定 positi ...

  3. git和其他版本控制系统的区别

    所有除了Git以外的版本控制系统都使用增量存储方式来保存不同版本,而Git则在每一个commit时,保存一个整个文件的content copy,除非那个文件没有做过改动.Git和其他版本系统的主要区别 ...

  4. [ionic开源项目教程] - 第4讲 通Service层获取数据列表

    第4讲:通Service层获取数据列表 上一讲中页面的基本架构已完成,这一讲介绍如何通过service层从服务器请求数据,在通过controller层为载体,显示到视图层. 1.在services.j ...

  5. CSS之可折叠导航

    简述 下面我们来讲述如何仅仅用CSS来实现一个可折叠的导航. 简述 nav标签 summary标签 效果 源码 解释 为小三角添加CSS样式 <nav>标签 定义和用法 <nav&g ...

  6. JSAPI微信支付返回错误:fail_no permission to execute

    问题描述 fail_no permission to execute 一定是授权目录出问题了,因为没有权限. 开发环境及可能造成的原因 这次的微信开发是用的Mvc4,支付的封装代码不会有问题(用过很多 ...

  7. UVa 10935 (水题) Throwing cards away I

    直接用STL里的queue模拟即可. #include <cstdio> #include <queue> using namespace std; ; int discard ...

  8. Codeforces 435 B Pasha Maximizes【贪心】

    题意:给出一串数字,给出k次交换,每次交换只能交换相邻的两个数,问最多经过k次交换,能够得到的最大的一串数字 从第一个数字往后找k个位置,找出最大的,往前面交换 有思路,可是没有写出代码来---sad ...

  9. Swustoj题目征集计划

    SWUST OJ题目征集计划   鉴于SWUST OJ长时间没有新题添加,题目数量和类型有限,同时也为加强同学们之间的算法交流,享受互相出题AC的乐趣,提高算法水平,现在启动题目征集计划啦~ 当你遇到 ...

  10. Openerp上传中文名附件,下载时报错的处理方法

    文档管理中,如果上传的文件名含有中文字符,下载时会提示出错,如没有权限等.这个问题困惑我比较久的时间,通过跟踪openerp_server.log,可以看到类似提示: 2012-09-28 21:51 ...