背景：
做了那么多web项目，总会发现到处都是事件绑定，同一个按钮的执行动作，也许会分布在多个js文件中。
而且对于js动态生成的文档片段，里面会经常出现“onclick=...”之类的代码，一到功能升级，或者代码重构的时候，
就会发现，这个难度以及工作量，和重写一遍没什么区别，有时候甚至工作量更大！
基于各种情况的分析、以及以往的经验总结，百度空间则有了一套自己的事件监听管理机制：基于CSS class的事件监听管理机制
方案：
1、js代码中，不出现对某节点的事件监听，如：$(‘#elm‘).click(function(e){})
2、html代码中，不出现inline的事件监听，如：<input type="button" value="OK" onclick="doSth();">
3、所有需要进行事件监听的节点，都配置一个（或一类）class
4、每个独立的子模块（或页面）有一个单独的listener_manager.js文件
5、在listener_manager.js中，对所有的事件监听进行集中管理，类似“任务管理器”
6、只对一个大容器（HTMLElement）进行事件绑定，获取触发源，判断源是否包含了某个class，包含则触发其对应的监听
7、对于js动态生成的文档片段，依然通过此方法，指定class即可；这个能完美的实现类似jQuery中的live
关于实现：
先来看一个非常重要的方法：事件的绑定与触发
|
|
拿一个简单的应用来举例说明，先看listener_manager.js的内容：
|
|
关于window.registNS，在这里有讲到。
从上面的事件监听管理器中可以很容易的看出，每一个（或一类）CSS class，唯一对应一个监听程序。
如上代码中第66到81行，就是定义CSS class和event function之间的映射关系。
如上代码中第70行和71行，class为q-play-music，以及class为q-progressbar的两个节点，当发生click事件的时候，其具体动作都可以交由_fn_play_music处理。而且由js动态生成的节点中，也会包含class为这两个的节点，其事件监听就会自动的被ListenerMgr捕获并处理，这个地方也就是jQuery中的live方式。
如上代码中第88行就是调用了一个核心方法，用户事件绑定。
在web应用需要初始化的时候，即可调用事件监听管理器的run方法，启动事件监听管理器：
|
|
这个时候，监听器即开始工作，只要页面上有上面动静，符合规则的节点都会被捕获到。
收益：
这种事件监听管理的机制，能将web应用中所有的事件监听进行统一管理，其初始化的入口，有且仅有一个，其作为一个单独的plugin而存在。代码集中，功能独立，便于管理，维护成本低。
这是一种集中式的事件管理机制。
转自Alien的笔记：http://www.baidufe.com/item/98947f853cc68032af53.html