Даний спосіб грунтується на використанні атрибуту, який має вигляд on # 91; подія # 93 ;. де # 91; подія # 93; - це ім'я певної події.
Основні дії: додати до елементу певний атрибут (наприклад: onclick - де: on означає подія, а click - вид події) зі значенням, що містить оператор або функцію. Даний оператор або функція буде виконуватися при настанні цієї події у елемента.
Наприклад, додати до кнопки подія click. при настанні якого буде виводитися повідомлення за допомогою методу alert:
Якщо в обробнику події треба виконати певний код, то необхідно використовувати функцію.
Наприклад, виконаємо вищенаведений приклад з використанням функції:
Наприклад, додати до кнопки подія click. при настанні якого виконується зазначена функція:
Даний варіант підписки на подію використовувати не рекомендується, тому що він не тільки захаращує код HTML, але і має обмеження пов'язані з використанням об'єкта event. ключового слово this і ін.
Наприклад, додати до кнопки, що має id = "myButton" подія click. при настанні якого виконується зазначена функція:
Якщо подія задається через атрибут, то браузер, читаючи код HTML, створює відповідне властивість автоматично. Тобто браузер працює з подіями тільки за допомогою відповідних властивостей об'єкта (елемента).
Якщо Ви підпишіться на подію різними способами, тобто через атрибут і за допомогою властивості, то браузер в цьому випадку буде використовувати тільки варіант реалізації події, виконаний за допомогою властивості. Підписуватися на події краще тільки за допомогою відповідних властивостей об'єкта (елемента), використовувати атрибути для цих цілей не рекомендується.
Метод addEventListener. призначений для додавання Прослуховувач (listener) певної події (event) до елементу і виконання обробника (callback) при його настанні. Крім методу addEventListener є ще один метод removeEventListener. який призначений для виконання зворотної дії, тобто для видалення Прослуховувач.
Синтаксис методів addEventListener і removeEventListener:
Метод addEventListener має 3 параметри:
Наприклад, використання анонімної функції для обробки події "click":
Наприклад, використання функції myFunction () для обробки події "click":
Обробник події, який Ви додали за допомогою методу addEventListener () можна при необхідності видалити за допомогою методу removeEventListener (). Видалити обробник події можна тільки в тому випадку, якщо він в методі addEventListener () заданий у вигляді іменованої функції. Якщо Ви задали обробник у вигляді анонімної функції в методі addEventListener (). то його видалити за допомогою методу removeEventListener () не вийде.
Наприклад, додати, а потім видалити обробник myFunction для події mousemove об'єкта document:
Наприклад, додати кілька обробників подій, які будуть виконуватися при кліці в області, що належить документу:
Наприклад, додати об'єкту document обробники для наступних подій: click. mouseover. mouseout.
Наприклад, для передачі оброблювачу значень параметрів, будемо використовувати анонімну функцію. У цій анонімної функції будемо використовувати ще одну функцію (іменовану) за допомогою якої і будемо передавати необхідні параметри:
Наприклад, при настанні події click в документі, змінити колір фону елемента body. Обробник події виконати у вигляді анонімної функції.
Як правильно працювати з подіями
Вищенаведений код можна записати більш коротко, за допомогою анонімної функції:
Більш правильно працювати не з подією load (відбувається після повного завантаження сторінки), а з подією DOMContentLoaded. яке відбувається після того як браузер завантажив документ HTML і побудував DOM-дерево. Тобто для того щоб працювати з DOM-деревом немає необхідності чекати поки завантажаться всі ресурси HTML-сторінки досить щоб браузер побудував дерево DOM.
Вищенаведений код можна записати більш коротко, за допомогою анонімної функції:
Одночасно підписати на подію відразу кілька об'єктів
Наприклад, підписати на подію click відразу всі елементи p. Обробку події виконувати за допомогою функції myFunction ():