2011-11-24 144 views
3

所以我只是想添加一些函数来盘旋。下面是关于相同的事情,除了用for循环我有目标存储在一个数组中。我其实有几个问题。使用jquery/javascript做下面的最佳做法是什么?

  1. 这是stopPropagation的正确用法吗?
  2. 什么做这样的事情的最佳做法?
  3. 其中下面方法的一个速度更快,使用更少的资源?
  4. 我知道我可以使用悬停(),但我用绑定,因为我认为这是更快的,是我的思想是否正确?

谢谢

for (var i in slides) { 
     $(slides[i].el).bind({ 
      mouseenter: function (event) { 
       event.stopPropagation(); 
       // do something 
      }, 
      mouseleave: function (event) { 
       event.stopPropagation(); 
       //do something 
      } 
     }); 
    } 

    $("#vehicleSlides .vehicleAreas").bind({ 
     mouseenter: function (event) { 
      event.stopPropagation(); 
      // do something 
     }, 
     mouseleave: function (event) { 
      event.stopPropagation(); 
      //do something 
     } 
    }); 

回答

2

1 - 这是正确的使用stopPropagation

如果你想阻止事件冒泡DOM树,那么是的。

2 - 什么是做这样的事情

个人最好的做法,我更喜欢jQuery选择之后的方法,但是这仅仅是一个偏好。最佳实践是您和您的团队都一致认同和使用的任何风格。

3 - 其中下面方法的一个速度更快,使用更少的资源

在实际应用中,会出现下一个在两者之间没有差别。

4 - 我知道我可以使用悬停(),但我用绑定,因为我认为这是快,我想正确的

jQuery的悬停方法是绑定到了mouseenter和鼠标离开速记事件,所以会有一个使用悬停的额外函数调用,但是性能几乎没有区别。

+0

我想停止冒泡,我的意思是如果停止冒泡是正确的做法。在速度方面,停止冒泡不是更好吗?我只想在那一个元素上使用函数,所以停止冒泡不是更好吗? – Huangism

+0

也许,但浏览器*应该针对冒泡行为进行优化,所以在不停止传播或可能没有传播的情况下可能会有性能提升。你需要全部测量它们。实际上,最好是表达意图而不是关注微观优化。在现代浏览器中,性能方面的差异很小。 –

+0

好的谢谢,我只是想尽可能实现最好的代码,但不太确定那是什么。 – Huangism

0

最佳做法将使一贯正确的功能的优先级最高,所以这取决于是否将事件应该由一次处理的父节点可以看到或听到。

这取决于你的设计。例如,在一个“窗口”般的对象要能够拖动周围,你既可以A.连接鼠标处理整个窗口,或B.附加一个侦听孩子“背景”对象检测鼠标放下事件开始拖动。

如果您选择设计B.,那么您必须确保不希望接收鼠标事件的标签和其他对象禁用鼠标事件(在Flash [AS3]中将mouseEnabled和mouseChildren设置为false;不确定JavaScript的)。这种设计的一个缺点是,它会阻止U.I.中的任何对象。从被动地处理或修改冒泡阶段的事件行为,因为捕获阶段的任何拦截都会阻止它首先到达背景。这种设计的一个特点是,通过允许事件冒泡,您可以让监视器和其他全局效果处理更高级别的鼠标点击。

在另一方面,如果你选择的设计A.,那么你不必担心使子对象透明的鼠标(在标签上的事件仍然会向上冒泡到窗口容器本身),但相反,您必须确保在处理事件后停止子对象(如按钮)上的事件传播,以便它们不会到达层次结构顶部的窗口处理程序。这实际上取决于你希望如何运作,而混合方法可能是最好的。

你可以拥有这归因于设计科学到“设计”是不是设计的所有的点,但已知为真的科学复杂的道理。

此系统的任何浏览器优化将涉及跟踪,在捕获阶段,其中父节点具有连接为事件类型气泡相事件处理程序。例如,如果它知道没有父节点有处理程序就进入了目标/冒泡阶段,它可以跳过整个冒泡阶段,或者直接跳到已知有处理程序的节点。然而,这是糟糕的设计,IMO,因为您可能希望在捕获或冒泡期间的任何时候将新的处理程序附加到父节点,或者您可能想要将节点移动到另一个父级,以尝试使事件冒出不同的母链。试试看看它在不同浏览器中的表现如何。有必然是巨大的矛盾象别的涉及HTML渲染和事件处理,在这两个行为和性能方面:P

0

有可能不能结合和悬停多大区别。避免工作总是一件值得考虑的事情,但有1-3个更多的函数调用来处理事件处理程序并不会影响现代JIT的性能。

你并没有错误地引用stopPropagation,但如果你没有特别的理由,除了冒泡让你感到不舒服,或者因为你害怕触发别的东西,那么是的,你做错了。

UI工作的首要原则应始终是:

不要做任何你不需要做

例子:

  • 不解决问题,你还没有。
  • 不要做任何“以防万一”,因为这意味着你不知道实际发生了什么,并且在你调用UI中的任何事情之前,你真的需要了解你的东西实际上做了什么以及它是如何工作的。
  • 不要阻止人们以不同于预期的方式使用您的用户界面。例如验证HTML格式并在有人试图让你写的内容有点不同时抛出错误。你在做什么,运行客户支持热线?它帮助没有人/不提供任何服务。如果他们更喜欢更多的语义正确的无序列表到一堆div,有什么关系?

但在stopProp具体地说,如果你必须使用它(它可以解决一些问题非常优雅所以不要说永不)尝试只命中端点节点与它这样其他的东西可以添加到同一容器中不失冒泡的好处。是的,我说的好处。不要害怕冒泡。如果你的HTML是一个完整的灾难(它应该只是容器一直回到正文,对吗?),回溯祖先线的事件只会触发其他UI事件。

此外,如果您可以在采取措施之前验证处理程序中是否包含正确的目标元素,请执行此操作而不是stopProp。但当人们在写入的每个UI处理程序中添加return falsee.stopPropagation时,它就会让我气愤。尤其是当他们自己从一个包含比所讨论的主动元素多得多的容器中拾取事件时。

所以不要这样做。我们有一天可能会在同一间办公室工作,我会变得无法忍受,我会破坏你的芝士蛋糕。

相关问题