2

前段时间，我曾经使用过这个解决方案：

$('<div class="ok" />')
.appendTo('body');

$('div.ok')
.live('click',function(){ alert(); })

现在我使用这个：

$('<div class="ok" />')
.appendTo('body')
.click(function(){ alert(); })

性能差异如何？我相信第二种解决方案更好，因为它不需要 live() 。是否总是这样（也有很多元素）？为什么？

4

2 回答 2

1

性能差异如何？

好吧，当你以前使用live. live总是绑定到document并防止事件冒泡也是不可能的，因为事件是在它已经冒泡之后触发的。

从这个意义上说live()，对性能不是很友好。

您的第二个代码示例在创建对象时直接绑定到对象，与live(). 您现在可以事件防止事件冒泡等等。

与 using 相比，将创建时的事件直接on()绑定到元素，指定要绑定到的最接近的静态元素仅具有非常小的性能优势。

// Performs slightly better than on() but cannot be executed from anywhere unless the element is added at the same time.
$('<div class="ok" />').appendTo('body').click(function(){ alert(); })

尽管比在以通用方法添加元素之前能够绑定事件处理程序的好处要小。

下面的代码与您的第二个代码示例相同，但可以在通用方法中很好地执行，并且不必是添加动态元素的一部分。

// Can be called in a common init method for example and still work.
$(body).on('click', '.ok', function(){ alert();})

on()最大的好处是可以将元素的添加与事件的绑定分开。

于 2012-12-02T00:53:00.360 回答
0

第二种方法很可能提供微不足道的性能提升（假设您没有大量div.ok元素放入 DOM），因为不需要再次搜索 DOM。另一种选择是使用html/props签名代替：

$("<div>", { 
    'class': "ok",
    'click': function () {
        alert("You clicked the new element!");
    } 
}).appendTo("body");

演示：http: //jsfiddle.net/w4Tj3/

请记住，.live()它已被弃用。如果您要使用事件委托，最好.on()从这里开始使用。但是，就您而言，您也不一定需要。相反，为了模仿.live()你会在以下位置设置一个监听器document：

$(document).on("click", ".ok", function () {
    alert("You clicked an .ok element!");
});

其工作方式是利用事件的冒泡行为。当您单击一个元素时，单击会向上遍历 DOM，直到最终到达该document对象。jQuery 然后检查发起点击的元素是否与我们的选择器 ( .ok) 匹配，如果匹配则运行匿名函数。

要查看更好的性能，请不要绑定到document，而是绑定到更接近动态添加的元素的东西。例如，如果您要动态添加li元素，请绑定到它们的父级ol或ul. 这样，事件在被处理之前就不需要传播太远了。

有了事件委托，您可以从动态添加本身中删除click逻辑：div

$("<div>", {'class': 'ok'}).appendTo("body");
于 2012-12-02T00:52:38.357 回答