js性能优化之事件委托（事件代理）
1、事件委托（事件代理）为什么产生？
在JavaScript中，添加到页面上的事件处理程序数量直接关系到页面的整理运行性能。导致这一情况的原因是多方面的。首先，每个函数都是对象，会占用内存；内存中的对象越多，性能越差。其次，必须事先指定所有事件处理程序而导致的DOM访问次数，会延迟整个页面的交互就绪时间。
--------《JavaScript高级程序设计》（第3版）
为了解决页面中处理程序程序数量过多的问题，引入了事件委托。
2、事件委托（事件代理）是什么？
利用事件冒泡，指定一个事件管理程序，就可以管理某一类型的所有事件，即为事件委托。
解释一下，已知事件冒泡是将事件自下向上传播，即下层元素（可以理解为具体的触发事件的元素）所触发的所有事件，都可以被上层元素接收。通过事件冒泡，可以得知，我们可以在上层元素建立一个事件处理程序。当下层元素触发的事件传播到上层元素，我们可以根据（event.target）获取到触发事件的具体元素，然后执行相应的代码段。避免了在下层元素上绑定事件处理程序。
一个上层元素，可能包含上百个（举个例子，有点夸张）需要绑定事件处理程序的下层元素。通过事件委托，我们便可以将这上百个事件处理程序集成到一个上层元素的事件处理程序上，有效的减少了添加到页面上的事件处理程序的数量。
这便是事件委托的核心。
3、怎么通过编码实现事件委托（事件代理）？
现要求生成100个节点，每个节点有一个编号，编号范围为0-99。当点击相应的节点时，通过alert()输出节点的编号。
思路1：为每个节点绑定事件处理程序，点击节点，输出编号。这就会导致上述所说的事件处理程序过多问题。
事件委托实现：将100个节点包含在一个<div>中，如果不允许新建<div>，可以使用<body>。为这个上层的<div>添加事件处理程序，当用户点击时，通过event.target获取用户点击的节点，然后输出其编号。
index.html
<html>
<head>
<title>test</title>
最低0.47元/天 解锁文章
660
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
