Події JavaScript. JavaScript - Види подій Реєстр DOM-властивості має значення

Останнє оновлення: 1.11.2015

Минулої теми було розглянуто вбудовані обробники (inline event handler), які визначаються в коді елемента за допомогою атрибутів:

Хоча цей підхід чудово працює, але він має купу недоліків:

Код html змішується з кодом JavaScript, у зв'язку з чим стає важче розробляти, налагоджувати та підтримувати програму

Обробники подій можна встановити лише для вже створених на веб-сторінці елементів. p align="justify"> Динамічно створювані елементи в цьому випадку позбавляються можливості обробки подій

До елемента для однієї події може бути прикріплений лише один обробник

Не можна видалити обробник без зміни коду

Проблеми, які виникають при використанні вбудованих обробників, були вирішені властивості обробників. Подібно до того, як у html-елементів є атрибути для обробників, так і в коді JavaScript у елементів DOM ми можемо отримати властивості обробників, які відповідають атрибутам:

function handler(e)( alert(e.type); ) document.getElementById("rect").onclick = handler;

У результаті нам достатньо взяти властивість onclick і привласнити йому функцію, що використовується як обробник. За рахунок цього код html відокремлюється від коду JavaScript.

Варто також зазначити, що обробник події браузер автоматично передає об'єкт Event, що зберігає всю інформацію про подію. Тому ми можемо отримати цей об'єкт у функції обробника як параметр.

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

Для роботи зі слухачами подій JavaScript є об'єкт EventTarget , який визначає методи addEventListener() (для додавання слухача) і removeEventListener() для видалення слухача. І оскільки html-елементи DOM теж є об'єктами EventTarget, вони також мають ці методи. Фактично слухачі представляють самі функції обробників.

Метод addEventListener() приймає два параметри: назву події без префікса on та функцію обробника цієї події. Наприклад:

#rect( width:50px; height:50px; background-color:blue; ) var rect = document.getElementById("rect"); rect.addEventListener("click", function (e) (alert(e.type); ));

Тобто в цьому випадку знову ж таки обробляється подія click. І також можна було б як другий параметр назва функції:

Function handler(e)( alert(e.type); ) var rect = document.getElementById("rect"); rect.addEventListener("click", handler);

Видалення слухача аналогічно додавання:

Rect.removeEventListener("click", handler);

Перевагою використання слухачів є те, що ми можемо встановити для однієї події кілька функцій:

Var clicks = 0; function handlerOne(e)( alert(e.type); ) function handlerTwo(e)( clicks++; var newNode = document.createElement("p"); newNode.textContent = "відбулося натискання " + clicks; document.body.appendChild (newNode); ) var rect = document.getElementById("rect"); // прикріплюємо перший обробник rect.addEventListener("click", handlerOne); // прикріплюємо другий обробник rect.addEventListener("click", handlerTwo);

Подія – це те, що сталося чи відбувається. Наприклад, браузер генерує подію, коли завершується завантаження документа, коли користувач водить курсором миші веб-сторінкою або натискає клавішу на клавіатурі.

У будь-якої події є мета події. Мета події (або цільовий об'єкт) - це об'єкт, в якому виникла подія або з яким ця подія пов'язана.

Для будь-якої події можна зареєструвати функцію (одну або більше), яка автоматично викликатиметься браузером при виникненні події. Функцію, яка використовується для обробки події, називають слухачем або обробником події .

Оброблювач події реєструється у цільового об'єкта. Зареєструвати обробник події можна трьома способами:

• Використовуючи метод addEventListener() у цільового об'єкта: elem.addEventListener("click", foo, false);
• Надавши обробник властивості об'єкта, що є метою події: elem.onclick = foo;

  Зареєструвати обробник події можна надавши властивості цільового об'єкта бажану функцію. Властивості, яким присвоюються обробники мають імена, що починаються з приставки "on", за якою слідує ім'я події: click , change і т. д.: window.onload = function () ( alert("Сторінка повністю завантажена!"); )

• Вказати обробник як значення атрибута цільового HTML-елемента:

Поширення подій - це модель, в якій визначається, де настає подія і як вона поширюється.

Усього є дві моделі поширення подій. Перша модель називається "сплив подій", друга - "перехоплення подій".

У цій моделі подія виникає у найбільш конкретного елемента (самого вкладеного), а потім піднімається ієрархією до найменш конкретного вузла. Сплив продовжується до об'єкта window.

Назва веб-сторінки "use strict"; let div = document.querySelector("div"); let body = document.querySelector("body"); let html = document.querySelector("html"); div.addEventListener("click", function() (alert("div"); ), false); body.addEventListener("click", function() (alert("body"); ), false); html.addEventListener("click", function() (alert("html"); ), false); document.addEventListener("click", function() (alert("document"); ), false); window.addEventListener("click", function () (alert("window"); ), false);

Спробувати »

Якщо натиснути на елемент , подія click буде виникати в наступному порядку:

У цій моделі подія виникає у найменш конкретного вузла (об'єкта window), а потім спускається ієрархією до найбільш конкретного елемента.

Розглянемо код наступної веб-сторінки:

Назва веб-сторінки "use strict"; let div = document.querySelector("div"); let body = document.querySelector("body"); let html = document.querySelector("html"); div.addEventListener("click", function () ( alert("div"); ), true); body.addEventListener("click", function () ( alert("body"); ), true); html.addEventListener("click", function() (alert("html"); ), true); document.addEventListener("click", function () ( alert("document"); ), true); window.addEventListener("click", function () ( alert("window"); ), true);

Спробувати »

Якщо натиснути на елемент , подія click буде виникати в наступному порядку.

Функція, яка виконується під час спрацювання події називається обробник події . До кожного типу подій є свій обробник. Назва обробника складається зі слова on та назви події. Наприклад, обробник події click називається onclick . Події відбуваються не сторінці взагалі, але в конкретному елементі. Відповідно, і обробник - це не окрема функція. Оброблювач ставиться на якийсь елемент сторінки.

Існують різні способи призначити елементу обробник події. Можна призначити обробник за допомогою атрибуту тега. Код, який має виконатись при спрацюванні події, пишеться у значенні атрибуту. Створимо сторінку, додамо на неї кнопку та призначимо їй обробник події.

JavaScript:

JavaScript:

Коли функція присвоюється обробнику, після імені функції немає дужок. Якщо поставити дужки, то це буде не надання функції, а виклик на виконання.

Існує метод addEventListener() , який призначає обробник події елементу. Він вважається сучаснішим. Зараз він застосовується не часто, але JavaScript має нові події, обробити які можна тільки за допомогою цього методу.

елемент.addEventListener (подія, функція)

Параметри:

подія - подія, яку потрібно обробляти

функція - функція, яка стає обробником

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

HTML код:

JavaScript:

Метод removeEventListener() дозволяє видалити обробник.

елемент.removeEventListener (подія, функція)

За допомогою розглянутого методу елементу можна призначити кілька обробників однієї події. Тоді потрібно видаляти окремо кожен із них.

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

Об'єкт події передається як параметр у функцію, яка є обробником. Для доступу до об'єкта потрібно у функції створити параметр. Через цей параметр здійснюється звернення до об'єкта. Якщо функція передбачає ще інші параметри, то об'єкт події повинен бути першим параметром. Змінимо обробник для кнопки, у якої id одно "button". Отримаємо доступ до об'єкта події. Замість повідомлення про натискання кнопки виведемо тип події. Тепер обробник виглядатиме так:

Натисніть на кнопку, буде виведено тип події, що спрацювала.

Усі об'єкти події мають властивість currentTarget . Воно повертає елемент, у якому спрацювала подія. Це може здатися безглуздим. Адже обробник призначено конкретному елементу. Навіщо повертати цей елемент? Але з подією браузера все дещо складніше. Трохи згодом Ви дізнаєтеся, як це використовується. Інші характеристики ми розглянемо щодо конкретних подій.

Події – це дії, які JavaScript може відстежити.

Приклад нижче показує дату, коли було натиснуто кнопку:

За допомогою JavaScript у нас з'являється можливість створювати динамічні веб-сторінки.

Події – це дії, які JavaScript може виявити та відстежити.

Кожен елемент на веб-сторінці має певні події, які можуть призводити до дії JavaScript.

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

Примітка: Події зазвичай використовуються разом з функціями, і функція не буде виконуватися, поки не відбудеться подія!

onLoad і onUnload

Обидві події onLoad і onUnload також часто використовуються, коли ми маємо справу з cookies, які повинні бути встановлені, коли користувач заходить або залишає сторінку. Наприклад, ви могли б зробити спливаюче вікно, яке запитує ім'я користувача, коли він вперше заходить на вашу сторінку.

onFocus, onBlur і onChange

Події onFocus, onBlur і onChange часто використовуються при перевірці полів форми.

onMouseOver

Подія onmouseover може використовуватися, щоб запустити функцію, коли користувач переміщає вказівник миші над HTML елементом.

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

Події в JS можна розділити на 4 великі групи:

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

Події клавіатури, миші та тачскріна: спрацьовують, коли користувач натискає або відпускає кнопки на клавіатурі, керує мишею, трекпадом або працює з тачскрином.

Події фокусу та фори. Здебільшого асоціюються з формами: поле input "отримує фокус", коли користувач готовий з ним взаємодіяти. Інші події відстежують передачу форми, зміну значень полів форми тощо.

JavaScript. Швидкий старт

Спеціальний код, який спрацьовуватиме лише для певного елемента DOM, створює обробник події. У JS є три способи створити обробник подій:

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

У прикладі вище після того, як поле отримає фокус, і користувач перейде до заповнення наступного поля (наприклад, за допомогою TAB або звичайного кліку) елемент викличе функцію checkName, яка написана в JS.
Стандартні HTML обробники подій не рекомендують використовувати в сучасній розробці, в основному через те, що функціонал перемішується з розміткою, що ускладнює роботу та налагодження коду.

Дана техніка розділяє JS і розмітку, але має те саме обмеження - подіям можна привласнити тільки одну функцію. Еквівалентним записом HTML обробника подій у DOM буде:

var username = document.getElementbyId("username"); username.onblur = checkName;

Події фокусу та фори. Здебільшого асоціюються з формами: поле input "отримує фокус", коли користувач готовий з ним взаємодіяти. Інші події відстежують передачу форми, зміну значень полів форми тощо.

Вивчіть основи JavaScript на практичному прикладі створення веб-додатку

Як і в попередньому прикладі, функція checkName запускається після того, як елемент форми втрачає фокус.

Сучасний метод додавання оброблювача подій, що дозволяє чіпляти кілька подій та функцій:

var username = document.getElementbyId("username"); username.addEventListener("blur", checkName, false);

Бульове значення в кінці вказує на те, чи потрібно захопити подію. Зазвичай задається false. У простих скриптах подія часто записується як анонімної функції:

var username = document.getElementbyId("username"); username.addEventListener("blur", function() ( // дії зі спрацьовування події ))