The inputеvent fires when the value of element is used для створення interactive controls for web-based forms in order to accept data from the user; На основі різних типів введених даних і керування widgets є доступні, залежно від вашого пристрою і користувача. "> , елемент керує тим, що дає змогу menu options"> , або елемент, що представляють multi-line plain-text editing control, useful when you want to allow users to enter sizeable amount of free-form text, for example a comment on a review or feedback form."> element has been changed.</p> <table class="properties"><tbody><tr><th scope="row">Bubbles</th> <td>Yes</td> </tr><tr><th scope="row">Cancelable</th> <td>No</td> </tr><tr><th scope="row">Interface</th> <td>InputEvent</td> </tr><tr><th scope="row">Event handler property</th> <td>GlobalEventHandlers.oninput</td> </tr></tbody></table><h3>HTML</h3> <input placeholder="Enter some text" name="name"/> <h3>JavaScript</h3>const input = document.querySelector("input"); const log = document.getElementById("values"); input.addEventListener("input", updateValue); function updateValue(e) ( log.textContent = e.target.value; ) <h3>Result</h3> <h2>Specifications</h2> <table class="standard-table"><tr><th scope="col">Specification</th> <th scope="col">Status</th> </tr><tbody><tr><td>HTML Living Standard <br> </td> <td>Living Standard</td> </tr><tr><td>Document Object Model (DOM) Level 3 Events Specification <br>Definition of "input event" in that specification.</td> <td>Obsolete</td> </tr></tbody></table><h2>Browser compatibility</h2> <p>Компактність таблиці в цій сторінці генерується з структурованих даних. Якщо ви знайдете, щоб дізнатися про ваші дані, клацніть на https://github.com/mdn/browser-compat-data and send us a pull request.</p> <p>Update compatibility data on GitHub</p><table class="bc-table bc-table-web"><tr class="bc-platforms"><td> </td><th class="bc-platform-desktop" colspan="6">Desktop</th><th class="bc-platform-mobile" colspan="6">Mobile</th> </tr><tr class="bc-browsers"><td> </td><th class="bc-browser-chrome">Chrome</th><th class="bc-browser-edge">Edge</th><th class="bc-browser-firefox">Firefox</th><th class="bc-browser-ie">Internet Explorer</th><th class="bc-browser-opera">Opera</th><th class="bc-browser-safari">Safari</th><th class="bc-browser-webview_android">Android webview</th><th class="bc-browser-chrome_android">Chrome для Android</th><th class="bc-browser-firefox_android">Firefox for Android</th><th class="bc-browser-opera_android">Opera for Android</th><th class="bc-browser-safari_ios">Safari on iOS</th><th class="bc-browser-samsunginternet_android">Samsung Internet</th> </tr><tbody><tr><th scope="row">input event</th><td class="bc-supports-yes bc-browser-chrome">Chrome Full support Yes</td><td class="bc-supports-yes bc-browser-edge bc-has-history">Edge Full support 79 Full support 79 No support 12 - 79 <p>Notes <i> </i></p> Notes <i> </i>Не supported on select , checkbox , або radio inputs.</td><td class="bc-supports-yes bc-browser-firefox">Firefox Full support Yes</td><td class="bc-supports-partial bc-browser-ie bc-has-history">IE Partial support 9</td></tr></tbody></table> <p><i>У цій статті розглянемо методи, які бібліотека jQuery надає веб-розробнику для обробки подій.</i></p> <p>Для роботи з подіями у сценаріях JavaScript браузер надає API (наприклад, функцію addEventListener). Використовуючи цю функцію, ви можете вказати код, який необхідно виконати, коли браузер для зазначеного елемента генеруватиме подію.</p> <h2>Обробка подій за допомогою методів jQuery</h2>Синтаксис функції on <p>Перед тим, як переходити до додавання елементів обробників подій, ці елементи потрібно спочатку отримати. Дізнатися про те, як знайти потрібні елементи на сторінці можна у статті jQuery - Вибір елементів.</p> <p>У jQuery повісити подію (слухач подій) на певний елемент можна за допомогою функцій on і one, а також коротких записів on.</p><p>// функція on.on (events, handler); // функція one.one(events,handler); // events - подія чи список подій через пробіл, у разі настання яких необхідно виконати обробник (handler) // handler - функція (обробник події) // короткий запис функції on .event(handler); // event - назва події (можна використовувати для обробки лише тих подій, для яких у jQuery створено такий короткий запис)</p><p>Функція one відрізняється від on лише тим, що вона виконує обробник при настанні вказаної події лише один раз.</p> <p>Наприклад, додамо за допомогою функції on подію click для всіх елементів із класом btn:</p><p>// використання як обробника анонімної функції $(".btn").on("click", function() ( // дії, які будуть виконані при настанні події... console.log($(this).text() ));)); // використання звичайної функції як обробник var myFunction = function() ( console.log($(this).text()); ) $(".btn").on("click", myFunction);</p><p>Наведений вище код, записаний з використанням короткого запису функції on:</p><p>$(".btn").click(function() ( // дії, які будуть виконані при настанні події... console.log($(this).text()); ));</p><h3>Додаткова інформація про подію</h3> <p>При обробці події ви можете дізнатися деяку <a href="/mts-uznat-rashody-po-nomeru-kak-proverit-rashody-na-mts.html">додаткову інформацію</a>про нього. Передача цієї інформації, саме об'єкта Event в обробник події здійснюється завжди у вигляді першого аргументу.</p><p>$("#demo").on("click", function(e)( // e – об'єкт Event, що містить додаткову інформацію про подію // часто використовуються властивості об'єкта Event e.preventDefault(); //скасувати виконання дії за замовчуванням e.stopPropagation(); // зупинити подальше спливання події // e.type – отримати тип події // e.target – посилання на елемент, на якому сталася подія // e.currentTarget – посилання на поточний елемент (для якого спрацював обробник).Ця властивість, як правило, дорівнює функції this. e.pageY – координати курсору щодо лівого <a href="/installing-windows-10-through-the-sign-flashes-in-the-upper-left-corner-of-the-screen.html">верхнього кута</a>документа));</p><h3>Простір імен</h3> <p>У jQuery після вказівки імені події ви можете додатково вказати простір імен.</p> <p>Наприклад:</p><p>// подія click у просторі імен first $("#demo").on("click.first",function()( console.log("1 обробник події click"); )); // подія click у просторі імен second $("#demo").on("click.second",function()( console.log("2 обробник події click"); ));</p><p>Простір імен – це дуже зручна річ. Вона використовується, наприклад, коли вам необхідно викликати не всі події, а лише з певним ім'ям.</p><p>// викликати подію click у просторі імен first $("#demo").trigger("click.first"); // викликати подію click у просторі імен second $("#demo").trigger("click.second");</p><p>Також за його допомогою дуже просто видаляти певні події:</p><p>//видалити обробники події click у просторі імен first $("#demo").off("click.first"); //видалити обробники події click у просторі імен second $("#demo").off("click.second");</p><p>Опис та приклади використання функцій trigger та off розглядаються у статті трохи нижче.</p> <h3>Передача додаткових даних в обробник</h3> <p>При необхідності ви можете передати дані в обробник події (за допомогою додаткового аргументу у функції on). Доступ до переданих даних усередині обробника здійснюється через об'єкт Event.</p> <p>Здійснюється це так (приклад):</p><p> <div id="content"></div> <button id="showContent1">Показати контент 1</button> <button id="showContent2">Показати контент 2</button> ... <script> $("#showContent1").on("click", {title:"Заголовок 1", content: "Содержимое 1..."}, function(e){ var output = "<b>"+e.data.title+": </b>" + e.data.content; $("#content").html(output); }); $("#showContent2").on("click", {title:"Заголовок 2", content: "Содержимое 2..."}, function(e){ var output = "<b>"+e.data.title+": </b>" + e.data.content; $("#content").html(output); }); </script> </p><h2>Як повісити кілька подій на один елемент</h2> <p>Приклад використання одного обробника для кількох (2 або більше) подій:</p><p>$("#id").on("keyup keypress blur change", function(e) ( console.log(e.type); // тип події )); // або так var myFunction = function() ( ... ) $("#id") .keyup(myFunction) .keypress(myFunction) .blur(myFunction) .change(myFunction);</p><p>Для кожної події своя функція:</p><p>$("#id").on(( mouseenter: function() ( // обробник події mouseenter... ), mouseleave: function() ( // обробник події mouseleave... ), click: function() ( / / обробник події click...)));</p><p>Приклад використання в jQuery кілька обробників (функцій) на одну подію:</p><p>$("#demo").click(function()( console.log("1 обробник події click"); )); $("#demo").click(function()( console.log("2 обробник події click"); ));</p><p>Наприклад, дізнатися в якій черзі виконуватимуться події можна так:</p><p>Var eventList = $._data($("#demo"), "events"); console.log(eventList);</p><h2>Програмний виклик події</h2> <p>Для виклику події з коду jQuery є 2 методи:</p> <ul><li>trigger - викликає зазначену подію елемента.</li> <li>triggerHandler - викликає обробник події, причому сама подія не відбувається.</li> </ul>$("#header").on("click", function() ( console("Відбувся клік на елементі #header"); ) )); // програмний виклик події click елемент $("#header").trigger("click"); // короткий запис даного дзвінка $("#header").click(); // виклик обробника події click у вибраного елемента $("#header"). triggerHandler("click"); <h2>jQuery - Подія завантаження сторінки (ready)</h2> <p>Процес додавання до певного елемента обробника події зазвичай здійснюється після завантаження сторінки, тобто. коли DOM дерево документа вже збудовано. Інакше при написанні обробників ви можете звернутися до елементів, яких ще немає на сторінці.</p> <p>Найкоротший запис події завантаження сторінки в jQuery виглядає так:</p><p>$(function()( // дії, які необхідно виконати після завантаження документа...));</p><p>Але, можна використовувати і довшу запис:</p><p>$(document).ready(function()( // дії, які необхідно виконати після завантаження документа...));</p><h2>jQuery - Подія завантаження (load)</h2> <p>Подія load браузер генерує елемент, коли він і всі вкладені в нього елементи були повністю завантажені. Ця подія призначена лише для елементів, в яких присутні URL: image, script, iframe та window.</p> <p>Наприклад, виконати функцію, коли сторінка буде повністю завантажена (включаючи зображення):</p><p>$(window).on("load", function() ( // дії після повного завантаження сторінки...));</p><p>Наприклад, виведемо повідомлення в консоль, коли вказане зображення буде завантажено:</p><p> <img src='https://i1.wp.com/image.png' loading=lazy loading=lazy> ... <script> $("#image").on("load", function() { console.log("Изображение загружено"); }); </script> </p><h2>jQuery - Події миші</h2> <p>У jQuery для відстеження дій миші найчастіше використовують такі події:</p> <ul><li>mousedown</li> <li>mouseup</li> <li>click</li> <li>mousemove</li> <li>wheel</li> <li>hover</li> <li>mouseenter</li> <li>mouseover</li> <li>mouseleave</li> <li>mouseout</li> </ul><h3>jQuery - Подія клік (click)</h3> <p>Подія click є складною подією, вона виникає після генерування подій mousedown і mouseup . Подія mousedown виникає, коли вказівник знаходиться над елементом і кнопка миші натиснута. Подія mouseup відбувається, коли вказівник знаходиться над елементом, а кнопка миші відпущена. Подія click генерується, коли курсор знаходиться над елементом, а клавіша миші натиснута і відпущена. Ці події можуть отримати будь-які HTML елементи.</p> <p>Наприклад, повісимо обробник на подію на click елемента window . При настанні цієї події обробник виводитиме номер натиснутої клавіші та координати курсору:</p><p>$(window).on("click", function(e) ( // обробка події click... console.log("Натиснута кнопка: " + e.which); //1 - <a href="/pochemu-ne-srabatyvaet-levaya-knopka-myshi-ne-rabotaet-levaya-knopka-myshi.html">ліва кнопка</a>, 2 - середня кнопка, 3 - права console.log("Координати курсору: x =" + e.pageX + "; y = "+ e.pageY); ));</p><p>Наприклад, повісимо подію onclick на всі елементи з класом btn:</p><p>$(".btn").on("click", function()( // код обробника події натискання кнопки... )); Короткий запис події на кліку: $(".btn").click(function()( ... ));</p><p>Наприклад, розберемо, як можна приховати блок через деякий час після події.</p><p> <div class="message">...Приховати блок через 5 секунд...</div> ... <script> $(".hide-message").click(function(e){ e.preventDefault(); var _this = this; setTimeout(function(){ $(_this).closest(".message").hide(); }, 5000); }); </script> </p><h3>jQuery - Подія при наведенні (hover)</h3> <br><img src='https://i2.wp.com/itchief.ru/assets/images/js/jquery-event-hover.png' align="center" width="100%" loading=lazy loading=lazy>jQuery - Що являє собою подію <p>Подія при піднесенні курсору є складною і складається з 2 подій:</p> <ul><li>входження (mouseenter, mouseover);</li> <li>покидання (mouseleave, mouseout).</li> </ul><p>Події mouseenter і mouseleave в jQuery відрізняються від mouseover і mouseout тільки тим, що вони не виникають коли курсор відповідно входить і залишає внутрішні елементи елемента, що прослуховується. Тобто події mouseover і mouseout спливають, а mouseenter і mouseleave - ні.</p> <p>Наприклад, змінимо колір елемента списку під час піднесення курсору до нього:</p><p> <ul id="list"> <li>Ручка</li> <li>Олівець</li> <li>Лінійка</li> </ul> ... <script> $("ul>li"). mouseenter(function(){ // при вхождении в элемент $(this).css("color","orange"); }). mouseleave(function(){ // при покидании элемента $(this).css("color","black"); }); </script> </p><p>Ті ж самі дії, але використанням mouseover і mouseout:</p><p>$("ul>li"). mouseover(function()( // при вході в елемент $(this).css("color","orange"); )). mouseout(function()( // при залишенні елемента $(this).css("color","black"); ));</p><p>Дані методи необов'язково використовувати разом, їх можна також застосовувати окремо.</p> <p>Наприклад, підрахуємо кількість відвідувань елемента при настанні події "Навести мишею":</p><p> <div id="count">Кількість: 0</div> ... <script> $("#count").mouseenter(function(){ var count = parseInt($(this).find("span").text()); count++; $(this).find("span").text(count); }); </script> </p><p>Замість використання mouseenter і mouseleave можна використовувати подію hover.</p> <p>Наприклад, перепишемо наведений вище приклад, використовуючи hover:</p><p>$("ul>li").hover(function()( // при вході в елемент $(this).css("color","orange"); ), function()( // при залишенні елемента $( this).css("color","black"); ));</p><p>При використанні події hover в jQuery, перший обробник використовується для завдання дій при вході курсору в елемент (mouseenter), а другий - при залишанні (mouseleave).</p> <p>Якщо вказати події hover один обробник, він буде виконуватися як обробки наведення миші, так її залишення.</p> <p>Наприклад:</p><p>$("h1").hover(function()( console.log("Сталося події входу в елемент або виходу з нього"); ));</p><h3>jQuery - Подія руху миші</h3> <p>Подія mousemove посилається елементу, коли вказівник миші переміщується всередині нього. Будь-який HTML елемент може отримувати цю подію.</p><p>$(".target").mousemove(function(e) ( console.log("Викликаний обробник для події mousemove."); console.log("Координати щодо лівого верхнього кута документа: " + e.pageX + ", " + e.pageY); console.log("Координати курсору всередині мети: " + e.offsetX + ", " + e.offsetY); ));</p><h3>jQuery - Подія коліщатка миші (wheel)</h3> <p>Прослуховування події прокручування коліщатка (wheel) мишки можна здійснити так:</p><p>$(window).on("wheel", function(e) ( // код обробника (наприклад)... console.log("Кількість прокручених пікселів: " + e.originalEvent.deltaY); if (e.originalEvent). deltaY< 0){ console.log("Прокручиваем вверх"); } else { console.log("Прокручиваем вниз"); } }); </p><p>Ця подія на відміну від scroll генерується браузером тільки для коліщатка мишки, при цьому неважливо прокручується елемент чи ні, тобто. з ним можна працювати на елементах з overflow, рівним hidden. Ще одна відмінність полягає в тому, що wheel генерується до прокручування, а scroll - після неї.</p> <h2>jQuery – Події клавіатури</h2> <p>При натисканні клавіатури браузер генерує події в наступному порядку:</p><p>Keydown -> keypress -> keyup</p><ul><li>keydown (клавіша натиснута, але ще не відпущена);</li> <li>keypress (подія генерується для літер, цифр та інших клавіш, за винятком керуючих) – призначено для того, щоб отримати код символу (події keydown і keyup дозволяють дізнатися тільки про код клавіші, але не символ);</li> <li>keyup (генерується браузером під час відпускання клавіші).</li> </ul><p>Наприклад, напишемо обробник для прослуховування всіх подій, які відбуваються при натисканні клавіші:</p><p> <input id="target" type="text" value=""> ... <script> $("#target").on("keydown keypress keyup", function(e) { console.log("Тип события: " + e.type); // keydown, keypress, keyup console.log("Код нажатой клавиши или символа: " + e.which); // код символа позволяет получить только keypress console.log("Нажата клавиша Alt: " + e.altKey); console.log("Нажата клавиша Ctrl: " + e.ctrlKey); console.log("Нажата клавиша Shift: " + e.shiftKey); console.log("Нажата клавиша Cmd (osMac): " + e.metaKey); }); </script> </p><p>Приклад, в якому показано, як можна прослухати подію keypress і дізнатися, чи натиснуто вказане поєднання клавіш:</p><p>$(document).keypress("c", function(e) ( if(e.ctrlKey) ( console.log("Натиснуте сполучення клавіш Ctrl+c"); ) ));</p><p>Приклад, як можна прослухати клавіші Ctrl+Enter:</p><p>$(document).keydown(function(e) ( // за допомогою macOS X if ((e.ctrlKey || e.metaKey) && (e.keyCode == 13 || e.keyCode == 10))) ( / / ваші дії... ) )</p><p>Приклад, з використанням подій keydown та keyup:</p><p> <input id="name" type="text"> ... <script> $("#name"). keydown(function(){ $(this).css("background-color", "yellow"); }). keyup(function(){ $(this).css("background-color, "pink"); }); </script> </p><h2>jQuery – Події елементів форми</h2> <p>У jQuery можна виділити такі події для елементів форми і не тільки:</p> <ul><li>focus (focusin)</li> <li>blur (фокус)</li> <li>change</li> <li>input (для текстових елементів форми)</li> <li>select</li> <li>submit</li> </ul><h3>jQuery - Події отримання та втрати фокусу</h3> <p>Подія focus надсилається елементу, коли він отримує фокус. Ця подія генерується для елементів input , select і посилань (a href="..."), а також будь-яких інших елементів, які мають властивість tabindex . Отримання елементом фокусування зазвичай здійснюється за допомогою кліка або натискання клавіші Tab на клавіатурі. Подія focus не спливає.</p> <p>Крім focus є ще подібна подія, називається вона focusin. На відміну від focus, ця подія спливає, і вона може, наприклад, використовуватися для виявлення події фокусу батьківськими елементами.</p> <p>Подія blur надсилається елементу, коли він втрачає фокус. Так само як і focus, подія blur має схожу подію focusout. Ця подія відрізняється від blur тим, що вона може спливати. Це можна використовувати, наприклад, щоб одержати його на батьківських елементах, а не тільки на тому елементі, який його викликав (target).</p> <p>Наприклад, при отриманні елементом div події фокусу встановимо йому тло оранжевого кольору:</p><p> <div id="demo"><input type="text"></div> ... <script> $("#demo"). focusin(function(){ $(this).css("background-color","orange"); }) .focusout(function(){ $(this).css("background-color","inherit"); }); </script> </p><p>Таке саме виконати з допомогою подій focus і blur не вдасться, т.к. вони не спливають:</p><p>$("#demo input"). focus(function()( $(this).parent().css("background-color","orange"); )) .blur(function()( $(this).parent().css("background -color","inherit"); ));</p><h3>jQuery - Подія зміни (change)</h3> <p>Подія change призначена для реєстрації зміни значення елементів input, textarea і select. Для елементів select , checkboxes , і radio кнопок ця подія виникає відразу (тобто як тільки користувач робить вибір). Але для інших елементів ця подія не відбуватиметься доти, доки цей елемент не втратить фокус.</p> <p>Приклад використання події change для стеження стану елемента checkbox . Доступність кнопки визначатиме залежно від того в якому стані (checked чи ні) знаходитись прапорець:</p><p> <input type="checkbox" id="agree"> <button type="submit" id="send" disabled>Відправити</button> ... <script> $(function() { $("#agree").on("change", function(){ if (this.checked) { $("#send").prop("disabled",false); } else { $("#send").prop("disabled",true); } }); }); </script> </p><p>Приклад, у якому розглянемо, як отримати значення елемента select при його зміні:</p><p> <select id="list"> <option value="1">Перше значення</option> <option value="2">Друге значення</option> <option value="3">Третє значення</option> </select> ... <script> $(function() { $("#list").on("change", function(){ var value = $(this).val(); $("#result").text(value); }); }); </script> </p><p>Приклад, у якому розглянемо, як отримати всі вибрані елементи select при його зміні:</p><p> <select name="colors" multiple="multiple"> <option>Зелений</option> <option>червоний</option> <option>Синій</option> <option>Коричневий</option> <option>Фіолетовий</option> <option>Сірий</option> </select> ... <script> $("select") .change(function () { var colors = ; $("select option:selected").each(function() { colors.push($(this).text()); }); console.log("Выбранные цвета: " + colors.join()); }) .change(); </script> </p><p>Приклад програмного виклику події change для select:</p><p>// list - ID елемента change $("#list").trigger("change"); // Короткий запис $("#list").change(); // виклик тільки обробника події change $("#list"). triggerHandler("change");</p><p>Приклад використання події зміни зміни для отримання значення елемента input:</p><p> <input type="text" name="name"> ... <script> $(function() { // событие изменения значения input (возникает только после потери фокуса) $("input").on("change", function(){ var value = $(this).val(); console.log(value); }); }); </script> </p><p>Але крім події change є ще подія input для текстових елементів. Ця подія, на відміну від change, генерується відразу, а не після того, як цей елемент втратить фокус.</p> <p>Приклад використання події введення для отримання значення елемента input:</p><p>$("input").on("input",function()( var value = $(this).val(); console.log(value); ));</p><p>Приклад, в якому представлений один із способів отримання значення елемента:</p><p> <textarea name="text"> ...

Приклад, у якому розглянемо, як з допомогою події change отримати значення вибраного елемента input з type , рівним radio:

Windows Linux macOS ...

jQuery - Подія вибору

Подія вибору select генерується браузером, коли користувач усередині елементів input з type="text" або textarea виділяє текст.

$("#target").select(function() ( console.log("Викликаний обробник події select"); ));

jQuery – Подія відправлення форми (submit)

Подія submit виникає у елемента, коли користувач намагається надіслати форму. Ця подія може бути додана лише до елементів form .

Приклад використання події submit:

...

...

Програмний виклик надсилання форми:

$("#feedback").submit(); $("#feedback").trigger("submit");

jQuery - Подія прокручування (scroll)

Для відстеження стану скролінгу в jQuery використовується подія scroll.

Наприклад, повісимо на подію прокручування сторінки функцію, яка буде відображати елемент з класом scrollup , якщо величина прокручування більше 200px і приховувати його, якщо значення прокручування менше цієї величини.

// короткий запис функції $(window).scroll(function() ( // дії при скролінг сторінки... if ($(this).scrollTop()>200) ( $(".scrollup").fadeIn() ; ) else ( $(".scrollup").fadeOut(); ) ));

jQuery - Подія зміни розмірів вікна (resize)

Для прослуховування події зміни вікна браузера використовують resize:

Наприклад, створимо обробник, який буде при зміні вікна браузера виводити на кінець сторінки її ширину та висоту:

$(window).resize(function() ( $("body").append("

Ширина x Висота = "+window.innerWidth+"x"+window.innerHeight+"

"); });

jQuery - Скасування стандартної поведінки події

Деякі елементи HTML мають стандартну поведінку. Наприклад, коли користувач натискає посилання, він переходить за адресою вказаною в атрибуті href . Якщо вам ця дія не потрібна, то її можна скасувати. Для скасування стандартної поведінки необхідно викликати в обробнику цієї події метод preventDefault об'єкта event.

Наприклад, скасуємо стандартну поведінку всіх посилань на сторінці, що мають клас service:

$("a.service").on("click",function(e)( //скасовуємо стандартну дію браузера e.preventDefault(); // дії, які виконуватиме посилання... ));

Що таке спливання і як його зупинити

Окрім скасування стандартної дії, у механізмі подій є ще таке поняття як спливання. Воно полягає в тому, що коли браузер генерує подію, то він це робить не тільки для поточного елемента (мети), але і для всіх його нащадків, включаючи батька:

Поточний елемент (мета) -> батьківський елемент мети -> прабатьківський елемент -> ... -> document -> window

У jQuery бувають сценарії, коли у представленому ланцюжку у якогось елемента те ж є обробник для цієї події, яку виконувати не потрібно. І щоб ця подія не поширилася на цей елемент, її необхідно зупинити. Для цього в обробнику потрібного елемента необхідно викликати метод stopPropagation об'єкта event. Після виклику цього методу подія зупиниться і не спливатиме.

Наприклад, щоб піднести курсор до елемента з класом mark , його вміст ставав помаранчевим кольором.

...

В даному випадку якщо не вказувати метод stopPropagation, то при піднесенні курсору до елемента span з класом mark ця подія виникне не тільки у нього, але й у всіх його батьківських елементів. А це в цьому прикладі призведе до того, що зміниться колір як тексту, укладеного в span , а й усього абзацу.

Якщо вам необхідно скасувати стандартну поведінку браузера і зупинити спливання події, то в jQuery замість виклику двох цих методів можна просто повернути як результат функції значення false .

$("a").on("click", function(e)( //e.preventDefault(); //e.stopPropagation(); ... return false; ));

Додавання подій до динамічно створених об'єктів

Для того, щоб повісити подію на елемент, якого ще немає, можна використовувати наступну конструкцію функції:

$(document).on(eventName, selector, handler); // document або будь-який інший існуючий батьківський елемент // eventName – ім'я події // selector – селектор, що здійснює фільтрацію нащадків, для яких необхідно запустити обробник події // handler – обробник події

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

Наприклад, додамо подію до елемента, якого ще немає на сторінці:

Додати кнопку

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

Наприклад, заборонимо в коментарях переходити за зовнішніми посиланнями (такі дії перенаправлятимемо на сторінку away):

$(document).on("click","#comment a",function(e) ( if(!(location.hostname === this.hostname || !this.hostname.length))) ( e.preventDefault( );location.href="away?link="+encodeURIComponent($(this).attr("href")); ) ));

jQuery - Видалити обробник події

Видалення обробників події здійснюється за допомогою методу off. При цьому за допомогою нього можна видалити ті обробники, які додані за допомогою методу on .

Виклик методу off без аргументів зніме у зазначених елементів усі додані до них обробники подій.

Наприклад, відключимо всі обробники у елементів із класом link:

$(".link").off();

Наприклад, видалимо подію click у всіх елементів із класом link:

$(".link").off("link");

Спеціальний селектор (**) дозволяє видалити лише делеговані події із збереженням не делегованих:

$(".link").off("click","**");

Видалити лише зазначені делеговані події (за допомогою селектора):

// додавання делегованої події $("ul").on("click","li", function()( // виводимо в консоль контент елемента li console.log($(this).text()); )) ; // Видалення делегованої події $("ul").off("click","li");

Видалити всі обробники openModal делегованої події click у просторі імен modal для елементів з класом show:

$("body").on("click.modal", ".show", openModal);

Створення події користувача

Для створення подій користувача в jQuery використовуються методи on і trigger .

Принцип створення спеціальної події jQuery розглянемо за допомогою такого прикладу:

...

Минулої теми розглядалися події, що виникають при натисканні клавіш. У цьому темі ми розглянемо інші події форми. У тому числі надсилання форми на сервер.

Елемент у фокусі

Коли елемент форми виявляється у фокусі, виникає подія focus, а коли елемент виходить з фокусу, спрацьовує подію blur. Створимо поле для введення та виведемо в консоль текст при отриманні ним фокусу та при виході з фокусу:

HTML код:

Немає сенсу використання цих подій для зміни стилю елемента. Для цього в CSS існує псевдоклас focus.

Введення значення

Подія inputвиникає, коли користувач друкує текст у полі для введення. Воно спрацьовує під час додавання або видалення кожного символу, а також копіювання тексту в поле для введення. У деяких браузерах воно працює незвичайно: при кожному введенні символу створюється подія blur, після цього виконується обробник події input, а потім створюється подія focus. Якщо обробників подій focus та blur немає, то в цьому немає проблеми. Але якщо вони є, вони будуть спрацьовувати при кожному додаванні символу.

Додамо на сторінку ще один тэг і виведемо його значення під час введення тексту:

HTML код:

JavaScript:

28 29 30 31 32

var newv = document.getElementById("new_value"); newv.onchange = function () ( console.log("Значення змінено на: "+newv.value); );

Надсилання форми

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

Помістимо створені теги у форму та додамо кнопку відправлення форми:

HTML код:

У попередніх прикладах елементи форми вже були знайдені, тому обробник повторний пошук не проводиться.

Якщо форма заповнена правильно, тобто у всіх полях є хоча б два символи, то браузер спробує запустити файл, вказаний в атрибуті action, і виникне помилка, тому що такого файлу немає. Але в цьому немає жодного ризику, тому не треба боятися перевіряти роботу скрипта. Якщо в одному з полів введено менше двох символів, з'явиться повідомлення та відправка буде скасована. Якщо перевірок досить багато, то можна для кожної перевірки виводити своє повідомлення та скасовувати надсилання форми.

Віруси