Типи подій. Події javaScript Події dom javascript

На цьому уроці ми розглянемо основні види подій, які Ви можете перехоплювати з допомогою JavaScriptдо виконання деякого коду.

Усі події JavaScript можна розділити на такі категорії: події миші (Mouse Events), події клавіатури (Keyboard Events), події об'єктів та кадрів (Frame/Object Events), події форми та елементів керування (Form Events), події перетягування (Drag Events) , події анімації (Animation Events), події буфера обміну (Clipboard Events), події мультимедіа (Media Events), події трансформації (Transition Events), події, що посилаються сервером (Server-Sent Events), події торкання (Touch Events), події друку (Print Events), різні події (Misc Events).

Увага: всі події в JavaScript пишуться малими (маленькими) літерами.

• mousedown - подія відбувається, коли кнопка миші натиснута над деяким елементом, але ще відпущена.
• mouseup - подія відбувається, коли кнопка миші над деяким елементом перейшла зі стану натискання, відпущена в стан.
• click - подія відбувається, коли користувач клацнув мишею на елементі. Порядок виникнення подій, пов'язаних з click (для лівої та середньої кнопки миші): mousedown -> mouseup -> click .
• contextmenu - подія відбувається, коли користувач клацнув правою кнопкою мишею на елементі. Порядок виникнення подій, пов'язаних з contextmenu (для правої кнопки миші): mousedown -> mouseup -> contextmenu .
• dblclick – подія відбувається, коли користувач виконав подвійний клік на елементі. Порядок виникнення подій, пов'язаних з dblclick: mousedown -> mouseup -> click -> mousedown -> mouseup -> click -> dblclick .
• mouseover - подія відбувається, коли курсор миші входить в область, що належить елементу або одному з його дітей.
• mouseout - подія відбувається, коли курсор миші йде з області, що належить елементу або одному з дітей.
• mousemove - подія відбувається, коли курсор миші переміщається всередині області, що належить елементу.
• mouseenter - подія виникає, коли вказівник миші входить у область, що належить елементу. Ця подія часто використовується разом з подією, якавиходить, коли відбувається, коли покажчик миші йде з області, що належить елементу. Подія mouseenter подібна до події mouseover і відрізняється від неї тільки тим, що подія mouseenter не спливає (з поняттям спливання події ми познайомимося трохи пізніше).
• mouseleave - подія відбувається, коли покажчик миші йде з області, що належить елементу. Подія mouseleave подібна до події mouseout і відрізняється від неї тільки тим, що подія mouseleave не спливає (з поняттям спливання події ми познайомимося трохи пізніше).

Порядок виникнення подій: keydown -> keypress -> keyup.

• keydown - подія відбувається, коли натиснута клавіша на клавіатурі над елементом, але ще відпущена.
• keyup - подія відбувається, коли натиснена клавіша на клавіатурі над елементом перейшла у стан відпущено.
• keypress – подія відбувається, коли користувач натиснув клавішу на клавіатурі над елементом.

• beforeunload - подія відбувається перед тим, як документ буде вивантажений. Ця подія дозволяє відображати додаткове повідомлення у діалоговому вікні підтвердження "Ви дійсно хочете залишити цю сторінку?". Стандартне повідомлення, яке з'являється під час закриття документа, може відрізнятися в різних браузерах. Але його Ви не можете змінити або видалити, Ви можете лише за допомогою цього методу додати до нього власне повідомлення, яке відображатиметься разом із стандартним повідомленням.
• error - подія спрацьовує у разі виникнення помилки, що відбувається під час завантаження зовнішнього файла (наприклад, документа чи зображення).
• hashchange - подія відбувається за зміни якірної частини (починається з символу "#") поточного URL.
• load - подія відбувається, коли завантаження об'єкта завершено. Подія load найчастіше використовується для елемента body , щоб виконати сценарій відразу після того, як веб-сторінка повністю завантажиться.
• unload - подія відбувається при розвантаженні сторінки (наприклад, при закритті вкладки (вікна) браузера).
• pageshow - подія відбувається, коли користувач переходить до веб-сторінку, тобто. після того, як сторінка стає доступною користувачеві. Подія pageshow схожа на подію load, за винятком того, що вона спрацьовує щоразу при завантаженні сторінки, навіть якщо вона завантажується з кешу. При першому завантаженні сторінки подія pageshow спрацьовує відразу після події load.
• pagehide - подія відбувається, коли користувач йде зі сторінки (подія pagehide відбувається до події unload). Крім цього дана подія, на відміну від події unload не перешкоджає кешування сторінки.
• resize - подія відбувається за зміни розмірів вікна браузера.
• scroll - подія відбувається, коли ви прокручуєте вміст елемента, що має смугу прокручування.

• focus – подія відбувається, коли елемент отримує фокус. Ця подія не спливає.
• blur – подія відбувається, коли об'єкт втрачає фокус. Ця подія не спливає.
• focusin - подія відбувається, коли елемент отримує фокус. Подія focusin подібна до події focus, але відрізняється від неї тим, що вона спливає. Тому його можна використати, коли Вам необхідно з'ясувати, хто втрачає фокус: елемент чи його дитина?
• focusout - подія відбувається, коли елемент збирається втратити фокус. Подія focusoutподібна до події blur , але відрізняється від неї тим, що вона спливає. Тому його можна використати, коли Вам необхідно з'ясувати, хто втрачає фокус: елемент чи його дитина?
• change - подія відбувається за зміни значення елемента, але після того як елемент втратив фокус. Окрім події change у JavaScript є також схоже подія input, яка відрізняється від події change тим, що відбувається відразу після зміни значення елемента. Подія сhange на відміну від події input також працює з елементами keygen і select. Для радіокнопок (radiobuttons) та прапорців (checkboxes) подія changeвідбувається за зміни стану цих елементів.
• input - подія відбувається після того, як змінюється значення елемента input або елемента textarea.
• invalid - подія відбувається, коли елемент input , дані якого потрібно надіслати разом з іншими даними форми на сервер, містить неприпустимі дані.
• reset - подія відбувається перед очищенням форми, яка здійснюється елементом input з type = "reset".
• search - подія виникає після того, як користувач натискає на клавішу Enter або натискає кнопку "x" (скасування) в елементі input з type="search".
• select - подія відбувається після того, як Ви вибрали деякий текст в елементі. Подія select в основному використовується для елемента input з type="text" або textarea .
• submit - подія відбувається перед надсиланням форми на сервер.

Події, пов'язані з об'єктом, що перетягується (draggable target, вихідний об'єкт):

• dragstart – подія відбувається, коли користувач почав перетягувати елемент;
• drag - подія відбувається, коли користувач перетягує елемент;
• dragend – подія відбувається, коли користувач закінчив перетягування елемента, тобто. коли відпустив курсор миші.

Події, пов'язані з об'єктом (drop target), який приймає об'єкт, що перетягується (draggable target):

• dragenter – подія відбувається, коли об'єкт (draggable target) увійшов в область елемента (drop target), який може прийняти об'єкт (draggable target).
• ragleave – подія відбувається, коли об'єкт (draggable target), що перетягується, залишає межі елемента (drop target), який може його прийняти.
• dragover - подія відбувається, коли об'єкт (draggable target) переміщається в області елемента (drop target), який може його прийняти.
• drop - подія відбувається, коли користувач відпускає об'єкт (draggable target), що перетягується, в область елемента (drop target), який може його прийняти.

Три події, які можуть статися під час виконання CSS анімації:

• animationstart - виникає, коли анімація CSS почалася.
• animationiteration - виникає, коли анімація CSS виконується повторно.
• animationend - виникає, коли CSS анімаціязакінчилася.

• сopy - подія відбувається, коли користувач копіює вміст елемента. Подія copy також відбувається, коли користувач копіює елемент (наприклад, зображення створені за допомогою елемента img). Подія copy використовується переважно для елементів input з type="text" .
• сut – подія відбувається, коли користувач вирізає вміст елемента.
• paste - подія відбувається, коли користувач вставляє деякий вміст елемента.

• afterprint - подія відбувається, коли сторінка починає друкуватись (тобто після натискання кнопки "Друк" у діалоговому вікні) або якщо діалогове вікно "Друк" було закрито.
• beforeprint - подія виникає перед печаткою сторінки, тобто. до відкриття діалогового вікна "Друк".

• transitionend - подія виникає, коли CSS-перехід завершено. Примітка: якщо перехід видалено до завершення (наприклад, якщо властивість CSS transition-property видалено), то подія transitionend не спрацює.

• error - подія виникає у разі виникнення помилки з джерелом події. Помилка зазвичай виникає, коли порушується зв'язок. Якщо це станеться, об'єкт EventSource автоматично намагатиметься підключитися до сервера.
• open – подія виникає, коли з'єднання з джерелом події відкрито.
• message – подія виникає, коли повідомлення отримано через джерело події.
  Об'єкт event події message підтримує такі властивості:
  • data – містить повідомлення.
  • origin – URL документа, який викликав подію.
  • lastEventId - ідентифікатор (id) останнього отриманого повідомлення.

У процесі завантаження аудіо/відео події відбуваються в наступному порядку: loadstart -> durationchange -> loadedmetadata -> loadeddata -> progress -> canplay -> canplaythrough .

• abort - подія виникає, коли припиняється завантаження аудіо/відео. Ця подія виникає саме коли завантаження медіа даних було перервано (скасовано), а не тому, що виникла помилка.
• error - подія виникає, коли сталася помилка під час завантаження аудіо/відео.
• stalled - подія виникає, коли браузер намагається отримати медіа-дані, але дані недоступні.
• - подія відбувається, коли браузер починає шукати зазначене аудіо/відео, тобто. коли розпочинається процес завантаження.
• durationchange - подія виникає, коли змінюється тривалість аудіо/відео. Якщо аудіо/відео завантажується, то тривалість змінюватиметься від значення "NaN" до фактичної тривалості аудіо/відео.
• loadedmetadata - подія виникає, коли метадані для вказаного аудіо/відео завантажені. Метадані аудіо/відео складаються з: тривалості, розміру (тільки відео) та текстової доріжки.
• loadeddata - подія виникає після того, як перший кадр медіа завантажився.
• progress - подія відбувається, коли браузер завантажує вказане аудіо/відео.
• canplay - подія виникає, коли браузер може розпочати відтворення зазначеного аудіо/відео (тобто коли буферизація потоку аудіо/відео достатня для того, щоб браузер міг почати його відтворювати).
• canplaythrough - подія виникає у той час, коли браузер може програвати зазначене медіа без зупинки на буферизацию.
• ended - подія відбувається, коли відтворення аудіо/відео завершилося (досяг кінця). Ця подія може використовуватися для виведення повідомлень типу "Дякую за увагу", "Дякую за перегляд" та ін.
• pause – подія відбувається, коли відтворення аудіо/відео призупинено користувачем або за допомогою коду (програмно).
• play – подія відбувається, коли починається відтворення аудіо/відео. Воно також відбувається, коли аудіо/відео було знято з паузи та починає відтворюватися.
• playing - подія відбувається, коли аудіо/відео відтворюється після того, як вона була поставлена ​​на паузу або зупинилася для буферизації.
• ratechange - подія відбувається, коли змінюється швидкість відтворення аудіо/відео.
• seeking - подія відбувається, коли користувач починає переміщення повзунка (перехід) до нової тимчасової позиції аудіо/відео.
• seeked - подія відбувається, коли користувач закінчив переміщення повзунка (перехід) в нову тимчасову позицію аудіо/відео. Подія seeked протилежно до події seeking . Щоб отримати поточну позицію відтворення, використовуйте властивість currentTime об'єкта Audio / Video .
• timeupdate - подія відбувається за зміни тимчасової позиції аудіо/відео.
  Ця подія відбувається:
  • під час відтворення потоку аудіо/відео.
  • при переміщенні повзунка в нову тимчасову позицію аудіо/відео.
  Подія timeupdate часто використовується разом із властивістю об'єкта Audio/Video currentTime, яке повертає поточну тимчасову позицію відтворюваного аудіо/відео в секундах.
• volumechange – подія відбувається щоразу при зміні гучності відтворюваного потоку відео/аудіо.
  Ця подія відбувається, при:
  • збільшення або зменшення гучності;
  • вимкнення або увімкнення звуку.
• waiting – подія відбувається, коли відео зупиняється для буферизації.

• toggle - подія відбувається, коли користувач відкриває або закриває елементи details . Елемент details призначений для створення додаткових відомостей, які користувач може переглядати або приховувати.
• wheel – подія відбувається при прокручуванні колеса миші вперед або назад над елементом.

Під час роботи зі сторінкою користувач робить різні дії: натискає клавіші миші, вводить текст на клавіатурі. Кожна така дія – це подія браузера. Його можна відстежити і виконати певні рядки програми у разі виникнення. Для цього у JavaScript є обробники подій. Крім дій користувача, існують інші події браузера, наприклад повне завантаження сторінки.

Кожна подія має свою назву. click - це натискання лівої кнопки миші, keydown - натискання клавіші, focus - поява у фокусі елемента форми, Обробка події

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

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

JavaScript:

JavaScript:

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

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

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

Параметри:

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

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

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

HTML код:

JavaScript:

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

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

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

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

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

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

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

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

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

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

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

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

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

Події мутацій та спостерігачі. Елементи, що мутують, відстежуються при зміні структури DOM: наприклад, коли елементи на сторінці вставляються або видаляються за допомогою скрипта.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Загалом все, що ви створюєте, може бути змодельовано наступною заявою:

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

Це універсальна модель застосовна до всіх кодів, які ми складали. Ця модель також відноситься до всіх кодів, які будь-коли складали всі ваші знайомі розробники / дизайнери для своїх програм.

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

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

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

Повертаємось до нашої моделі. Події становлять першу половину заяви:

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

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

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

• Відстеження подій;
• Реакція на події

Ці два кроки здаються досить простими, але не забувайте, що ми маємо справу з JavaScript. Простота є лише димовою завісою, за якою можуть ховатися серйозні проблеми, які ви отримаєте, якщо почнете неправильні дії. Можливо, я надто драматизую? Що ж, розберемося разом.

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

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

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

Те, як ви використовуєте цю функцію, виглядає так:

source.addEventListener(eventName, eventHandler, false);

Давайте проаналізуємо, що означає кожна частина цієї функції.

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

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

У наступних статтях ми розглянемо багато з цих подій докладніше. А зараз просто зверніть увагу на подію click, тому що ми будемо використовувати її далі.

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

Захоплювати чи не захоплювати, ось у чому питання!

Останній аргумент може приймати значення true або false.

Тепер, коли ви познайомилися з функцією addEventListener, давайте підсумуємо все за допомогою одного реального прикладу:

document.addEventListener("click", changeColor, false);

У цьому прикладі наша функція addEventListener прикріплена до об'єкта документа. Коли зафіксовано подію click , вона у відповідь цю подію викликає функцію changeColor (також відому, як обробник подій ). Це підводить нас до поняття реакції на події, про що ми поговоримо в наступному розділі.

Як було розказано в попередньому розділі, відстеження (прослуховування) подій обробляється функцією addEventListener. Після того, як подія зафіксована, вона має бути оброблена обробником подій. Я не жартував, коли я згадав раніше, що обробник подій - це не що інше, як функція:

function normalAndBoring() ( // Мені дуже подобаються різні речі, які можуть бути всередині цієї функції! )

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

document.addEventListener("click", changeColor, false); function changeColor() ( // Я важлива!)

Будь-який код, який ви розміщуєте всередині обробника подій, буде виконуватися, коли в addEventListenerfunction зафіксовано потрібну подію. Це досить просто!

Найкращий спосіб зрозуміти те, що ми дізналися тільки що — побачити все це на прикладі робочого коду. Щоб ми рухалися паралельно, додайте наступну розмітку та код у HTML-документ:

Click Anywhere!

document.addEventListener("click", changeColor, false);

function changeColor() ( document.body.style.backgroundColor = "#FFC926"; )

Спочатку, якщо ви переглянете документ у браузері, то побачите просто порожню сторінку:

Однак все зміниться, якщо ви клацніть мишею в будь-якому місці сторінки. Після того як ви зробите це, колір тла вашої сторінки зміниться з білого на яскраво-жовтий.

Причину цього легко зрозуміти. Давайте подивимося на код:

Виклик addEventListener ідентичний тому, що ми вже розглядали, тому давайте пропустимо цей етап. Натомість зверніть увагу на обробник подій changeColor :

document.addEventListener("click", changeColor, false); function changeColor() ( document.body.style.backgroundColor = "#FFC926"; )

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

Аргументи подій та тип події

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

function myEventHandler(e) ( // елементи оброблювача подій )

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

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

Тепер розберемося з тим, як використовувати події JavaScript. Існують так звані обробники подій. Оброблювачі подій якраз і визначають, що відбуватиметься у разі виникнення певної події. Обробники подій у JavaScript має такий загальний вигляд:

OnНазваПодії

Тобто спочатку йде приставка "on", а далі назва події, наприклад, такі обробники подій: on Focus, on Click, on Submit і так далі. Думаю, тут питань не виникло. А тепер головне питання: "Як використовувати події у JavaScript?" Область їх застосування величезна, і ми зараз з Вами розглянемо одне завдання. На сторінці є три посилання. Кожне з посилань відповідає за різний колір фону (припустимо, білий, жовтий та зелений). Спочатку білий фон. При наведенні миші на певне посилання колір фону змінюється. При відведенні миші колір фону повертається на колір за промовчанням. При натисканні миші колір кольору фону зберігається, як за замовчуванням.

a (
color: blue;
text-decoration: underline;
cursor: pointer;
}


var default_color = "white";

function setTempColor(color) (
document.bgColor = color;
}

function setDefaultColor(color) (
default_color=color;
}

function defaultColor() (
document.bgColor = default_color;
}



Білий
Жовтий
Зелений

Давайте розберемося з цим скриптом, а точніше вже з цілою HTML-сторінкою з підтримкою JavaScript і CSS (іншими словами, це приклад DHTML). Спочатку йдуть звичайні HTML-теги, з яких починається будь-яка HTML-сторінка. Далі ми створюємо стиль, в якому вимагаємо, щоб усі посилання на даній сторінці були синього кольору, підкреслені, і щоб вказівник миші на них був у вигляді "Pointer". Ви, можливо, скажіть: "А навіщо потрібно ставити стиль? Адже посилання і так точно такими ж і будуть". Правильно, посилання, але у нас посилань як таких немає (адже немає атрибуту href у тезі), тому вони будуть простим чорним текстом за умовчанням (правда, кликати по тексту теж можна). Тому стиль обов'язковий. Ви можете його прибрати та подивитися, що буде. А ще краще поставте атрибут href (з будь-яким значенням, хоч порожнім) і поясніть, чому скрипт перестав працювати. Далі вже починається JavaScript. Ми створюємо змінну default_color , яка відповідає за колір за промовчанням. Далі три функції:

Функція setTempColor() відповідає за тимчасову зміну кольору.

Функція setDefaultColor() відповідає за зміну кольору за промовчанням.

Функція defaultColor() встановлює колір тла за промовчанням.

Потім йдуть посилання з атрибутами як обробників подій . При наведенні мишки на посилання виникає подія MouseOver, відповідно, обробник події onMouseOver викликає функцію setTempColor() і передає відповідний параметр. Під час зняття мишки з елемента виникає подія MouseOut , а далі викликається функція defaultColor() , яка робить кольором тла колір за промовчанням. І, нарешті, при натисканні мишки на посилання (обробник onClick ) викликається функція setDefaultColor() , яка встановлює колір заданий у параметрі кольором тла за промовчанням. Як бачите, все досить просто.

Це був принцип використання подій у JavaScript, а далі все залежить тільки від Вашої фантазії!