javascript - 今天看雅虎前端优化的说明，第26条规则，关于“Develop Smart Event Handlers”的不解

Question

If you have 10 buttons inside a p, attach only one event handler to
the p wrapper, instead of one handler for each button. Events bubble
up so you'll be able to catch the event and figure out which button it
originated from.

如果在一个p中有10个按钮，与其在每个按钮上都放一个事件处理程序，不如只在p上放一个事件处理程序。事件会冒泡上溯，这样你就会捕获这一事件，并找出是哪个按钮发起的它。

1.假如子元素绑定的事件都是一样的

我设定了如下场景如果使用jquery来写下，例如：

<ul id="ul">
</ul>
<script>
for(i=1;i<10000;i++){
    $("#ul").append('<li>'+i+'</li>');
}
$("#ul li").click(function(){
    console.log(this);
})
$("#ul").delegate("li","click",function(){
    console.log('delegate',this);
})

上面代码中，如果子元素很多，第二种会比第一种高效很多吗？还是jquery本身就做优化，两者效果一样？

假如这10个按钮各自绑定了10个事件

怎么可以在外面的p里只绑定一个事件来取代？

比如是click事件，难道是在p的click事件做10个swtich case判断应该选择哪个事件触发？

应该不是这样吧，不然也没什么意义。

不太理解，谁能举个例子解释下最好了。

Answer 1

一个p中有10个按钮，在每个按钮上都放一个事件处理程序，那就是注册了10个事件处理程序。

在p上放一个事件处理程序，事件会冒泡上溯，这样你就会捕获这一事件，并找出是哪个按钮发起的它。这样只需要注册一个事件处理程序。

无论从资源占用还是从动态DOM更新的角度来说都是后者有利。

极端点，p中有10000个按钮，前者需要注册10000次，后者还是只需要1次。如果之后动态为p再增加10000个按钮，那前者还得再为新按钮注册10000次，后者啥都不用动。

---

玩玩的
http://jsfiddle.net/J7fLZ/

Answer 2

这是 DOM 里非常基础的一个概念，这里有一篇文章讲的比较形象和详细，你可以阅读一下：

http://www.cnblogs.com/hh54188/archive/2012/02/08/2343357.html

Answer 3

Event Delegation, 事件代理, Backbone 里经常这么干的, 原理前面的答案说了.
区分的步骤, 不是用 switch/case, 而是用 jQuery 选择器, jQuery 文档里找找细节.