jQuery's .bind () vs. .on ()

Я знайшов дві чудові статті, які розповідають про нову функцію .on(): jquery4u.com , elijahmanor.com .

Чи є спосіб, де .bind()все-таки краще використовувати ніж .on()?

Наприклад, у мене є зразок коду, який виглядає приблизно так:

$("#container").click( function( e ) {} )

Ви можете зауважити, що у мене є лише один елемент, витягнутий селектором, і в моєму випадку <div>назва є #containerвже при завантаженні моєї сторінки; не додається динамічно. Важливо зазначити, що я використовую останню версію jQuery: 1.7.2.

Для цього зразка слід .on()використовувати замість того, .bind()навіть якщо я не використовую інші функції, передбачені .on()функцією?

Внутрішньо .bindкарта безпосередньо .onв поточній версії jQuery. (Те саме стосується .live.) Отже, якщо ви .bindзамість цього використовуєте крихітний, але практично незначний показник продуктивності .

Однак їх .bindможна буде будь-коли видалити з майбутніх версій. Немає жодної причини продовжувати використовувати, .bindі будь-яка причина віддати перевагу .onзамість цього.

Усі ці фрагменти виконують абсолютно те саме:

element.on('click', function () { ... });
element.bind('click', function () { ... });
element.click(function () { ... });

Однак вони сильно відрізняються від цих, які виконують одне і те ж:

element.on('click', 'selector', function () { ... });
element.delegate('click', 'selector', function () { ... });
$('selector').live('click', function () { ... });

Другий набір обробників подій використовує делегування подій і буде працювати для динамічно доданих елементів. Обробники подій, які використовують делегування, також набагато ефективніші. Перший набір не буде працювати для динамічно доданих елементів і значно гірший за продуктивність.

on()Функція jQuery не вводить жодної нової функціональності, яка ще не існувала, це лише спроба стандартизувати обробку подій у jQuery (вам більше не доведеться вирішувати між прямою трансляцією, прив'язкою чи делегуванням).

Прямі методи і .delegateє перевершеними API .onта не мають наміру знецінювати їх.

Прямі методи є кращими, оскільки ваш код буде менш строго набраний. Ви отримаєте негайну помилку, коли помилково введете ім’я події, а не мовчазну помилку. На мою думку, також простіше писати та читати, clickніжon("click"

.delegateПеревершує .onз наказу аргументу:

$(elem).delegate( ".selector", {
    click: function() {
    },
    mousemove: function() {
    },
    mouseup: function() {
    },
    mousedown: function() {
    }
});

Ви відразу знаєте, що це делеговано, тому що, це, каже, делегат. Ви також моментально бачите селектор.

З .onцим не відразу зрозуміло, чи він навіть делегований, і вам доведеться подивитися на кінець для селектора:

$(elem).on({
    click: function() {
    },
    mousemove: function() {
    },
    mouseup: function() {
    },
    mousedown: function() {
    }
}, "selector" );

Тепер називання .bindсправді жахливе і за номіналом гірше, ніж .on. Але .delegateне можна робити неделегованих подій, і є події, які не мають прямого методу, тому в рідкісному випадку, як це, він може бути використаний, але тільки тому, що ви хочете зробити чітке розділення між делегованими та не делегованими подіями.

Якщо ви заглянете у вихідний код, $.fn.bindви побачите, що це просто переписати функцію для on:

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

http://james.padolsey.com/jquery/#v=1.7.2&fn=$.fn.bind

З документації jQuery:

Як і в jQuery 1.7, метод .on () є кращим методом прикріплення обробників подій до документа. Для більш ранніх версій метод .bind () використовується для прикріплення обробника подій безпосередньо до елементів. Обробники приєднані до обраних на даний момент елементів об'єкта jQuery, тому ці елементи повинні існувати в точці, в якій відбувається виклик .bind (). Для більш гнучкої прив'язки подій див. Обговорення делегації подій у .on () або .delegate ().

http://api.jquery.com/bind/

Станом на Jquery 3.0 і вище .bind застаріло, і вони вважають за краще використовувати .on замість цього. Як @Blazemonger раніше відповідав, що його можна буде видалити, і він впевнений, що він буде видалений. Для старих версій .bind також викликає .on внутрішньо, і різниці між ними немає. Будь ласка, також див. Api для більш детальної інформації.

Документація API jQuery для .bind ()