jQuery .on() против привязки события к селектору?

Question

Я просматриваю документы на этом page. У них есть примеры, как эти ...

$("p").on("click", function(){ 
alert($(this).text()); 
}); 

$("form").on("submit", false) 

$("form").on("submit", function(event) { 
    event.preventDefault(); 
}); 

Почему это лучше или как это отличается от этого ...

$("p").click(function(){ 
alert($(this).text()); 
}); 

$("form").submit(false); 

$("form").submit(function(event) { 
    event.preventDefault(); 
}); 

Как последний вопрос, почему вы хотите это сделать ...

$("form").on("submit", function(event) { 
    event.stopPropagation(); 
}); 

вместо ...

$("form").submit(function(event) { 
     event.preventDefault(); 
    }); 

Answer 1

Differences Between jQuery .bind() vs .live() vs .delegate() vs .on()

Самые большие из Визитки Возьмите этой статье, что ...

Используя метод .bind() является очень дорогостоящим, поскольку он придает тот же обработчик событий для каждого элемента, согласованного в вашем селекторе.

Вы должны прекратить использовать метод .live(), поскольку он устарел и имеет много проблем с ним.

Метод .delegate() дает много «ударов для вашего доллара» при работе с производительностью и реагирования на динамически добавленные элементы.

Что новый метод .on() - это в основном синтаксический сахар, который может имитировать .bind(), .live() или .delegate() в зависимости от того, как вы его называете.

Новое направление - использовать новый метод .on. Ознакомьтесь с синтаксисом и начните использовать его во всех проектах jQuery 1.7+.

Answer 2

1. Использование $.on(), даже если вы не используете делегирование, хорошо, потому что оно вводит знакомый и последовательный синтаксис в ваш код.
2. Кроме того, он сильно используется в источнике jQuery, то есть вы можете вырезать среднего человека при вызове методов, таких как $.bind().
3. Использование $.submit() или $.click() для назначения обработчиков сбивает с толку, так как оно также используется для запуска этих событий.

Тогда есть дополнительное преимущество делегирования событий, которое может спасти вас от добавления событий к сотням элементов, когда это необходимо только добавить к одному. Предположим, у вас есть элемент 100 <td>, и вы хотели бы предупредить их содержимое по щелчку. Вы можете сделать это:

$("td").click(function(){ 
    alert($(this).text()); 
}); 

Но теперь вы добавили 100 новых обработчиков событий. Действительно плохо для производительности. Используя $.on(), вы можете привязать только к <table> и изучить все события, чтобы увидеть, что их повысило. Если бы это был <td>, вы можете реагировать соответствующим образом:

$("table").on("click", "td", function(){ 
    alert($(this).text()); 
}); 

Вуаля, только один случай был связан, и только один обработчик событий был введен в приложение. Массовое увеличение производительности.

Это одна из самых больших причин, почему $.on() козырей $.click() или $.submit() в любой день.

Answer 3

В click, submit и т.д. методы просто удобные методы для их соответствующих on и trigger эквивалентов.

Я бы использовал их только в том случае, если я считаю, что они улучшают читаемость кода. В целом, однако, я обнаружил, что методы on и trigger более четко выражают намерение кода.

Answer 4

Существует несколько отличий при использовании .on вместо конкретного обработчика, такого как .click e.t.c.

1. Целью метода .on() является предоставление всех функций, необходимых для присоединения обработчиков событий в одном синтаксисе. Вы можете написать последовательный синтаксис, используя .on вместо комбинации пучка .on, .submit или .click.
2. .on поддерживает делегирование событий, но специфические обработчики (например: .click). Более подробная информация в разделе Прямые и делегированные события от here
3. Использование .on вы можете связать несколько обработчик события как .on('click dblclick')
4. Использование .он вы можете связать пространства имен события, как .on('click.myClick'). Более подробная информация в разделе имен событий и пространств имен из here
5. Внутренне .click триггеры .on так что в основном вы избегаете вызова дополнительных функций. - .click source code

И теперь вердикт,

$ ("форма") на. ("Отправить", функцию (событие) { event.preventDefault(); });

Почему это лучше или как это отличается от этого

$ ("форма") представить (функция (событие) { event.preventDefault(); }).

$("form").on( лучше, как по той причине, 1 и 5, указанного выше