Использование jquery привязки vs на клике

Я применил несколько методов обработки событий click в jquery:

обязывать:

$('#mydiv').bind('click', function() {
    ...
});

нажмите:

$('#mydiv').click(function() {
   ...
}

на

$('mydiv').on('click', function() {
   ...
}

Два вопроса:

  • Есть ли другие способы сделать это?
  • Какой я должен использовать и почему?

UPDATE:

Как посоветовал eveyone, я должен был лучше ознакомиться с документами и узнать, что я должен использовать:

on() или нажмите(),

которые фактически являются одними и теми же.

Однако никто не объяснил, почему привязка больше не рекомендуется? Я, вероятно, получу больше downvotes за отсутствие очевидного где-нибудь, но я не могу найти причину этого в документах.

UPDATE2:

'on' имеет полезный эффект от возможности добавления обработчиков событий к динамически созданным элементам. например.

$('body').on('click',".myclass",function() {
    alert("Clicked On MyClass element");
});

Этот код добавляет обработчик кликов к элементам с классом "myClass". Однако, если впоследствии новые элементы myClass динамически добавляются, они также автоматически получают обработчик кликов, без явного вызова 'on'. Из того, что я понимаю, люди говорят, что это также более эффективно (см. Ответы Саймонса ниже).

Ответы

Ответ 1

Из документации bind и click:

bind:

Как и в jQuery 1.7, метод .on() является предпочтительным методом для прикрепление обработчиков событий к документу.

Источник дает понять, что нет смысла использовать bind, так как эта функция вызывает более гибкую функцию on, даже не сокращаясь:

bind: function( types, data, fn ) {
    return this.on( types, null, data, fn );
},

Поэтому я бы предложил, как и команду jQuery, забыть старую функцию bind, которая теперь бесполезна. Это только для совместимости с более старым кодом, который он все еще здесь.

click:

Этот метод является ярлыком для .on('click', обработчик)

Этот ярлык, конечно, менее мощный и гибкий, чем функция on и не позволяет делегировать, но позволяет вам писать более короткий и, возможно, чуть более читаемый код, когда он применяется. Мнения расходятся по этому поводу: некоторые разработчики утверждают, что этого следует избегать, поскольку это просто ярлык, а также тот факт, что вам нужно заменить его на on, как только вы используете делегирование, так почему бы не использовать напрямую t23 > чтобы быть более последовательным?

Ответ 2

К вашему первому вопросу: там также .delegate, который был заменен на .on как на jQuery 1.7, но все еще является допустимой формой привязки обработчиков событий.

К вашему второму вопросу: вы всегда должны использовать .on, как говорят документы, но вы также должны обратить внимание на то, как использовать .on, потому что вы можете либо привязать обработчик события к самому объекту, либо к более высокому уровню элемент и делегировать его как с помощью .delegate.

Скажите, что у вас есть список ul > li и вы хотите привязать событие mouseover к li s. Теперь есть два способа:

  • $('ul li').on('mouseover', function() {});
  • $('ul').on('mouseover', 'li', function() {});

Второй предпочтительнее, потому что с этим обработчик события привязывается к элементу ul один раз, а jQuery получит фактический целевой элемент через event.currentTarget (API jQuery), в то время как в первом примере вы привязываете его к каждому элементу списка. Это решение также будет работать для элементов списка, которые добавляются в DOM во время выполнения.

Это не просто работает для элементов parent > child. Если у вас есть обработчик кликов для каждого якоря на странице, вы должны скорее использовать $(document.body).on('click', 'a', function() {}); вместо просто $('a').on('click', function() {});, чтобы сэкономить много времени, привязывая обработчики событий к каждому элементу.

Ответ 3

Я думаю, что перед публикацией этого вопроса вы должны были бы искать jquery docs:

Как и в jQuery 1.7, метод .on() является предпочтительным методом привязки обработчиков событий к документу.