Події в javascript, javascript
Якщо ви не помітили, більшість додатків і веб-сайтів досить нудні, якщо існують самі по собі. Вони зустрічають вас помпезним і помітним інтерфейсом, проте враження від нього дуже швидко сходить нанівець, якщо ви не починаєте взаємодіяти з ними:
Причина цього дуже проста. Додатки існують для того, щоб реагувати на ваші дії. Існують деякі стимули, які змушують вас запустити програми і почати роботу з ними. Все інше, що вони роблять після цього, багато в чому залежить від того, що ви вказуєте їм зробити. Ось тут все стає справді цікаво.
Ви вказуєте додатків, що їм потрібно зробити, змушуючи їх реагувати на те, що відомо, під назвою події. У цій статті ми оглядово розглянемо, що таке події і як їх можна використовувати.
Що таке події?
Загалом, все, що ви створюєте, може бути змодельоване такою заявою:
Ви можете заповнити прогалини в цій заяві безліччю речей. Перший пробіл повідомляє, що щось відбувається. Другий пробіл описує реакцію на це. Ось кілька прикладів заповнення цієї заяви:
Це універсальна модель може бути застосована до всіх кодами, які ми з вами складали. Ця модель також відноситься до всіх кодами, які коли-небудь складали всі ваші знайомі розробники / дизайнери для своїх додатків.
Не існує ніякого способу обійти цю модель, так що. немає ніякого сенсу і намагатися. Замість цього, вам потрібно глибше вивчити цю дуже корисну річ, відому як подія.
Подія це не більше ніж сигнал. Він повідомляє, що щось тільки що сталося. Цим щось може бути натискання кнопки миші. Це може бути натискання клавіші на клавіатурі. Це може бути зміна розміру вашого вікна. Це може бути просто тільки що відбулася завантаження вашого документа.
Повертаємося до нашої моделі. Події складають першу половину заяви:
Події визначають річ, яка відбувається. Вони посилають сигнал. Друга частина моделі визначає реакцію на подію:
- Відстеження подій;
- Реакція на події.
1. Відстеження подій
Якщо чесно, то я свого часу пройшов через все що ви робите всередині програми для визначення подій. Іноді, ваш додаток визначає подія автоматично, наприклад, при завантаженні. Іноді подія визначається, як результат вашої взаємодії з додатком.
Слід зазначити, що додаток бомбардируется подіями постійно, незалежно від того, чи потрібно вам їх фіксувати чи ні. Наше завдання полягає в тому, щоб вказати додатком, відстежувати тільки ті події, які нам потрібні.
Важка робота з відстеження потрібних нам подій виконується функцією під назвою addEventListener. Ця функція відповідає за те, щоб постійно бути напоготові і повідомляти інші частини вашого застосування, коли відбувається якесь цікаве подія.
Те, як ви використовуєте цю функцію, виглядає наступним чином:
Давайте проаналізуємо, що означає кожна з частин цієї функції.
Ви викликаєте addEventListener через елемент або об'єкт, в якому хочете прослуховувати події. Як правило, це DOM -Елемент, але це також може бути документ, вікно або будь-який інший об'єкт, який може генерувати події.
ім'я події
Перший аргумент, який ви вказуєте для функції addEventListener - це ім'я події, яке ви хочете відстежувати. Повний список подій, з якими ви можете взаємодіяти, занадто великий, щоб привести його тут повністю (відвідайте краще цю сторінку), але деякі з найбільш поширених подій, з якими вам доведеться зіткнутися, виглядають наступним чином:
кожен раз, коли ви використовуєте коліщатко миші для прокрутки вгору або вниз.
оброблювач подій
В якості другого аргументу ви повинні вказати функцію, яка буде викликатися, коли подія зафіксовано. Ця функція називається обробник подій. Трохи нижче я розповім про неї детальніше.
Захоплювати або не захоплював, ось в чому питання!
Останній аргумент може приймати значення true або false.
Підсумовуємо все вище сказане
Тепер, коли ви познайомилися з функцією addEventListener. давайте підсумуємо все за допомогою одного реального прикладу:
В даному прикладі наша функція addEventListener прикріплена до об'єкту документа. Коли зафіксовано подія click. вона у відповідь на цю подію викликає функцію changeColor (також відому, як обробник подій). Це підводить нас впритул до поняття реакції на події, про що ми поговоримо в наступному розділі.
2. Реакція на події
Як було розказано в попередньому розділі, відстеження (прослуховування) подій обробляється функцією addEventListener. Після того, як подія зафіксовано, воно повинно бути оброблено оброблювачем подій. Я не жартував, коли я згадав раніше, що обробник подій - це не що інше, як функція:
Єдина відмінність між стандартною функцією і тієї, яка вказана в якості обробника події, є те, що обробник подій спеціально викликається по імені у виклику addEventListener:
Будь-код, який ви розміщуєте усередині обробника подій, буде виконуватися, коли в addEventListenerfunction зафіксовано потрібне вам подія. Це досить просто!
простий приклад
Кращий спосіб зрозуміти те, що ми дізналися тільки що - побачити все це на прикладі повністю робочого коду. Щоб ми рухалися паралельно, додайте наступну розмітку і код в HTML-документ:
Однак все зміниться, якщо ви клацніть мишею в будь-якому місці сторінки. Після того як ви зробите це, колір фону вашої сторінки зміниться з білого на яскраво-жовтий.
Причину цього досить легко зрозуміти. Давайте подивимося на код:
Виклик addEventListener ідентичний тому, що ми вже розглядали, так що давайте припустимо цей етап. Замість цього зверніть увагу на обробник подій changeColor:
Ця функція викликається, коли в документі зафіксовано подія click. Коли викликається ця функція, вона задає яскраво-жовтий колір фону елемента body. Пов'язуючи це з заявою, яке ми розглядали на самому початку, ми побачимо, що цей приклад буде виглядати так:
Якщо ви розумієте суть того, що відбувається, то це здорово! Ви тільки що дізналися про один з найважливіших понять, з яким зіткнетеся в програмуванні. Але ми ще не закінчили. Ми не дозволимо обробникам подій так легко зіскочити з нашого гачка, так що давайте розглянемо ще один момент.
Аргументи подій і тип події
Оброблювач подій робить більше, ніж просто викликається, коли подія зафіксовано через функцію відстеження подій. Він також через свої аргументи забезпечує доступ до об'єкта основного події. Для простого доступу до цього об'єкта події ми повинні змінити сигнатуру обробника, щоб прописати підтримку цих аргументів.
На даний момент, обробник подій - це все ще стара добра функція. Але це те, що нам і потрібно, це функція, яка приймає один аргумент. аргумент події!
Ви можете використовувати будь-який допустимий ідентифікатор для аргументу, але я, як правило, краще e, тому що так роблять всі круті хлопці. Немає нічого технічно неправильного в тому, щоб визначити подію таким чином:
У будь-якому випадку, аргумент події вказує на об'єкт події, і об'єкт передається в якості частини події. Існує причина, по якій ми звертаємо увагу на такий, здавалося б, звичайний і нудний момент, як виникнення події.
Цей об'єкт події містить властивості, які відносяться до виник події. Подія, викликане кліком миші, буде мати інші властивості в порівнянні з подією, викликаним натисканням клавіші на клавіатурі.
Більшість подій матиме своє власне специфічну поведінку, а об'єкт події є вікном, через яке ви зможете спостерігати всі ці унікальні особливості.
Незважаючи на величезну різноманітність подій, і об'єктів подій, які ви можете отримати як їх наслідок, існують певні властивості, які є загальними для всіх.
Це стало можливо завдяки тому, що всі об'єкти подій виходять з базового типу Event (технічно, Interface). До деяких з поширених властивостей типу Event, які ви будете використовувати, відносяться:- i. currentTarget
- ii. target
- iii. preventDefault
- iv. stopPropagation
- v. type
Видалення отслежівателя подій
Іноді вам потрібно буде видалити з елемента отслежіватель подій. Це робиться за допомогою одвічного супротивника addEventListener - функції removeEventListener:
Отслежіватель подій, який ми додали в першому рядку, повністю нейтралізується викликом removeEventListener у другому рядку. Якщо виклик removeEventListener використовує будь-який інший аргумент, крім тих, що має викликаний слухач подій, то він буде ігноруватися, і відстеження подій продовжиться.
висновок
Ну от і все. Ви отримали ввідну інформацію щодо подій. Просто пам'ятайте, що у вас є функція addEventListener. яка дозволяє зареєструвати функцію обробника подій. Ця функція обробника буде викликатися, коли в отслежівателе подій зафіксовано відповідне подія.
Хоча ми побіжно торкнулися деякі інші, суміжні теми, ви зможете краще в них розібратися, коли ми будемо розглядати їх в контексті більш складних подій.