javascript - 优先使用 .on() 方法而不是 .click()、.bind()、.hover()、.load()、.ready() 等

Question

我需要一种更好的方法来实现最佳性能，并尽可能使用简洁的代码使用事件委托(delegate)。

特别是正确的.ready():

$(document).ready(function() 

或

$(document).on('ready',function() //it is correct?

其他？

.click(), .bind(), .hover(), .load(), .ready(), etc.

Answer 1

来自 jQuery .ready() docs :

jQuery offers several ways to attach a function that will run when the DOM is ready. All of the following syntaxes are equivalent:

$( handler )
$( document ).ready( handler )
$( "document" ).ready( handler )
$( "img" ).ready( handler )
$().ready( handler )

As of jQuery 3.0, only the first syntax is recommended; the other syntaxes still work but are deprecated.

所以最好和最短的方法是这样的:

$(function() {
  // your code
});

对于.click()事件及其 friend 则更加复杂。.click(function(){}) 是 .on("click", function(){}) 的快捷方式，因此它们可以互换使用。

但是.on()函数具有用于创建委托(delegate)事件的附加功能。

.on( "click", "selector", function() {});

因此，如果您想要简洁的代码，请坚持使用 .on() 版本。