Question

我正在开发一个Web应用程序并使用相当多的JavaScript执行任务。我有一些与Jquery绑定的标签点击做一些工作，所以我有这样的代码：

html代码：

 <a href="#" id="id1">some content here</a>
 <a href="#" id="id2">some content here</a>
 ....

Jquery代码：

 $('#id1').click(function(){
     //do something here..
     return false;
 });

 $('#id2').click(function(){
     //do something else here..
     return false;
 });

使用这种方法，当脚本运行时，jquery必须查找选择器（id1，id2，ect）。

但还有另一种避免查找选择器的方法，如下所示：

<a href="requireJs.htm" onclick="f1();return false">some content here</a>
<a href="requireJs.htm" onclick="f2();return false">some content here</a>

和js代码：

 function f1(){
     //do something here..
 });

 function f2(){
     //do something else here..
 });

考虑到性能，哪种方法更好？谢谢你的帮助。

Answer 1

忘记表现 - 两者之间的任何差异都是无关紧要的。

第一种方法更好，因为它在行为和内容之间保持严格的分离。

顺便说一句，分配事件处理程序时，性能差异仅。在这种情况下，内联调用不必“找到”dom元素，但是，由于你的jquery选择器是通过id选择的（这是非常有效的），额外步骤引起的“开销”将很小。

Answer 2

真正的性能增益是通过仅使用附加到父元素的一个事件处理程序，并使用 event.target 捕获子元素生成的事件，因为事件冒泡默认情况下，JavaScript中的最外层父级。

将您的链接包裹在div中

<div id="parent">
 <a href="#" id="id1">some content here</a>
 <a href="#" id="id2">some content here</a>
</div>

只附加一个事件监听器

$('#parent').click(function(event){
    // event.target is now the element who originated the event
    $(event.target).doSomething();
});

这是速度的大幅提升，特别是在IE等旧版浏览器中，以及当你开始有很多活动时。

View example here

Answer 3

性能明智的内联调用很快，因为它立即被触发，而如果你使用jquery，它会监听这个事件并找到所有附加的处理程序并按顺序执行它们。但是使用jquery，您可以设法以系统的方式附加所需的处理程序。

Answer 4

一种可能性是使用.delegate（），您可以在其中设置特定于上下文的绑定。由于委托的工作方式，这应该比.live（）和几个.click（）绑定更快。关于这个here有一个很好的写作，一个优秀的必读的SO here.祝你好运！

<强> HTML

<div id="wrapper">
   <a href="#" id="id1">some content here</a>
   <a href="#" id="id2">some content here</a> 
</div>

<强> Jquery的/使用Javascript

$("#wrapper").delegate("#id1", "click", function(e){
   e.preventDefault();
   //do something here..
});

Jquery Delegate API

Answer 5

根据Jose Faeti的回答，这里有两个问题：

我如何直接回答他的回答？ ;）
我有以下情况：http://jsfiddle.net/syY4D/

问题是，包含其他元素（如div或spans）的锚标记不会被视为已点击。它的子元素是tho。

<div id="foo">
    <a class="clickable" href="#a1" name="a1"><div>hello</div></a><br/>
    <div>i don't need to be listened to</div>

    <a class="clickable" href="#a2" name="a2"><div><span>there</span></div></a>
    <div>neither me, only a-tags should be concerned</div>

    <a class="clickable" href="#a3" name="a3">only i am "really" listened to</a>
    <div>more content</div>
</div>

这可能很难看，但在我们现有的应用程序中，这是当前的状态。所以我改编了相应的JavaScript如下：

$('#foo').click( function ( event ) {
    event.preventDefault();

    if( $(event.target).hasClass('clickable') ) {
        alert('clicked: ' + event.target.name );
    } else {
        if( $(event.target).closest('a.clickable').length )
            alert('has parent: ' + $(event.target).closest('a.clickable').attr('name') );
    }
});

我的问题：有没有更好的解决方案呢？性能更高？是丑陋还是你做的不一样？

干杯

jquery bind click和<a> tag onclick</a>之间的性能

5 个答案: