Метод on

Методът on позволява да се добави обработчик на събития към елемент. За да премахнете обработчика може да използвате метода off, за да се задейства събитието само веднъж и след това обработчикът да се премахне сам - използвайте метода one. Елементите, към които прикачваме обработчика, трябва да съществуват по време на извикването на on.

Синтаксис

Така добавяме обработчик на събития към елемент, като като първи параметър във вид на низ се подава едно или няколко събития, разделени с интервали, втори параметър подаваме допълнителен филтриращ селектор за наследници вътре в елемента, трети - допълнителни данни, които се предават на обработчика в свойството event.data при задействане на събитието. Вторият и третият параметър не са задължителни. Четвъртият подава функция-обработчик, в която се предава обект на събитието и незадължителни допълнителни параметри. Ако вместо функция-обработчик се подаде false, то функцията просто ще върне false:

$(селектор).on(събития, [селектор], [данни], функция-обработчик(обект на събитието, [допълнителни параметри]));

Може да се използва методът on по друг начин, тогава в първия параметър се подава JavaScript обект, където ключовете са тип събитие, а стойностите са функции-обработчици, извиквани за събитията:

$(селектор).on({'тип събитие': handler}, [селектор], [данни]);

Ако не подадем допълнителен селектор, то събитието се задейства на елемента, към който прикачваме обработчика, в противен случай - на елемента-наследник, който отговаря на този селектор (делегирани събития). Един и същ обработчик на събитие може да бъде прикачен към елемент няколко пъти.

Пример

Нека в alert, покажем текста на абзаца с #test при кликване върху него, кликвания върху други абзаци не водят до нищо:

<p>text1</p>
<p id="test">text2</p>
<p>text3</p>

$('#test').on('click', function() {
	alert( $(this).text() );
});

Пример

Нека при кликване на абзац да изведем данните, които подадохме в метода on. Ще използваме функцията-обработчик testFunc, която създадохме:

<p>click</p>

function testFunc(event) {
	alert(event.data.text);
}

$('p').on('click', {text: 'aaa'}, testFunc);

Вижте също

метод off,
който позволява да се премахне обработчик на събития от елемент
метод one,
който позволява на събитието да се задейства веднъж, и след това автоматично да се премахне обработчика
обект event,
който съдържа информация за събитието
метод trigger,
който позволява да се стартират всички обработчици на събития, прикачени към елемента за събития от зададен тип
JavaScript метод bind,
който позволява да се прикачи контекст към функция