Події в JavaScript. Частина 2

31

Від автора: вітаю вас, друзі. У цій статті ми продовжимо знайомитися з подіями в JavaScript. Саме завдяки подіям наше додаток стає інтерактивним і може взаємодіяти з користувачем. Зі статті ви дізнаєтеся, що таке об’єкт події, а також познайомитеся з оператором this, який надає доступ до елементу.

Для того, щоб повноцінно працювати з подіями, нам не обійтися без таких понять, як об’єкт події і доступ до самого об’єкта. Почнемо з останнього. Доступ до об’єкта можна отримати через ключове слово this. Давайте відразу ж подивимося приклад:

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

А в консолі при кліці ми побачимо сам елемент:

События в JavaScript

Що це нам дає? Думаю, ви вже могли здогадатися. Якщо у нас є доступ безпосередньо до об’єкта, значить ми можемо щось зробити з цим об’єктом. Або з його оточенням. Наприклад, виведемо текст на кнопці при кліку:

var btn = document.getElementById(‘btn’);
btn.onclick = function(){
console.log(this.textContent);
// або так
console.log(this.innerHTML);
};

А при бажанні ми можемо і без проблем змінити текст на кнопці:

var btn = document.getElementById(‘btn’);
btn.onclick = function(){
this.textContent = ‘Кнопка натиснута’;
};

Після кліку на кнопці новий текст:

События в JavaScript

Також без проблем ми можемо змінити оформлення кнопки або просто призначити для неї клас, використавши оформлення таблиці стилів:

var btn = document.getElementById(‘btn’);
btn.onclick = function(){
this.textContent = ‘Кнопка натиснута’;
this.className = ‘btn btn-success’;
};

События в JavaScript

Ключове слово this ви не раз будете використовувати на практиці, тому важливо зрозуміти, як з ним працювати. Втім, на уроках та в курсі JavaScript цьому приділено достатньо уваги.

Тепер приділимо трохи уваги об’єкту події. Коли відбувається подія, створюється об’єкт події, в який записується різна інформація (тип події, координати курсору, елемент, на якому відбулася подія тощо), яка може бути нам корисний.

Для того, щоб отримати об’єкт події, достатньо передати його параметром в функцію-обробник:

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

События в JavaScript

В консолі ми відразу ж побачили тип події і координати курсору миші (щодо вікна браузера) у момент виникнення події. Відповідно, цю ж інформацію ми можемо отримати, звернувшись до кожного з властивостей окремо:

btn.onclick = function(e){
console.log(‘Координата x:’ + e.clientX);
console.log(‘Координата y:’ + e.clientY);
console.log(‘Тип події:’ + e.type);
};

События в JavaScript

Я клацнув двічі по кнопці, перший раз ближче до початку кнопки, другий раз — ближче до кінця кнопки. Зверніть увагу, як при цьому змінилася властивість clientX — координата по осі X (по горизонталі).

А ось таким чином ми можемо отримати сам об’єкт (аналог this виходить):

btn.onclick = function(e){
console.log(e.currentTarget);
};

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