JavaScript виконання коду JavaScript підключення зовнішнього файлу JavaScript console.log JavaScript змінні і константи JavaScript типи даних JavaScript операції зі змінними JavaScript перетворення даних JavaScript масиви JavaScript умовні конструкції JavaScript цикли JavaScript функції JavaScript область видимості змінних JavaScript замикання і функції IIFE JavaScript Паттерн Модуль JavaScript рекурсивні функції JavaScript перевизначення функцій JavaScript hoisting JavaScript передача параметрів за значенням і за посиланням JavaScript стрілочні функції JavaScript ООП Object JavaScript ООП вкладені об'єкти і масиви в об'єктах JavaScript ООП перевірка наявності і перебір методів і властивостей JavaScript ООП об'єкти у функціях JavaScript ООП конструктори об'єктів JavaScript ООП розширення об'єктів. prototype JavaScript ООП інкапсуляція JavaScript ООП Функція як об'єкт. Методи call і apply JavaScript ООП спадкування JavaScript ООП Ключове слово this JavaScript ООП Object destructuring JavaScript ООП класи JavaScript ООП Date. Робота з датами JavaScript Об'єкт Math. математичні операції JavaScript Об'єкт Array. Робота з масивами JavaScript ООП об'єкт Number JavaScript String JavaScript String Об'єкт RegExp. Регулярні вирази JavaScript String Регулярні вирази в методах String JavaScript String Синтаксис регулярних виразів JavaScript Робота з браузером і BOM JavaScript діалогові вікна JavaScript Історія браузера. об'єкт history JavaScript об'єкт location JavaScript об'єкт navigator JavaScript таймери JavaScript DOM Введення JavaScript DOM Об'єкт document. Пошук елементів JavaScript DOM Властивості об'єкта document JavaScript DOM Об'єкт Node. Навігація по DOM JavaScript DOM Створення, додавання і видалення елементів веб-сторінки JavaScript DOM Об'єкт Element. управління елементами JavaScript DOM Зміна стилю елементів JavaScript події. Введення в обробку подій. JavaScript події обробники JavaScript події. об'єкт Event JavaScript події. поширення подій JavaScript події миші JavaScript події клавіатури JavaScript FORMS. Форми і їх елементи JavaScript FORMS. Кнопки JavaScript FORMS. текстові поля JavaScript FORMS. Прапорці та перемикачі JavaScript FORMS. Список select JavaScript JSON JavaScript зберігання даних. cookie JavaScript зберігання даних. Web Storage JavaScript Collection. Ітератори JavaScript Collection. Генератори JavaScript Collection. Множина Set JavaScript Collection. Map JavaScript Collection. WeakSet і WeakMap JavaScript AJAX. XMLHttpRequest JavaScript AJAX. Відправка даних JavaScript AJAX. Promise в Ajax-запитах

JavaScript події. Введення в обробку подій.


Введення в обробку подій

Для взаємодії з користувачем в JavaScript визначено механізм подій. Наприклад, коли користувач натискає кнопку, то виникає подія натискання кнопки. У коді JavaScript ми можемо визначити виникнення події і якось її обробити.

В JavaScript є наступні типи подій:

  • Події миші (переміщення курсору, натискання миші і т.д.)

  • Події клавіатури (натискання або відпускання клавіші клавіатури)

  • Події життєвого циклу елементів (наприклад, подія завантаження веб-сторінки)

  • Події елементів форм (натискання кнопки на формі, вибір елемента в списку, що випадає і т.д.)

  • Події, що виникають при зміні елементів DOM

  • Події, що виникають при торканні на сенсорних екранах

  • Події, що виникають при виникненні помилок

Розглянемо найпростішу обробку подій. Наприклад, на веб-сторінці у нас є наступний елемент div :

<div id="rect" onclick="alert('Нажато')" style="width:50px;height:50px;background-color:blue;"></div>

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

alert('Нажато')

І при натисканні на кнопку буде вискакувати повідомлення:

Також можна було б винести всі дії з обробки події в окрему функцію:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
</head>
<body>

<div id="rect" onclick="displayMessage()" style="width:50px;height:50px;background-color:blue;">/div>

<script>

function displayMessage(){
    alert('Нажато');
}

</script>

</body>
</html>

Тепер обробником події буде виступати функція displayMessage .


Передача параметрів в обробник події

В обробник можна передавати параметри. Наприклад, ми можемо передати поточний об'єкт, на якому виникає подія:

<a href="page1.html" onclick="return handler(this)">Сторінка 1</a>

<script>

function handler(obj){     
    alert(obj.href);
    return false;
}

</script>

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

Крім того, треба зазначити, що тут обробник повертає результат. Хоча в першому прикладі з блоком div від обробника не було потрібно повернення результату. Справа в тому, що для деяких обробників можна підтвердити або зупинити обробку події. Наприклад, натискання на посилання повинно привести до переадресації. Але повертаючи з обробника false , ми можемо зупинити стандартний шлях обробки події, і переадресації не буде. Якщо ж повертати значення true , то подія обробляється в стандартному порядку.

Якщо ж ми зовсім приберемо повернення результату, то подія буде оброблятися, як ніби повертається значення true :

<a href="page1.html" onclick="handler(this)">Сторінка 1</a>

<script>

function handler(obj){    
    alert(obj.href);
}

</script>

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

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <style>
    #rect{
        width:50px;
        height:50px;
        background-color:blue;
    }
    </style>
</head>
<body>

<div id="rect" onclick="handler(event)"></div>

<script>

function handler(e){     
    alert(e.type); // отримуємо тип події
}

</script>
</body>
</html>

В даному випадку за допомогою властивості type об'єкта event отримуємо тип події (в даному випадку тип click ).


Наш партнер:
beta test mp3 playlist downloader