Огляд подій і обробників
- Шаблон проектування подій
- Приклад обробника події кнопки
- Важливі події
- Ієрархія об'єкта подій
- документації
Ця оглядова стаття про події та їх обробниках описує шаблон проектування коду, який використовується для реагування на події, що виникають, коли браузер отримує доступ до web-сторінці, і містить добірку типів подібних подій, які сучасні брауезери можуть обробляти.
Події та обробники подій зайняли центральне місце в web-програмуванні з додаванням мови в браузери, супроводжуючи зміну архітектури рендеринга від перехоплення і завантаження сторінки до управління за допомогою подій, заснованому на перекомпановке (reflow). Спочатку браузер очікує, поки він отримає всі ресурси, пов'язані зі сторінкою, щоб проаналізувати, обробити, отрисовать і надати сторінку користувачеві. Отрисовать сторінка залишається незмінною, поки браузер не запросить нову. Зі зміною в підході до рендерингу динамічної сторінки, браузер безперервно зациклюється між обробкою, отрисовкой, поданням вмісту і очікуванням деякого нового тригера події. Тригери подій включають, наприклад, завершення завантаження ресурсу по мережі, скачування зображень, які тепер можуть бути намальовані на екрані, завершення браузером аналізу ресурсу, обробку HTML-вмісту сторінки, взаємодія користувача з вмістом сторінки, натискання кнопок. Дуглас Крокфорд добре пояснює це зміна в декількох лекціях, особливо своїй промові "Незручні API: Теорія DOM", яка описує зміни в потоці початкового потоку браузера від керованого подіями браузера.
Другий підхід змінює останні кроки, переходячи від простори потоку до нескінченного циклу, де очікування і обробка виникнення нових подій слід за отрисовкой. Введення динамічного підходу дозволяє сторінці бути частково отрендеріной, навіть коли браузер ще не закінчив вилучення всіх ресурсів; це так само дозволено для дій, керованими подіями, які JavaScript використовує. (Мова доступна на декількох ресурсах, включаючи цей .) На даний момент, все середовища виконання JavaScript використовують події і їх обробники.
Шаблон проектування подій
Система подій, за своєю суттю, простий програмний шаблон проектування. Він починається з угоди про вид події і:
- імені-рядки, використовуваної для собийтія,
- типу структури даних, що використовуються для представлення ключових властивостей події,
- об'єкта JavaScript, який буде 'викликати' ця подія.
Шаблон реалізується за допомогою:
- визначення JavaScript-функції, яка приймає в якості аргументу структуру даних, яка була узгоджена раніше, і
- реєстрації функції за допомогою імені-рядки через об'єкт, який буде викликати подія.
Функція вважається "слухачем" або "оброблювачем", де обидва іменами взаімнозаменяеми. Цьому шаблоном можна легко слідувати з використанням повністю призначеного для користувача коду, як пояснено в статті про користувальницьких події . Шаблон так само використовується сучасними web-браузерами, що визначають безліч подій, які викликаються у відповідь на призначений для користувача введення або активність браузера.
Сучасні браузери слідують подієвому шаблоном, використовуючи стандартизований підхід. Як структури даних для властивостей події вони застосовують об'єкт, отриманий від об'єкта EventPrototype. Для регістратраціі функції, яка буде обробляти цю структуру даних, використовується метод, званий addEventListener, який очікує в якості аргументу ім'я-рядок, що відповідає типу події, і функцію-обробника. У підсумку, браузери визначають величезне число об'єктів джерел подій і широке розмаїття типів подій, сформованих об'єктами.
Приклад обробника події кнопки
Наприклад, браузерні елемент button призначений для виклику події з ім'ям 'click' у відповідь на натискання кнопки миші або дотиком пальця до чутливої частини екрану. В HTML ми можемо визначити button як:
<Button id = "buttonOne"> Click here to emit a 'click' event </ button>і, в коді JavaScript, ми можемо спочатку визначити функцію для прослуховування цієї події 'click':
var example_click_handler = function (ev) {var objKind = (ev instanceof Event)? "EventPrototype": "ObjectPrototype"; alert ( "We got a click event at" + ev.timeStamp + "with an argument object derived from:" + objKind); };і потім зареєструвати свою функцію за допомогою об'єкта Button або з боку скрипта, використовуючи уявлення DOM (Document Object Model) на HTML-сторінці:
var buttonDOMElement = document.querySelector ( '# buttonOne'); buttonDOMElement.addEventListener ( 'click', example_click_handler);або на самій HTML-сторінці, додавши функцію як значення атрибута 'onclick', хоча цей варіант зазвичай використовується на дуже простих web-сторінках.
Цей код покладається на угоду про те, що існує деякий вид події, званий 'click', який викличе всі функції-слухачі (або 'обработчі') з об'єктом-аргументом Event (на даний момент, в цьому випадку похідний від об'єкта MouseEvent) і буде запущений після маніпуляцій користувача з елементами button на HTML-сторінці. Код не має видимого впливу, поки користувач не використовує кнопки, наводить покажчик миші на елемент HTML і натискає на ліву кнопку або встановлює палець або стилус на деякий місце на екрані, вище кнопки; коли це станеться, buttonDOMElement об'єкта JavaScript викличе функцію example_click_handler з об'єктом Event як аргумент. Функція, в свою чергу, виконає будь-які дії, описані програмістом, в даному випадку відрив діалогове вікно HTML. Зауважимо, що обробник має доступ до об'єкта ev, так як той приймає в якості аргументу; об'єкт містить інформацію про подію, зокрема час його виникнення.
У другому варіанті, інтегрований в web-сторінку набагато сучасніший JavaScript обгорнутий в подієвий виклик функції, щоб переконатися, що код буде виконаний тільки тоді, коли HTML буде оброблений і доступний для зміни або декорування. Наприклад, код може бути оголошений так:
var funcInit = function () {// user code goes here and can safely address all the HTML elements from the page // since the document has successfully been 'loaded'} document.addEventListener ( 'DOMContentLoaded', funcInit);так що цей код буде викликаний тільки після того, як об'єкт document викличе подія 'DOMContentLoaded', тому що HTML був проаналізований і були створені об'єкти Javasript, що представляють кожен вузол HTML-документа. Зауважимо, що в цьому прикладі, код навіть не передає аргумент події в функцію, тому що того ніколи не знадобиться використовувати дані, описані в ньому; скоріше, код всього лише потрібно почекати, поки не трапиться подія.
Шаблон легко вивчити і впровадити. Складність з подіями виникає через необхідність вивчити велику різноманітність подій, які представлені в сучасних web-браузерах. Так само є деяка складність в розумінні, як писати обробники, так як даний код працює ассінхронном і потенційно може бути викликаний кілька разів поспіль, але в трохи іншій ситуації.
Важливі події
Web-браузери визначають велике число подій, тому не практично описувати їх все. Event Reference покликаний містити список стандартних подій, які використовуються в сучасних браузерах.
У загальному випадку, події різного виду виділяють, грунтуючись на об'єкті, який викликає дана подія, включаючи:
- об'єкт window, на випадок зміни розміру браузера,
- об'єкт window.screen, на випадок зміни положення пристрою,
- об'єкт document, включаючи завантаження, модифікацію, призначене для користувача взаємодія і розвантаження сторінки,
- об'єкт в DOM (об'єктна модель документа) дереві, включаючи призначене для користувача взаємодія або зміни,
- об'єкт XMLHttpRequest, який використовується для запитів мережі, і
- медіа-об'єкти, такі як audio і video, коли медіа-потокові плеєри змінюють стан.
хоча цей список на даний момент неповний.
Деякі події, які варто відзначити:
Замітка: Цей список подій потребуватиме доопрацювання, щоб відповідати дійсності; ця робота чекає деякої глобальної реорганізації в документі. Так само потрібно знайти гарне пояснення подій, включаючи події під час завантаження сторінки, таких, як частково описаних в цієї статті або цьому питанні на Stack Overflow .
- глобальний об'єкт window викликає подія, зване 'Load' , Коли сторінка закінчила рендеринг, маючи на увазі, що всі ресурси були завантажені і застосовані, так що скрипт був виконаний і зображення відображені,
- глобальний об'єкт window викликає подія, зване 'Resize' , Коли висота або ширина вікна браузера була измененеия користувачем,
- об'єкт DOM document , Що представляє HTML-документ, викликає подія, зване 'DOMContentLoaded' , Коли документ закінчив завантаження,
- об'єкт вузла DOM, такий як div або button , Що викликає подія, зване 'Click' , Коли користувач натискає кнопку миші, поки її покажчик знаходиться поверх вузла DOM на HTML-сторінці.
Ієрархія об'єкта подій
Web-браузер визначає безліч подій різного виду. Кожен опис включає, як структуру даних, що передається в обробника, об'єкт, який успадковується від об'єкта EventPrototype.
Часткова диаграма ієрархії класу об'єкта подій:
Замітка: Ця диаграма неповна.
Web API Документація містить сторінку, яка описує об'єкт подій , Який так само включає відомі події DOM, підкласи об'єкта Event.
документації
Три ресурсу на MDN (Mozilla Developer Network) частково корисні для програмістів, які хочуть працювати з подіями: