Метад on

Метад on дазваляе дадаць апрацоўшчык падзей да элемента. Каб выдаліць апрацоўшчык можна скарыстацца метадам off, каб падзея спрацавала толькі адзін раз, а затым апрацоўшчык выдаліў сам сябе - скарыстайцеся метадам one. Элементы, да якіх мы прывязваем апрацоўшчык павінны існаваць падчас выкліку on.

Сінтаксіс

Так мы дадаем апрацоўшчык падзей да элемента, у якасці першага параметра ў выглядзе радка перадаецца адна ці некалькі падзей раздзеленых прабеламі, другім параметрам перадаем дадатковы фільтруючы селектар нашчадкаў унутры элемента, трэцім - дадатковыя даныя, якія перадаюцца ў апрацоўшчык у ўласцівасці event.data пры спрацоўванні падзеі. Другі і трэці парметры неабавязковыя. Чацвёртым перадаем функцыю-апрацоўшчык, у якую перадаецца аб'ект падзеі і неабавязковыя дадатковыя параметры. Калі замест функцыі-апрацоўшчыка перадаць false, то функцыя проста верне false:

javascript$(селектар).on(падзеі, [селектар], [даныя], функцыя-апрацоўшчык(аб'ект падзеі, [дадатковыя параметры]));

Можна скарыстацца метадам on па-іншаму, тады ў першы параметр перадаецца аб'ект JavaScript, дзе ключы - тып падзеі, а значэнні - функцыі-апрацоўшчыкі, якія выклікаюцца для падзей:

javascript$(селектар).on({'тып падзеі': handler}, [селектар], [даныя]);

Калі мы не перадаем дадатковы селектар, то падзея спрацоўвае на элеменце, да якога мы прымацоўваем апрацоўшчык, у адваротным выпадку - на элеменце-нашчадку, які які адпавядае гэтаму селектару (дэлегаваныя падзеі). Адзін і той жа апрацоўшчык падзеі можа быць прывязаны да элемента некалькі разоў.

Прыклад

Давайце ў alert, адлюструем тэкст абзаца з #test пры пстрычцы па ім, пстрычкі па іншых абзацах ні да чаго не прывядуць:

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

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

Прыклад

Давайце пры пстрычцы на абзац вывядзем даныя, якія мы перадалі ў метад on. Скарыстаемся функцыяй-апрацоўшчыкам testFunc, якую мы стварылі:

html<p>click</p>

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

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

Глядзіце таксама