Question

以前，我曾经使用过这个解决方案：

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

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

现在我用这个：

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

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

Answer 1

性能如何差异？

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

从这个意义上讲，live()并不是非常友好。

您的第二个代码示例在创建对象时直接绑定到对象，与live()相比，它使其表现更好，更灵活。您现在可以阻止事件冒泡等事件。

与使用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()有很大的好处，你可以将元素的添加与事件的绑定分开。

Answer 2

第二种方法提供的性能提升可忽略不计（假设您没有大量的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");

事件分配vs .live（）

2 个答案: