以前写上图所示的鼠标点击触发事件,一般都是用如下所示的给每一个表示列表的标签绑定一个click事件(演示用的例子的框架是React):

    

  毫无疑问,这样是比较繁琐的,以后维护修改改个函数名什么的还不方便(当然sublime还是有ctrl+d的么= =),水平提高一点的写法如下:

    

  但是,实际上还是为每一个要触发点击的标签绑定了一个click事件,这就导致了“事件处理程序过多”。

  在JavaScript中,添加到页面上的事件处理程序数量将直接关系到页面的整体运行性能。导致这一问题的原因是多方面的。首先,每个函数都是对象,都会占用内存;内存中的对象越多,性能就越差。其次,必须事先指定所有事件处理程序而导致的DOM访问次数,会延迟整个页面的交互就绪事件。  ——摘自《JavaScript高级程序设计》

  那么解决办法是利用了事件冒泡机制,例如,click事件会一直冒泡到document层,所以,我们只要如下所示就好:

    

  看看浏览器内的结果:

    

  没毛病~以后就只要给父元素绑定一个事件就可以了。

    

JS 的事件委托机制的更多相关文章

  1. js的事件委托机制

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

  2. JS与Jquery的事件委托机制

    传送:http://www.ituring.com.cn/article/467 概念: 什么是事件委托:通俗的讲,事件就是onclick,onmouseover,onmouseout,等就是事件,委 ...

  3. 浅谈js的事件冒泡机制

    很多人都听说过,js的事件冒泡机制,其实,这个说法还是比较生动形象的,就是一个水泡在水底下,冒泡到水面的过程. 那js的事件冒泡机制呢,就是一个DOM树,一级一级向上冒的过程,最终是到document ...

  4. Javascript事件模型系列(二)事件的捕获-冒泡机制及事件委托机制

    一.事件的捕获与冒泡 由W3C规定的DOM2标准中,一次事件的完整过程包括三步:捕获→执行目标元素的监听函数→冒泡,在捕获和冒泡阶段,会依次检查途径的每个节点,如果该节点注册了相应的监听函数,则执行监 ...

  5. Js - JQ事件委托( 适用于给动态生成的脚本元素添加事件)

    最近一段时间打了一个大仗,现在总算消停点,才有时间来做个总结吧算是: 移动端遇到一个项目,是一个列表的侧滑栏,在我这里用jq写的交互事件.自测各方面都挺好的,美滋滋的给了研发.研发也美滋滋的开始开发. ...

  6. C++模拟C#事件委托机制(一)

    原文来自于http://www.cnblogs.com/netssfy/articles/1652671.html 写了一段时间的C#代码后确实发现C#的事件委托非常好用.于是便想是否在C++中也能如 ...

  7. 【Unity3D技巧】在Unity中使用事件/委托机制(event/delegate)进行GameObject之间的通信 (二) : 引入中间层NotificationCenter

    作者:王选易,出处:http://www.cnblogs.com/neverdie/ 欢迎转载,也请保留这段声明.如果你喜欢这篇文章,请点[推荐].谢谢! 一对多的观察者模式机制有什么缺点? 想要查看 ...

  8. JavaScript 之默认行为 DOM2级,事件委托机制

    1. 事件默认行为及阻止方式    1.1 浏览器的默认行为       JavaScript事件本身所具有的属性,例如a标签的跳转,Submit按钮的提交,右键菜单,文本框的输入等.    1.2 ...

  9. JS JavaScript事件循环机制

    区分进程和线程 进程是cpu资源分配的最小单位(系统会给它分配内存) 不同的进程之间是可以同学的,如管道.FIFO(命名管道).消息队列 一个进程里有单个或多个线程 浏览器是多进程的,因为系统给它的进 ...

随机推荐

  1. JOptionPane用法--java

    JOptionPane用法--java JOptionPane的简单应用: 1.首先引入包: import javax.swing.JOptionPane; 2.添加如下代码: Object[] op ...

  2. json 序列化为数组

    我们通常从后台取到json格式的数据到前台进行展示,在这个过程中可能户遇到一些json格式不是自己想要的格式,今天本人就遇到一个棘手的问题,最后在师傅的协助下才进行了正确格式的转换. 可以说最悲哀的莫 ...

  3. C# oracle odp.net 32位/64位版本的问题

    问题如下: 系统是win7 64位,技术 asp.net mvc 4, 数据库 oracle 11g. 由于某些原因只能使用 32的 ODP.NET ( Oracle Data Provider ), ...

  4. 安装Python环境时遇到的问题

    问题描述:An error occurred during the installation of assembly 'Microsoft.VC90.MFC,version="9.0.210 ...

  5. Jquery中ajax方法data参数的用法

    $.ajax({   type: "POST",   url: "some.php",   data: "name=John&location ...

  6. Oracle连接与会话

    连接(connection):连接是从客户端到oracle数据库实例的一条物理路径. 会话(session):会话是数据库实例中存在的一个逻辑实体. case1:一个连接可以有多个会话 SQL> ...

  7. maven权威指南学习笔记(一)——简介

    maven是什么?有什么用? Maven是一个项目管理工具,它包含了     一个项目对象模型 (Project Object Model),     一组标准集合,     一个项目生命周期(Pro ...

  8. MOD

    题目链接:http://acm.hrbust.edu.cn/index.php?m=ProblemSet&a=showProblem&problem_id=2318 ///这是哈理工校 ...

  9. iOS图片拉伸技巧

    纵观移动市场,一款移动app,要想长期在移动市场立足,最起码要包含以下几个要素:实用的功能.极强的用户体验.华丽简洁的外观.华丽外观的背后,少不了美工的辛苦设计,但如果开发人员不懂得怎么合理展示这些设 ...

  10. Shell特殊变量:Shell $0, $#, $*, $@, $?, $$和命令行参数

    特殊变量列表 变量 含义 $0 当前脚本的文件名 $n 传递给脚本或函数的参数.n 是一个数字,表示第几个参数.例如,第一个参数是$1,第二个参数是$2. $# 传递给脚本或函数的参数个数. $* 传 ...