jquery - 事件分配与 .live()

Question

不久前，我曾经使用过这个解决方案:

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

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

现在我用这个:

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

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

Answer 1

How is performance difference?

嗯，当你以前使用live时。 live 总是绑定(bind)到 document 并且阻止事件冒泡也是不可能的，因为事件在它已经冒泡完之后才被触发。

从这个意义上说，live() 的性能不太友好。

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

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

// 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(); })

尽管比在公共(public)方法中添加元素之前能够绑定(bind)事件处理程序的好处要小一些。

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

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

on() 有一个很大的好处，就是可以将元素的添加与事件的绑定(bind)分开。