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

周梦康
  • 8.9k

If you have 10 buttons inside a div, attach only one event handler to
the div 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.

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

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个事件

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

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

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

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

回复
阅读 4.7k
3 个回答
P酱
  • 3.2k
✓ 已被采纳

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

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

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

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


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

c4605
  • 812

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

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
1 篇内容引用
宣传栏