javascript - 今天看雅虎前端优化的说明,第26条规则,关于“Develop Smart Event Handlers”的不解
迷茫
迷茫 2017-04-10 14:29:59
0
3
660

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判断应该选择哪个事件触发?

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

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

迷茫
迷茫

业精于勤,荒于嬉;行成于思,毁于随。

全部回复(3)
巴扎黑

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

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

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

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


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

大家讲道理

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

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

洪涛

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

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板