事件委托给我带来的第一印象是,如果可以的话请尝试得经常使用它,性能好!
通过字符串拼接后,并进行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. Bootstrap_CSS全局样式

    一.HTML5 文档类型 Bootstrap 使用到的某些 HTML 元素和 CSS 属性需要将页面设置为 HTML5 文档类型.在你项目中的每个页面都要参照下面的格式进行设置. <!DOCTY ...

  2. edge.js

    https://github.com/tjanczuk/edge 运行的时候会报 System.DllnotfoundException 无法加载node.dll,要把\packages\Edge.j ...

  3. C语言之移位操作

    C语言很多操作都是以字节为单位进行的,但有时为了节约空间,很多系统程序中要求在比特位级别进行运算处理.C语言一同提供了六种位运算的运算符,分别为&(按位与),|(按位或),~(按位取反),^( ...

  4. WEBUS2.0 In Action - 搜索操作指南 - (3)

    上一篇:WEBUS2.0 In Action - 搜索操作指南(2) | 下一篇:WEBUS2.0 In Action - 搜索操作指南(4) 3. 评分机制 (Webus.Search.IHitSc ...

  5. java实现的kmp算法

    package DataStructure; import java.util.ArrayList; import java.util.List; //KMP算法的实现 //以下代码由freedom结 ...

  6. [转载] ubuntu开机直接进入命令行模式

    最近安装了ubuntu12.04来使用,每次都进入unity界面再进入命令行很不方便. 不需要界面的话,可以通过设置来开机进入命令行模式. 今天提供两中比较好的方法.经本人测试两中方法都可使用. [1 ...

  7. Linux/Unix shell 自动发送AWR report(二)

    观察Oracle数据库性能,Oracle自带的awr 功能为我们提供了一个近乎完美的解决方案,通过awr特性我们可以随时从数据库提取awr报告.不过awrrpt.sql脚本执行时需要我们提供一些交互信 ...

  8. 【转】Github轻松上手2-如何使用命令行创建和管理repo

    转自:http://blog.sina.com.cn/s/blog_4b55f6860100zzhd.html 如果你对这种怀旧的方式很感冒,不妨参考这里: http://help.github.co ...

  9. MySQL基础之第15章 MySQL用户管理

    15.2.账户管理 15.2.1.登录和退出MySQL服务器 mysql –hhostname|hostIP –P port –u username –p[password] databaseName ...

  10. GUID转换成16位字符串或19位数据(确保唯一)

    // <summary> /// 根据GUID获取16位的唯一字符串 /// </summary> /// <param name=\"guid\"& ...