Події в JavaScript

48

Від автора: вітаю вас, друзі. У цій статті ми з вами почнемо знайомитися з подіями в JavaScript. Саме завдяки подіям наше додаток стає інтерактивним і може взаємодіяти з користувачем. Почнемо?

Насамперед нас цікавлять події миші, тому ми і почнемо саме з них. Ось типові події миші:

click — подія кліка основний (лівої кнопки миші;

mouseover — подія, що виникає в момент, коли курсор миші знаходиться на шуканий елемент сторінки (наприклад, кнопка);

mousemove — подія руху миші;

mousedown — подія натискання кнопки миші;

mouseup — подія віджимання кнопки миші (виникає після події mousedown);

contextmenu — подія кліка контекстної (правої кнопки миші.

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

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

Click me

Тепер при кожному натисканні на кнопку в консоль буде виводитися рядок Hello:

События в JavaScript

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

Click me

function creteElem(){
var elem = document.getElementById(‘container’);
var p = document.createElement (p’);
p.textContent = ‘Lorem ipsum dolor sit amet.’;
elem.appendChild(p);
}

События в JavaScript

Як бачимо, досить просто. Ми також можемо використовувати й інший спосіб призначення обробника для елемента. Замість використання атрибута onclick тега в коді, ми можемо використовувати властивість onclick в коді JS, де опишемо функцію. Приклад:

Click me
var btn = document.getElementById(‘btn’)
btn.onclick = function(){
console.log(‘Hello’);
};

Тепер при кожному натисканні на кнопці ми побачимо в консолі лічильник виведення рядка Hello.

События в JavaScript

На цьому ми, мабуть, зупинимося. У наступних статтях ми повернемося до подій в JavaScript і роботі з ними. Якщо ви хочете більше дізнатися про JavaScript, тоді рекомендую звернути свою увагу на уроки по JavaScript і окремий курс по мові JavaScript. Удачі!