От автора: приветствую вас, друзья. В этой статье мы продолжим знакомиться с событиями в JavaScript. Именно благодаря событиям наше приложение становится интерактивным и может взаимодействовать с пользователем. Из статьи вы узнаете, что такое объект события, а также познакомитесь с оператором this, который предоставляет доступ к элементу.
Для того, чтобы полноценно работать с событиями, нам не обойтись без таких понятий, как объект события и доступ к самому объекту. Начнем с последнего. Доступ к объекту можно получить через ключевое слово this. Давайте сразу же посмотрим пример:
1 2 3 4 5 6 7 |
<button id="btn">Click me</button> <script> var btn = document.getElementById('btn'); btn.onclick = function(){ console.log(this); }; </script> |
А в консоли при клике мы увидим сам элемент:
Что это нам дает? Думаю, вы уже могли догадаться. Коль у нас есть доступ непосредственно к объекту, значит мы можем что-то сделать с этим объектом. Или с его окружением. Например, выведем текст на кнопке при клике:
1 2 3 4 5 6 |
var btn = document.getElementById('btn'); btn.onclick = function(){ console.log(this.textContent); // или так console.log(this.innerHTML); }; |
А при желании мы можем и без проблем изменить текст на кнопке:
1 2 3 4 |
var btn = document.getElementById('btn'); btn.onclick = function(){ this.textContent = 'Кнопка нажата'; }; |
После клика на кнопке новый текст:
Также без проблем мы можем изменить оформление кнопки или просто назначить для нее класс, использовав оформление таблицы стилей:
1 2 3 4 5 |
var btn = document.getElementById('btn'); btn.onclick = function(){ this.textContent = 'Кнопка нажата'; this.className = 'btn btn-success'; }; |
Ключевое слово this вы не раз будете использовать на практике, поэтому важно понять, как с ним работать. Впрочем, в уроках и курсе по JavaScript этому уделено достаточно внимания.
Теперь давайте уделим немного внимания объекту события. Когда происходит событие, создается объект события, в который записывается различная информация (тип события, координаты курсора, элемент, на котором произошло событие и т.д.), которая может быть нам полезна.
Для того, чтобы получить объект события, достаточно передать его параметром в функцию-обработчик:
1 2 3 4 |
var btn = document.getElementById('btn'); btn.onclick = function(e){ console.log(e); }; |
В консоли мы сразу же увидели тип события и координаты курсора мыши (относительно окна браузера) в момент возникновения события. Соответственно, эту же информацию мы можем получить, обратившись к каждому из свойств по отдельности:
1 2 3 4 5 |
btn.onclick = function(e){ console.log('Координата x:' + e.clientX); console.log('Координата y:' + e.clientY); console.log('Тип события:' + e.type); }; |
Я кликнул дважды по кнопке, первый раз ближе к началу кнопки, второй раз — ближе к концу кнопки. Обратите внимание, как при этом изменилось свойство clientX — координата по оси X (по горизонтали).
А вот таким образом мы можем получить сам объект (некий аналог this получается):
1 2 3 |
btn.onclick = function(e){ console.log(e.currentTarget); }; |
На этом мы, пожалуй, остановимся. В следующих статьях мы вернемся к событиям в JavaScript и работе с ними. Если вы хотите больше узнать о JavaScript, тогда рекомендую обратить свое внимание на уроки по JavaScript и отдельный курс по языку JavaScript. Удачи!