jQuery .on efficiency

Question

Является ли первая .on функция более эффективной, чем вторая?

$("div.container").on("click", "p", function(){ 
}); 

$("body").on("click", "p", function(){ 
}); 

Привет

Answer 1

От самой документации JQuery о jQuery: .on():

JQuery может обрабатывать простые селекторы тега формы # id.class очень быстро, когда они используются для фильтрации делегированных события. Итак, «#myForm», «a.external» и «button» - это быстрые селектор. Делегированные события, которые используют более сложные селектора, особенно иерархические, могут быть в несколько раз медленнее - хотя они все еще достаточно быстры для большинства приложений. Иерархических селекторов часто можно избежать, просто привязывая обработчик к более подходящей точке документа. Например, вместо $ ("body") .on ("click", "#commentForm .addNew", addComment) используют $ ("#commentForm") .on ("click", ".addNew", addComment) ,

Answer 2

Чем уже первый селектор, тем лучше производительность.

Но первый пример не будет работать, я думаю,, потому что вы контролируете всех <p> сек контейнер в <p> с container имеющим класса и <p> не может содержать другой <p>, из-за будучи phrasing content.

Answer 3

Несомненно, поскольку браузеру необходимо отслеживать только один абзац для событий click, а не для всей страницы.