Події форми. Події форми Додаткова інформація про подію

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

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

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

HTML код:

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

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

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

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

HTML код:

JavaScript:

Відправлення форми

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

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

HTML код:

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

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

The input Event fires when the value of element is used to create interactive controls for web-based forms in order to accept data from the user; wide wireless of types of input data and control widgets are available, depending on device and user agent. "> , елемент представляє контроль, що забезпечує меню опцій"> , або елемент репрезентують multi-line plain-text editing control, useful when you want to allow users to enter sizeable amount of free-form text, для прикладу коментар на review або 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 і пишуть.</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 , or 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>Для роботи з подіями у сценаріях <a href="https://remzhuk.ru/uk/kak-vklyuchit-yazyk-javascript-kak-vklyuchit-javascript-v-brauzere-instrukciya-dlya-vseh/">JavaScript браузер</a>надає 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>Під час обробки події ви можете дізнатися деяку додаткову інформацію про неї. Передача цієї інформації, саме об'єкта Event в обробник події здійснюється завжди у вигляді першого аргументу.</p><p>$("#demo").on("click", function(e)( // e – об'єкт Event, що містить додаткову інформацію про подію // часто використовуються властивості об'єкта Event e.preventDefault(); //скасувати виконання дії за замовчуванням e.stopPropagation(); //зупинити подальше спливання події // e.type – отримати тип події // e.target – посилання на елемент, на якому сталася подія // e.currentTarget – посилання на поточний елемент (для якого спрацював обробник).Ця властивість, як правило, дорівнює функції this. e.pageY – координати курсору щодо лівого верхнього кута документа ));</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 є два методи:</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 є складною подією, вона виникає після генерування подій, переміщенихвниз і mouseup . Подія рухаєтьсяназад виникає, коли вказівник знаходиться над елементом і кнопка миші натиснута. Подія mouseup відбувається, коли вказівник знаходиться над елементом і кнопка миші відпущена. Подія click генерується, коли курсор знаходиться над елементом, а клавіша миші натиснута і відпущена. Ці події можуть отримувати будь-які <a href="https://remzhuk.ru/uk/raspolozhenie-div-po-centru-i-drugie-tonkosti-pozicionirovaniya/">HTML елемент</a>ы.</p> <p>Наприклад, повісимо обробник на подію onclick елемента window . При настанні цієї події обробник виводитиме номер натиснутої клавіші та координати курсору:</p><p>$(window).on("click", function(e) ( // обробка події click... console.log("Натиснута кнопка: " + e.which); //1 - <a href="https://remzhuk.ru/uk/neaktivnoe-menyu-pusk-windows-10-pusk-ne-reagiruet-na-levuyu-knopku-myshi-pochemu-ne/">ліва кнопка</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://i0.wp.com/itchief.ru/assets/images/js/jquery-event-hover.png' align="center" width="100%" loading=lazy loading=lazy>jQuery - Що являє собою подію hover <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>Подія мишіпереміщається до елемента, коли вказівник миші переміщується всередині нього. Будь-який 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>Наприклад, при отриманні <a href="https://remzhuk.ru/uk/selektor-dlya-vseh-elementov-v-div-kompleksnye-selektory/">елементом div</a>події фокусу встановимо йому тло помаранчевого кольору:</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 генерується відразу, а не після того, як <a href="https://remzhuk.ru/uk/1s-naznachit-tip-elementu-formy-tipy-bazy-dannyh/">даний елемент</a>втратить фокус.</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)

Подія вибору 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; ));

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

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

$(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 розглянемо за допомогою такого прикладу: